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

install dropdown styling (#386)

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

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

@ -21,7 +21,13 @@
isOpened = !isOpened;
};
const isInstalled = (version: string) => pkg.installed_versions?.includes(version);
const handleClick = (version: string) => {
if (isInstalled(version)) {
return;
}
isOpened = false;
onClick(version);
};
@ -35,8 +41,20 @@
{#each availableVersions as version, idx}
{#if idx !== 0}<hr class="divider" />{/if}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="version-item text-xs" on:click={() => handleClick(version)}>
v{version + (idx === 0 ? " (latest)" : "")}
<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>
@ -58,7 +76,6 @@
}
.version-item {
cursor: pointer;
margin: 4px 6px;
padding: 4px 6px;
height: auto;
@ -66,7 +83,11 @@
white-space: nowrap;
}
.version-item:hover {
.installable-version {
cursor: pointer;
}
.installable-version:hover {
border: 1px solid #949494;
background-color: rgba(148, 148, 148, 0.35);
}
@ -83,6 +104,14 @@
margin-right: 8px;
}
.installed-text {
color: #00ffd0;
}
.latest-version {
color: #af5fff;
}
.visible {
display: block;
}