mirror of
https://github.com/ivabus/gui
synced 2025-04-23 14:07:14 +03:00
styling polish (#526)
This commit is contained in:
ABevier
GitHub
parent
a212697513
commit
c19d2e686d
5 changed files with 90 additions and 97 deletions
|
|
@ -84,7 +84,7 @@
|
|||
{/if}
|
||||
<p class="mt-4 text-sm">{pkg.desc}</p>
|
||||
<menu class="mt-4 flex h-10 gap-4 text-xs">
|
||||
<div class="min-w-[180px]">
|
||||
<div class="w-fit min-w-[160px]">
|
||||
<PackageVersionSelector
|
||||
buttonSize="large"
|
||||
{pkg}
|
||||
|
|
@ -93,47 +93,51 @@
|
|||
/>
|
||||
</div>
|
||||
{#if (pkg?.installed_versions?.length || 0) > 0}
|
||||
<ToolTip class="ml-[-80px]">
|
||||
<Button
|
||||
slot="target"
|
||||
class="h-10"
|
||||
type="plain"
|
||||
color="blue"
|
||||
onClick={async () => {
|
||||
packagesStore.uninstallPkg(pkg);
|
||||
}}
|
||||
loading={pruning}
|
||||
>
|
||||
<div class="version-item flex w-full items-center justify-center gap-x-1 text-xs">
|
||||
<div class="icon-trash" />
|
||||
<div>{$t("package.cta-UNINSTALL")}</div>
|
||||
<div class="min-w-[120px]">
|
||||
<ToolTip>
|
||||
<Button
|
||||
slot="target"
|
||||
class="h-10"
|
||||
type="plain"
|
||||
color="blue"
|
||||
onClick={async () => {
|
||||
packagesStore.uninstallPkg(pkg);
|
||||
}}
|
||||
loading={pruning}
|
||||
>
|
||||
<div class="version-item flex w-full items-center justify-center gap-x-1 text-xs">
|
||||
<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>
|
||||
</Button>
|
||||
<div slot="tooltip-content" class="flex flex-col items-center">
|
||||
<div>Removes all the versions of the package</div>
|
||||
</div>
|
||||
</ToolTip>
|
||||
</ToolTip>
|
||||
</div>
|
||||
{/if}
|
||||
{#if (pkg?.installed_versions?.length || 0) > 1}
|
||||
<ToolTip>
|
||||
<Button
|
||||
slot="target"
|
||||
class="h-10"
|
||||
type="plain"
|
||||
color="blue"
|
||||
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>{$t("package.cta-PRUNE")}</div>
|
||||
<div class="min-w-[120px]">
|
||||
<ToolTip>
|
||||
<Button
|
||||
slot="target"
|
||||
class="h-10"
|
||||
type="plain"
|
||||
color="blue"
|
||||
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>{$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>
|
||||
</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>
|
||||
</ToolTip>
|
||||
</ToolTip>
|
||||
</div>
|
||||
{/if}
|
||||
{#if pkg.github}
|
||||
<button
|
||||
|
|
@ -149,20 +153,22 @@
|
|||
</button>
|
||||
{/if}
|
||||
{#if pkg.installed_versions?.length}
|
||||
<Button
|
||||
class="h-10"
|
||||
type="plain"
|
||||
color="black"
|
||||
onClick={() => {
|
||||
openPackageEntrypointInTerminal(pkg.full_name);
|
||||
}}
|
||||
>
|
||||
{#if pkg.full_name == "github.com/AUTOMATIC1111/stable-diffusion-webui"}
|
||||
OPEN
|
||||
{:else}
|
||||
OPEN IN TERMINAL
|
||||
{/if}
|
||||
</Button>
|
||||
<div class="min-w-[160px]">
|
||||
<Button
|
||||
class="h-10"
|
||||
type="plain"
|
||||
color="black"
|
||||
onClick={() => {
|
||||
openPackageEntrypointInTerminal(pkg.full_name);
|
||||
}}
|
||||
>
|
||||
{#if pkg.full_name == "github.com/AUTOMATIC1111/stable-diffusion-webui"}
|
||||
OPEN
|
||||
{:else}
|
||||
OPEN IN TERMINAL
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</menu>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -48,33 +48,37 @@
|
|||
<h3 class="text-bold font-mona line-clamp-1 mb-4 text-3xl font-bold text-white">
|
||||
{fixPackageName(pkg.name)}
|
||||
</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}
|
||||
</article>
|
||||
<div class="relative mt-3.5 w-full">
|
||||
<div class="install-button {layout}" on:mousedown={preventPropagation}>
|
||||
{#if pkg.state === PackageStates.INSTALLED}
|
||||
<PackageInstalledBadge version={pkg.version} />
|
||||
{:else}
|
||||
<PackageInstallButton
|
||||
{pkg}
|
||||
onClick={(evt) => {
|
||||
// prevent default to prevent the link that this button is inside of from being followed
|
||||
evt?.preventDefault();
|
||||
onClickCTA();
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
<div class="mt-3.5 w-full">
|
||||
<div class="flex w-fit flex-col items-center">
|
||||
<div class="install-button {layout}" on:mousedown={preventPropagation}>
|
||||
{#if pkg.state === PackageStates.INSTALLED}
|
||||
<PackageInstalledBadge version={pkg.version} />
|
||||
{:else}
|
||||
<PackageInstallButton
|
||||
{pkg}
|
||||
onClick={(evt) => {
|
||||
// prevent default to prevent the link that this button is inside of from being followed
|
||||
evt?.preventDefault();
|
||||
onClickCTA();
|
||||
}}
|
||||
/>
|
||||
{/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 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>
|
||||
</a>
|
||||
|
|
@ -195,22 +199,7 @@
|
|||
}
|
||||
|
||||
.install-button {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
min-width: 160px;
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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:active
|
||||
>
|
||||
<i class="icon-{icon} mt-1" />
|
||||
<i class="icon-{icon} mt-1 mr-1" />
|
||||
<div class="text-sm font-thin">
|
||||
{label}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</script>
|
||||
|
||||
<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
|
||||
label={$t("tags.discover").toLowerCase()}
|
||||
icon="map"
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
<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
|
||||
</script>
|
||||
|
||||
<div class="group relative">
|
||||
<slot name="target" />
|
||||
<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">
|
||||
<slot name="tooltip-content" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue