ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-08 00:00:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

styling polish (#526)

Browse source
This commit is contained in:
ABevier 2023-04-29 20:41:29 -04:00 committed by GitHub
parent a212697513
commit c19d2e686d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 90 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
modules/desktop/src/components/package-banner/package-banner.svelte
View file

@ -84,7 +84,7 @@
{/if} {/if}
<p class="mt-4 text-sm">{pkg.desc}</p> <p class="mt-4 text-sm">{pkg.desc}</p>
<menu class="mt-4 flex h-10 gap-4 text-xs"> <menu class="mt-4 flex h-10 gap-4 text-xs">
<div class="min-w-[180px]"> <div class="w-fit min-w-[160px]">
<PackageVersionSelector <PackageVersionSelector
buttonSize="large" buttonSize="large"
{pkg} {pkg}
@ -93,47 +93,51 @@
/> />
</div> </div>
{#if (pkg?.installed_versions?.length || 0) > 0} {#if (pkg?.installed_versions?.length || 0) > 0}
<ToolTip class="ml-[-80px]"> <div class="min-w-[120px]">
<Button <ToolTip>
slot="target" <Button
class="h-10" slot="target"
type="plain" class="h-10"
color="blue" type="plain"
onClick={async () => { color="blue"
packagesStore.uninstallPkg(pkg); onClick={async () => {
}} packagesStore.uninstallPkg(pkg);
loading={pruning} }}
> loading={pruning}
<div class="version-item flex w-full items-center justify-center gap-x-1 text-xs"> >
<div class="icon-trash" /> <div class="version-item flex w-full items-center justify-center gap-x-1 text-xs">
<div>{$t("package.cta-UNINSTALL")}</div> <div class="icon-trash" />
<div>{$t("package.cta-UNINSTALL")}</div>
</div>
</Button>
<div slot="tooltip-content" class="flex flex-col items-center">
<div>Removes all the versions of the package</div>
</div> </div>
</Button> </ToolTip>
<div slot="tooltip-content" class="flex flex-col items-center"> </div>
<div>Removes all the versions of the package</div>
</div>
</ToolTip>
{/if} {/if}
{#if (pkg?.installed_versions?.length || 0) > 1} {#if (pkg?.installed_versions?.length || 0) > 1}
<ToolTip> <div class="min-w-[120px]">
<Button <ToolTip>
slot="target" <Button
class="h-10" slot="target"
type="plain" class="h-10"
color="blue" type="plain"
onClick={prune} color="blue"
loading={pruning} onClick={prune}
> loading={pruning}
<div class="version-item flex w-full items-center justify-center gap-x-1 text-xs"> >
<div class="icon-scissors" /> <div class="version-item flex w-full items-center justify-center gap-x-1 text-xs">
<div>{$t("package.cta-PRUNE")}</div> <div class="icon-scissors" />
<div>{$t("package.cta-PRUNE")}</div>
</div>
</Button>
<div slot="tooltip-content" class="flex flex-col items-center">
<div>Removes {pkg.installed_versions?.length ?? 0 - 1} old versions</div>
<div>Keeps latest (v{findRecentInstalledVersion(pkg)})</div>
</div> </div>
</Button> </ToolTip>
<div slot="tooltip-content" class="flex flex-col items-center"> </div>
<div>Removes {pkg.installed_versions?.length ?? 0 - 1} old versions</div>
<div>Keeps latest (v{findRecentInstalledVersion(pkg)})</div>
</div>
</ToolTip>
{/if} {/if}
{#if pkg.github} {#if pkg.github}
<button <button
@ -149,20 +153,22 @@
</button> </button>
{/if} {/if}
{#if pkg.installed_versions?.length} {#if pkg.installed_versions?.length}
<Button <div class="min-w-[160px]">
class="h-10" <Button
type="plain" class="h-10"
color="black" type="plain"
onClick={() => { color="black"
openPackageEntrypointInTerminal(pkg.full_name); onClick={() => {
}} openPackageEntrypointInTerminal(pkg.full_name);
> }}
{#if pkg.full_name == "github.com/AUTOMATIC1111/stable-diffusion-webui"} >
OPEN {#if pkg.full_name == "github.com/AUTOMATIC1111/stable-diffusion-webui"}
{:else} OPEN
OPEN IN TERMINAL {:else}
{/if} OPEN IN TERMINAL
</Button> {/if}
</Button>
</div>
{/if} {/if}
</menu> </menu>
</article> </article>

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

@ -48,33 +48,37 @@
<h3 class="text-bold font-mona line-clamp-1 mb-4 text-3xl font-bold text-white"> <h3 class="text-bold font-mona line-clamp-1 mb-4 text-3xl font-bold text-white">
{fixPackageName(pkg.name)} {fixPackageName(pkg.name)}
</h3> </h3>
<p class="line-clamp-10 h-[160px] text-xs font-thin lowercase">{pkg.desc ?? ""}</p> <p class="line-clamp-[8] h-[160px] text-[14px] font-thin lowercase leading-[20px]">
{pkg.desc ?? ""}
</p>
{/if} {/if}
</article> </article>
<div class="relative mt-3.5 w-full"> <div class="mt-3.5 w-full">
<div class="install-button {layout}" on:mousedown={preventPropagation}> <div class="flex w-fit flex-col items-center">
{#if pkg.state === PackageStates.INSTALLED} <div class="install-button {layout}" on:mousedown={preventPropagation}>
<PackageInstalledBadge version={pkg.version} /> {#if pkg.state === PackageStates.INSTALLED}
{:else} <PackageInstalledBadge version={pkg.version} />
<PackageInstallButton {:else}
{pkg} <PackageInstallButton
onClick={(evt) => { {pkg}
// prevent default to prevent the link that this button is inside of from being followed onClick={(evt) => {
evt?.preventDefault(); // prevent default to prevent the link that this button is inside of from being followed
onClickCTA(); evt?.preventDefault();
}} onClickCTA();
/> }}
{/if} />
{/if}
</div>
<div class="mt-1.5 h-[10px] leading-[10px]">
{#if pkg.state === "NEEDS_UPDATE"}
<span class="text-[10px]">
<span class="opacity-70">you have</span>
v{findRecentInstalledVersion(pkg)}
</span>
{/if}
</div>
</div> </div>
</div> </div>
<div class="relative mt-1.5 h-[10px] leading-[10px]">
{#if pkg.state === "NEEDS_UPDATE"}
<span class="text-[10px]">
<span class="opacity-70">you have</span>
v{findRecentInstalledVersion(pkg)}
</span>
{/if}
</div>
</div> </div>
</div> </div>
</a> </a>
@ -195,22 +199,7 @@
} }
.install-button { .install-button {
width: 160px; min-width: 160px;
} width: fit-content;
.install-button.bottom {
min-width: 100%;
}
@media screen and (min-width: 650px) {
.install-button.bottom {
min-width: 60%;
}
}
@media screen and (min-width: 1000px) {
.install-button.bottom {
min-width: 50%;
}
} }
</style> </style>

2
modules/desktop/src/components/side-menu/menu-button.svelte
View file

@ -11,7 +11,7 @@
class="outline-gray hover:bg-gray box-border flex w-full items-center gap-2 rounded-sm px-1 text-left align-middle text-xs outline-1 transition-all hover:bg-opacity-25 hover:outline" class="outline-gray hover:bg-gray box-border flex w-full items-center gap-2 rounded-sm px-1 text-left align-middle text-xs outline-1 transition-all hover:bg-opacity-25 hover:outline"
class:active class:active
> >
<i class="icon-{icon} mt-1" /> <i class="icon-{icon} mt-1 mr-1" />
<div class="text-sm font-thin"> <div class="text-sm font-thin">
{label} {label}
</div> </div>

2
modules/desktop/src/components/side-menu/side-menu.svelte
View file

@ -13,7 +13,7 @@
</script> </script>
<aside class="border-gray border border-t-0 border-b-0 border-l-0 p-2"> <aside class="border-gray border border-t-0 border-b-0 border-l-0 p-2">
<ul class="flex flex-col gap-1 pt-4 pl-1"> <ul class="flex flex-col gap-1 px-1 pt-4">
<MenuButton <MenuButton
label={$t("tags.discover").toLowerCase()} label={$t("tags.discover").toLowerCase()}
icon="map" icon="map"

4
modules/ui/src/tool-tip/tool-tip.svelte
View file

@ -1,13 +1,11 @@
<script lang="ts"> <script lang="ts">
let clazz = "";
export { clazz as class };
// TODO: this tool tip assumes it is below the target element, when multiple directions are needed, this will need to be updated // TODO: this tool tip assumes it is below the target element, when multiple directions are needed, this will need to be updated
</script> </script>
<div class="group relative"> <div class="group relative">
<slot name="target" /> <slot name="target" />
<div <div
class="tooltip invisible absolute top-full mt-4 w-full min-w-max border border-gray bg-black transition-all group-hover:visible {clazz}" class="tooltip invisible absolute top-full left-1/2 mt-4 w-full min-w-max translate-x-[-50%] border border-gray bg-black transition-all group-hover:visible"
> >
<div class="px-6 py-2"> <div class="px-6 py-2">
<slot name="tooltip-content" /> <slot name="tooltip-content" />