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

new installed button style (#430)

Browse source
This commit is contained in:
ABevier 2023-04-10 20:54:27 -04:00 committed by GitHub
parent 8774467336
commit 663e0a37b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -36,26 +36,28 @@
<div class="dropdown z-10" use:clickOutside on:click_outside={handleClickOutside}>
<PackageStateButton {buttonSize} {pkg} onClick={toggleOpen}>
<div class="version-list" class:visible={isOpened}>
{#each availableVersions as version, idx}
{#if idx !== 0}<hr class="divider" />{/if}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="version-item flex items-center justify-start gap-x-1 text-xs"
class:installable-version={!isInstalled(version)}
on:click={() => handleClick(version)}
>
<div class:installed-text={isInstalled(version)}>v{version}</div>
{#if idx === 0}
<div class="latest-version">(latest)</div>
{/if}
{#if isInstalled(version)}
<div class="flex grow justify-end">
<i class="installed-text icon-check-circle flex" />
</div>
{/if}
</div>
{/each}
<div class="pt-1">
<div class="version-list" class:visible={isOpened}>
{#each availableVersions as version, idx}
{#if idx !== 0}<hr class="divider" />{/if}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="version-item flex items-center justify-start gap-x-1 text-xs"
class:installable-version={!isInstalled(version)}
on:click={() => handleClick(version)}
>
<div class:installed-text={isInstalled(version)}>v{version}</div>
{#if idx === 0}
<div class="latest-version">(latest)</div>
{/if}
{#if isInstalled(version)}
<div class="flex grow justify-end">
<i class="installed-text icon-check-circle flex" />
</div>
{/if}
</div>
{/each}
</div>
</div>
</PackageStateButton>
</div>
@ -64,7 +66,6 @@
.version-list {
display: none;
position: absolute;
margin-top: 6px;
width: 100%;
color: white;
background-color: #1a1a1a;

42
modules/desktop/src/components/install-button/package-state-button.svelte
View file

@ -20,34 +20,38 @@
return "primary";
};
const badgeClass: Record<PackageStates, string> = {
[PackageStates.AVAILABLE]: "install-badge",
[PackageStates.INSTALLING]: "install-badge",
[PackageStates.NEEDS_UPDATE]: "update-badge",
[PackageStates.UPDATING]: "update-badge",
[PackageStates.INSTALLED]: "installed-badge",
[PackageStates.UNINSTALLED]: ""
};
$: ctaLabel = $t(`package.cta-${pkg.state}`);
</script>
<Button
class="w-full border p-0 text-xs text-white {buttonSize === "small" ? "h-8" : "h-10"}"
class="w-full border p-0 text-xs text-white {buttonSize === 'small' ? 'h-8' : 'h-10'}"
type="plain"
color={getColor(pkg.state)}
{onClick}
>
<div class="version-button">
<div class="flex h-full flex-col justify-center p-2">
{#if pkg.state === PackageStates.INSTALLED}
<div class="flex items-center justify-center">
<i class="icon-check-circle mr-2 flex" />
<div>{ctaLabel}</div>
</div>
{:else if pkg.state === PackageStates.AVAILABLE}
{#if pkg.state === PackageStates.AVAILABLE}
<div class="flex items-center justify-between gap-x-2">
<div class="flex items-center gap-x-2">
<div>{ctaLabel}</div>
<div class="version-label install">{pkg.version}</div>
<div class="version-label install-badge">{pkg.version}</div>
</div>
<i class="icon-downward-arrow flex" />
</div>
{:else if pkg.state === PackageStates.NEEDS_UPDATE}
{:else if pkg.state === PackageStates.NEEDS_UPDATE || pkg.state === PackageStates.INSTALLED}
<div class="flex items-center justify-center gap-x-2">
<div>{ctaLabel}</div>
<div class="version-label update">{pkg.version}</div>
<div class="version-label {badgeClass[pkg.state]}">{pkg.version}</div>
</div>
{:else}
<div class="flex items-center justify-center">
@ -69,21 +73,31 @@
border-radius: 2px;
}
.install {
.install-badge {
background-color: #dcb8ff;
color: #8000ff;
}
.update {
.update-badge {
background-color: #04957a;
color: #00ffd0;
}
.version-button:hover .install {
.installed-badge {
background-color: white;
color: #1a1a1a;
}
.version-button:hover .install-badge {
background-color: white;
}
.version-button:hover .update {
.version-button:hover .update-badge {
background-color: #1a1a1a;
}
.version-button:hover .installed-badge {
background-color: #1a1a1a;
color: white;
}
</style>

4
modules/ui/src/button/button.svelte
View file

@ -108,13 +108,13 @@
}
button.black::before {
background: #e1e1e1;
background: white;
}
/* black button inverts colors on hover */
button.black:hover {
color: #1a1a1a;
background: #e1e1e1;
background: white;
}
/* green */