ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-04-23 14:07:14 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

restyle version label on pacakge cards (#387)

Browse source
This commit is contained in:
ABevier 2023-04-03 20:18:18 -04:00 committed by GitHub
parent bfde649349
commit 39c1c88894
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 39 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
modules/desktop/src/components/install-button/install-button.svelte
View file

@ -95,6 +95,7 @@
.dropdown {
position: relative;
display: inline-block;
width: 100%;
min-width: 130px;
}

21
modules/desktop/src/components/package-card/package-card.svelte
View file

@ -4,7 +4,6 @@
import ProgressCircle from "@tea/ui/progress-circle/progress-circle.svelte";
import InstallButton from "../install-button/install-button.svelte";
import type { GUIPackage } from "$libs/types";
import VersionLabel from "./version-label.svelte";
export let pkg: GUIPackage;
export let availableVersions: string[];
@ -16,7 +15,7 @@
};
</script>
<section class="package-card border-gray relative h-auto border">
<section class="package-card relative h-auto border border-gray">
<a href={link}>
<figure class="relative">
<ImgLoader
@ -33,18 +32,26 @@
<h4 class="text-sm font-light">&#x2022;&nbsp;{pkg.maintainer}</h4>
{/if}
{#if pkg.desc}
<p class="line-clamp-2 text-xs font-thin">{pkg.desc}</p>
<p class="text-xs font-thin line-clamp-2">{pkg.desc}</p>
{/if}
</article>
</a>
<footer class="absolute bottom-0 left-0 flex w-full items-stretch justify-between gap-2 p-2">
<VersionLabel {pkg} {availableVersions} />
<div class="flex flex-col justify-end">
<InstallButton {pkg} {availableVersions} onClick={onClickCTA} />
<div class="m-2 flex w-full items-center justify-between">
<div class="flex-1">
<div class="pk-version flex items-center whitespace-nowrap text-xs font-extralight">
<i class="icon-versions-available mr-1 flex" />
{availableVersions.length} {availableVersions.length === 1 ? "version" : "versions"}
</div>
</div>
<div class="flex-1"><!-- Spacer --></div>
<div class="flex-[2_2_0%]">
<InstallButton {pkg} {availableVersions} onClick={onClickCTA} />
</div>
</div>
</footer>
{#if progessLoading > 0 && progessLoading < 100}
<div class="absolute top-0 left-0 h-full w-full bg-black bg-opacity-50">
<div class="absolute left-0 top-0 h-full w-full bg-black bg-opacity-50">
<div class="absolute left-0 right-0 top-1/2 m-auto -mt-12 h-24 w-24">
<ProgressCircle value={progessLoading} />
</div>

24
modules/desktop/src/components/package-card/version-label.svelte
View file

@ -1,24 +0,0 @@
<script lang="ts">
import { PackageStates, type GUIPackage } from "$libs/types";
export let pkg: GUIPackage;
export let availableVersions: string[];
</script>
<div class="flex flex-col justify-center">
{#if pkg.state === PackageStates.AVAILABLE || pkg.state === PackageStates.INSTALLING}
<div class="pk-version text-xs font-extralight">latest version: v{pkg.version}</div>
<div class="pk-version text-xs font-extralight">
versions available: {availableVersions.length}
</div>
{:else if pkg.state === PackageStates.NEEDS_UPDATE || pkg.state === PackageStates.UPDATING}
<div class="pk-version text-xs font-extralight">
your latest version: v{pkg.installed_versions?.[0]}
</div>
<div class="pk-version text-xs font-extralight">update available: v{pkg.version}</div>
{:else if pkg.state === PackageStates.INSTALLED}
<div class="pk-version text-xs font-extralight">
version installed: v{pkg.installed_versions?.[0]}
</div>
{/if}
</div>

BIN
modules/ui/src/icons/fonts/tea-icons.eot
View file

Binary file not shown.

6
modules/ui/src/icons/fonts/tea-icons.svg
View file

@ -49,4 +49,10 @@
<glyph glyph-name="birthday-cake" unicode="&#78;" d="M512 110l0-110-512 0 0 110c9 0 17 1 24 4 8 2 14 5 17 8 4 2 8 6 14 10 5 5 10 9 14 11 4 2 10 3 16 3 7 0 12-1 16-3 4-2 9-6 15-11 6-4 10-8 14-11 3-2 9-5 16-7 8-3 16-4 25-4 8 0 17 1 24 4 8 3 13 5 17 8 3 2 8 6 13 10 4 4 8 6 10 8 2 2 5 3 9 4 3 2 7 2 12 2 7 0 12-1 16-3 4-2 9-6 15-11 5-4 10-8 13-10 4-3 10-6 17-8 8-3 16-4 24-4 9 0 17 1 25 4 7 2 13 5 17 8 3 2 8 6 13 10 6 5 11 9 15 11 4 2 9 3 16 3 6 0 12-1 16-3 4-2 9-6 14-11 6-4 10-8 14-10 3-3 9-6 17-8 7-3 15-4 24-4z m0 91l0-55c-7 0-12 1-16 3-4 3-9 6-15 11-5 5-10 9-13 11-4 3-9 5-17 8-7 3-16 4-24 4-9 0-17-1-25-4-7-3-13-5-16-8-4-2-8-6-14-11-4-3-7-6-9-7-2-2-5-3-9-5-4-1-8-2-13-2-6 0-12 1-16 3-4 3-9 6-14 11-6 5-10 9-14 11-3 3-9 5-16 8-8 3-16 4-25 4-9 0-17-2-24-4-8-3-13-6-17-8-3-2-8-6-14-11-4-3-7-6-9-7-2-2-5-3-9-5-3-1-8-2-12-2-7 0-12 1-16 3-4 3-9 6-15 11-5 5-10 8-13 11-4 3-10 5-17 8-8 3-16 4-25 4-8 0-17-1-24-4-8-3-13-5-17-8-3-2-8-6-13-11-6-5-11-8-15-11-4-2-9-3-16-3l0 55c0 15 5 28 16 39 11 11 24 16 39 16l18 0 0 128 73 0 0-128 73 0 0 128 74 0 0-128 73 0 0 128 73 0 0-128 18 0c15 0 28-5 39-16 11-11 16-24 16-39z m-366 247c0-15-3-26-10-34-7-8-16-12-26-12-10 0-19 4-26 11-7 7-11 16-11 26 0 5 1 10 3 14 2 5 4 8 7 10 2 2 5 5 8 8 4 3 7 6 9 9 3 3 5 7 7 13 2 5 3 12 3 19 7 0 15-7 23-21 9-14 13-29 13-43z m147 0c0-15-4-26-11-34-7-8-15-12-26-12-10 0-19 4-26 11-7 7-11 16-11 26 0 5 1 10 3 14 2 5 4 8 7 10 3 2 5 5 9 8 3 3 6 6 9 9 2 3 4 7 6 13 2 5 3 12 3 19 7 0 15-7 24-21 8-14 13-29 13-43z m146 0c0-15-4-26-10-34-7-8-16-12-27-12-10 0-18 4-26 11-7 7-10 16-10 26 0 5 1 10 2 14 2 5 4 8 7 10 3 2 6 5 9 8 3 3 6 6 9 9 3 3 5 7 7 13 1 5 2 12 2 19 8 0 15-7 24-21 9-14 13-29 13-43z"/>
<glyph glyph-name="down-open-mini" unicode="&#79;" d="M344 317c8 9 16 9 25 0 9-7 9-15 0-24 0 0-101-98-101-98-7-8-15-8-24 0 0 0-101 98-101 98-9 9-9 17 0 24 9 9 17 9 26 0 0 0 87-79 87-79 0 0 88 79 88 79"/>
<glyph glyph-name="downward-arrow" unicode="&#80;" d="M60 416l196-198 196 198 60-61-256-259-256 259z"/>
<glyph glyph-name="your-latest-versionasset-4" unicode="&#81;" d="M512 512l-434 0 0-78-78 0 0-434 434 0 0 78 78 0z m-126-464l-338 0 0 338 30 0 0-308 308 0z m-260 78l0 338 296 0-143-218-63 56-33-36 105-94 176 268 0-314z"/>
<glyph glyph-name="versions-available" unicode="&#82;" d="M412 509l-312 0c-42 0-77-35-77-77l0-312c0-42 35-77 77-77l180 0 0-40 110 64-110 64 0-41-180 0c-16 0-30 14-30 30l0 312c0 17 14 30 30 30l312 0c16 0 30-13 30-30l0-365 47 0 0 365c0 42-35 77-77 77z m-282-112l255 0 0-47-255 0z m0-89l255 0 0-47-255 0z m0-94l255 0 0-47-255 0z"/>
<glyph glyph-name="version-available" unicode="&#83;" d="M512 512l-434 0 0-78-78 0 0-434 434 0 0 78 78 0z m-126-464l-338 0 0 338 30 0 0-308 308 0z m78 78l-338 0 0 338 151 0 0-200-68 53-30-38 124-96 121 97-31 37-68-54 0 201 139 0z"/>
<glyph glyph-name="latest-version" unicode="&#84;" d="M412 509l-312 0c-42 0-77-35-77-77l0-312c0-42 35-77 77-77l180 0 0-40 110 64-110 64 0-41-180 0c-16 0-30 14-30 30l0 312c0 17 14 30 30 30l305 0-189-221-66 57-30-35 100-89 222 260c0 0 0-2 0-2l0-365 46 0 0 365c0 42-34 77-77 77z"/>
<glyph glyph-name="arrow-left" unicode="&#85;" d="M512 288l-389 0 178 179-45 45-256-256 256-256 45 45-178 179 389 0z"/>
<glyph glyph-name="arrow-right" unicode="&#86;" d="M0 224l389 0-178-179 45-45 256 256-256 256-45-45 178-179-389 0z"/>
</font></defs></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
modules/ui/src/icons/fonts/tea-icons.ttf
View file

Binary file not shown.

BIN
modules/ui/src/icons/fonts/tea-icons.woff
View file

Binary file not shown.

18
modules/ui/src/icons/icons.css
View file

@ -163,3 +163,21 @@
.icon-downward-arrow:before {
content: "\50";
}
.icon-your-latest-versionasset-4:before {
content: "\51";
}
.icon-versions-available:before {
content: "\52";
}
.icon-version-available:before {
content: "\53";
}
.icon-latest-version:before {
content: "\54";
}
.icon-arrow-left:before {
content: "\55";
}
.icon-arrow-right:before {
content: "\56";
}