mirror of
https://github.com/ivabus/gui
synced 2025-04-23 14:07:14 +03:00
Active Styles + small bug fixes (#447)
This commit is contained in:
ABevier
GitHub
parent
effea61429
commit
3b380f17fd
5 changed files with 96 additions and 43 deletions
|
|
@ -52,7 +52,8 @@
|
|||
<div class="version-list" class:visible={isOpened}>
|
||||
{#if (pkg?.installed_versions || []).length > 0}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="version-item flex items-center justify-start gap-x-1 text-xs"
|
||||
<div
|
||||
class="version-item flex items-center justify-start gap-x-1 text-xs"
|
||||
on:click={(evt) => handleClick(evt, "")}
|
||||
>
|
||||
<div>uninstall</div>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
return "primary";
|
||||
};
|
||||
|
||||
const isActive = (state: PackageStates): boolean => {
|
||||
return state === PackageStates.INSTALLING || state === PackageStates.UPDATING;
|
||||
};
|
||||
|
||||
const badgeClass: Record<PackageStates, string> = {
|
||||
[PackageStates.AVAILABLE]: "install-badge",
|
||||
[PackageStates.INSTALLING]: "install-badge",
|
||||
|
|
@ -36,6 +40,7 @@
|
|||
class="w-full border p-0 text-xs text-white {buttonSize === 'small' ? 'h-8' : 'h-10'}"
|
||||
type="plain"
|
||||
color={getColor(pkg.state)}
|
||||
active={isActive(pkg.state)}
|
||||
{onClick}
|
||||
>
|
||||
<div class="version-button h-full">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import "@tea/ui/icons/icons.css";
|
||||
import { t } from '$libs/translations';
|
||||
import { t } from "$libs/translations";
|
||||
import Button from "@tea/ui/button/button.svelte";
|
||||
import semverCompare from "semver/functions/compare";
|
||||
|
||||
import { installPackage } from "@native";
|
||||
import { PackageStates, type GUIPackage } from "$libs/types";
|
||||
import { packagesStore } from "$libs/stores";
|
||||
import { shellOpenExternal } from "@native";
|
||||
|
|
@ -13,14 +12,13 @@
|
|||
import { findAvailableVersions } from "$libs/packages/pkg-utils";
|
||||
import { trimGithubSlug } from "$libs/github";
|
||||
|
||||
|
||||
export let pkg: GUIPackage;
|
||||
let installing = false;
|
||||
let pruning = false
|
||||
let pruning = false;
|
||||
|
||||
const install = async () => {
|
||||
const install = async (version: string) => {
|
||||
installing = true;
|
||||
await installPackage(pkg);
|
||||
await packagesStore.installPkg(pkg, version);
|
||||
installing = false;
|
||||
packagesStore.updatePackage(pkg.full_name, {
|
||||
state: PackageStates.INSTALLED
|
||||
|
|
@ -31,12 +29,13 @@
|
|||
pruning = true;
|
||||
const versions = (pkg?.installed_versions || []).sort((a, b) => semverCompare(b, a));
|
||||
for (const [i, v] of versions.entries()) {
|
||||
if (i) { // skip the latest version = 0
|
||||
if (i) {
|
||||
// skip the latest version = 0
|
||||
await packagesStore.deletePkg(pkg, v);
|
||||
}
|
||||
}
|
||||
pruning = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="mt-4 bg-black">
|
||||
|
|
@ -48,7 +47,10 @@
|
|||
<h3 class="text-primary text-3xl">{pkg.full_name}</h3>
|
||||
{#if pkg.homepage}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<span class="cursor-pointer hover:text-primary" on:click={() => shellOpenExternal(pkg.homepage)} >{pkg.homepage}</span>
|
||||
<span
|
||||
class="hover:text-primary cursor-pointer"
|
||||
on:click={() => shellOpenExternal(pkg.homepage)}>{pkg.homepage}</span
|
||||
>
|
||||
{/if}
|
||||
<p class="mt-4 text-sm">{pkg.desc}</p>
|
||||
<menu class="mt-4 grid h-10 grid-cols-3 gap-4 text-xs">
|
||||
|
|
@ -62,14 +64,8 @@
|
|||
}}
|
||||
/>
|
||||
{#if (pkg?.installed_versions?.length || 0) > 1}
|
||||
<Button
|
||||
class="h-10"
|
||||
type="plain"
|
||||
color="blue"
|
||||
onClick={prune}
|
||||
loading={pruning}
|
||||
>
|
||||
<div class="w-full version-item flex items-center justify-center gap-x-1 text-xs" >
|
||||
<Button 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>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
export let link: string;
|
||||
export let progessLoading = 0;
|
||||
|
||||
const imgUrl = !pkg.thumb_image_url.includes("https://tea.xyz")
|
||||
$: imgUrl = !pkg.thumb_image_url.includes("https://tea.xyz")
|
||||
? "https://tea.xyz/Images/package-thumb-nolabel4.jpg"
|
||||
: pkg.thumb_image_url;
|
||||
|
||||
|
|
@ -20,17 +20,25 @@
|
|||
|
||||
export let onUninstall = async () => {
|
||||
console.log("do nothing");
|
||||
}
|
||||
};
|
||||
|
||||
// Using this instead of css :active because there is a button inside of a button
|
||||
let isActive = false;
|
||||
const activate = () => (isActive = true);
|
||||
const deactivate = () => (isActive = false);
|
||||
|
||||
const preventPropagation = (evt: MouseEvent) => evt.stopPropagation();
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="package-card border-gray relative h-auto border"
|
||||
class="package-card border-gray relative h-auto border bg-center"
|
||||
class:active={isActive}
|
||||
style="background-image: url({imgUrl})"
|
||||
>
|
||||
<aside class="blur-sm">
|
||||
<figure style="background-image: url({imgUrl})"></figure>
|
||||
<figure class="bg-center" style="background-image: url({imgUrl})" />
|
||||
</aside>
|
||||
<a href={link}>
|
||||
<a href={link} on:mousedown={activate} on:mouseup={deactivate} on:mouseleave={deactivate}>
|
||||
<div class="package-card-content absolute flex h-full w-full flex-col justify-between">
|
||||
<div class="hint-container">
|
||||
<div class="hint">
|
||||
|
|
@ -43,14 +51,12 @@
|
|||
<h3 class="text-bold font-mona line-clamp-1 text-2xl font-bold text-white">{pkg.name}</h3>
|
||||
<p class="line-clamp-2 h-[32px] text-xs font-thin">{pkg.desc ?? ""}</p>
|
||||
</article>
|
||||
<div class="mt-3.5 flex w-full relative">
|
||||
<div class="install-button">
|
||||
<InstallButton {pkg} {availableVersions} onClick={onClickCTA}
|
||||
uninstall={onUninstall}
|
||||
/>
|
||||
<div class="relative mt-3.5 flex w-full">
|
||||
<div class="install-button" on:mousedown={preventPropagation}>
|
||||
<InstallButton {pkg} {availableVersions} onClick={onClickCTA} uninstall={onUninstall} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1 h-[10px] leading-[10px] relative">
|
||||
<div class="relative mt-1 h-[10px] leading-[10px]">
|
||||
{#if pkg.state === "NEEDS_UPDATE"}
|
||||
<span class="text-[0.5rem]">Updating from v{findRecentInstalledVersion(pkg)}</span>
|
||||
{/if}
|
||||
|
|
@ -60,7 +66,7 @@
|
|||
</a>
|
||||
|
||||
{#if progessLoading > 0 && progessLoading < 100}
|
||||
<div class="absolute z-40 left-0 top-0 h-full w-full bg-black bg-opacity-50">
|
||||
<div class="absolute left-0 top-0 z-40 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>
|
||||
|
|
@ -77,6 +83,23 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
section.active::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(26, 26, 26, 0.7);
|
||||
z-index: 2;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
section.package-card:active {
|
||||
border-color: #8000ff;
|
||||
box-shadow: 0px 0px 0px 2px rgba(128, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
aside {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
|
|
@ -85,6 +108,7 @@
|
|||
height: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
figure {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
|
|
@ -135,12 +159,6 @@
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
.package-card:active {
|
||||
border-color: #8000ff;
|
||||
box-shadow: 0px 0px 0px 2px rgba(128, 0, 255, 0.5);
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.package-card:hover .hint {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,6 +71,14 @@
|
|||
background: #01997d;
|
||||
}
|
||||
|
||||
button.plain.primary:active {
|
||||
background: #01997d;
|
||||
}
|
||||
|
||||
button.plain.primary:active::before {
|
||||
background: #01997d;
|
||||
}
|
||||
|
||||
button.primary::before {
|
||||
background: #0ecaa7;
|
||||
}
|
||||
|
|
@ -86,6 +94,14 @@
|
|||
background: #410182;
|
||||
}
|
||||
|
||||
button.plain.secondary:active {
|
||||
background: #410182;
|
||||
}
|
||||
|
||||
button.plain.secondary:active::before {
|
||||
background: #410182;
|
||||
}
|
||||
|
||||
button.secondary::before {
|
||||
background: #6000bf;
|
||||
}
|
||||
|
|
@ -111,19 +127,36 @@
|
|||
background: white;
|
||||
}
|
||||
|
||||
button.plain.black:active {
|
||||
background: #e1e1e1;
|
||||
}
|
||||
|
||||
button.plain.black:active::before {
|
||||
background: #e1e1e1;
|
||||
}
|
||||
|
||||
/* black button inverts colors on hover */
|
||||
button.black:hover {
|
||||
color: #1a1a1a;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* green */
|
||||
/* blue */
|
||||
button.plain.blue {
|
||||
background: #013b99;
|
||||
background: #2675f5;
|
||||
border: 1px solid #2675f5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.blue::before {
|
||||
background: #2675f5;
|
||||
background: #013b99;
|
||||
}
|
||||
|
||||
button.plain.blue:active {
|
||||
background: #012765;
|
||||
}
|
||||
|
||||
button.plain.blue:active::before {
|
||||
background: #012765;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue