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

UI adjustments 3 (#390)

Browse source 
* #384 fix preloading tiles for packages

* #384 home button should show all packages

* #384 popup menu style adjustments

* #384 cursors

* #389 header z-index to not overlap with versions popup

* fix z-index of pop-up menu

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil 2023-04-04 12:15:59 +08:00 committed by GitHub
parent 39c1c88894
commit 106f7ac3ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 65 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
modules/desktop/src/app.css
View file

@ -39,8 +39,3 @@ h6,
.pk-version {
font-family: "inter";
}
a,
button {
cursor: auto;
}

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

@ -35,7 +35,7 @@
const handleClickOutside = () => (isOpened = false);
</script>
<div class="dropdown" use:clickOutside on:click_outside={handleClickOutside}>
<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}
@ -66,7 +66,6 @@
position: absolute;
margin-top: 6px;
width: 100%;
z-index: 1;
background-color: #1a1a1a;
border: 0.5px solid #949494;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);

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

@ -65,7 +65,6 @@
transition: all 0.3s;
width: 100%;
height: 230px;
cursor: auto;
}
section:hover {
background-color: #252525;

8
modules/desktop/src/components/packages/packages.svelte
View file

@ -86,7 +86,7 @@
{#if packages.length > 0}
{#each packages as pkg, index}
{#if index < limit}
<div class="w-1/3 p-1" class:animate-puls={pkg.state === PackageStates.INSTALLING}>
<div class="w-1/3 p-1 z-1" class:animate-puls={pkg.state === PackageStates.INSTALLING}>
<Package
tab={packageFilter}
{pkg}
@ -97,8 +97,10 @@
{/each}
{:else}
{#each Array(9) as _}
<section class="h-50 border-gray border p-4">
<Preloader />
<section class="w-1/3 p-1 h-{238}">
<div class="border-gray border w-full h-full">
<Preloader />
</div>
</section>
{/each}
{/if}

2
modules/desktop/src/components/page-header/page-header.svelte
View file

@ -8,7 +8,7 @@
{#if coverUrl}
<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
{/if}
<div class="text-primary absolute bottom-0 z-10 text-6xl leading-[32px]">
<div class="text-primary absolute bottom-0 text-6xl leading-[32px]">
<slot />
</div>
</figure>

20
modules/desktop/src/components/side-bar/side-bar.svelte
View file

@ -7,7 +7,10 @@
const { user, deviceIdStore } = authStore;
let authenticating = false;
const openGithub = () => {
authenticating = true;
shellOpenExternal(`${baseUrl}/auth/user?device_id=${$deviceIdStore}`)
try {
authStore.pollSession();
@ -32,13 +35,14 @@
</script>
<nav class="w-full p-2 text-sm" use:mouseLeaveDelay on:leave_delay={() => hidePopup()}>
{#if $user}
<section class="flex rounded-full mb-2 pl-1">
<img width="40" height="40" src={$user?.avatar_url || '/images/bored-ape.png'} alt="profile" />
<div class="text-gray p-2">@{$user?.login}</div>
<section class="flex items-center justify-between p-1 hover:bg-gray hover:border hover:border-white rounded-sm hover:bg-opacity-90 hover:text-black">
<div class="text-white">@{$user?.login}</div>
<img id="avatar" class="rounded-sm" src={$user?.avatar_url || '/images/bored-ape.png'} alt="profile" />
</section>
{:else}
<button
class={`mt-2 transition-all rounded-sm w-full h-8 pl-1 text-left hover:bg-gray hover:border focus:bg-secondary ${submittedMessage === "syncing..." && "animate-pulse"}`}
class="mt-2 p-1 transition-all rounded-sm w-full h-8 text-left hover:bg-gray hover:border focus:bg-secondary bg-opacity-40"
class:animate-pulse={authenticating}
on:click={openGithub}>
login
</button>
@ -47,7 +51,8 @@
<SelectLang/>
<hr class="mt-2 border border-gray border-b-0 border-t-0"/>
<button
class={`mt-2 transition-all rounded-sm w-full h-8 pl-1 text-left hover:bg-gray hover:border focus:bg-secondary ${submittedMessage === "syncing..." && "animate-pulse"}`}
class="mt-2 p-1 transition-all rounded-sm w-full h-8 text-left hover:bg-gray hover:border focus:bg-secondary"
class:animate-pulse={submittedMessage === "syncing..."}
on:click={onSubmitLogs}>
submit logs
</button>
@ -60,4 +65,9 @@
hr {
border-width: 1px;
}
#avatar {
height: 24px !important;
width: 24px !important;
}
</style>

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

@ -15,7 +15,6 @@
button {
box-sizing: border-box;
height: 37px;
cursor: auto;
}
button.active {
background: rgba(148, 148, 148, 0.5);

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

@ -4,64 +4,61 @@
import { packagesStore } from '$libs/stores';
import MenuButton from './menu-button.svelte';
import { t } from '$libs/translations';
import { goto } from '$app/navigation';
const { packages } = packagesStore;
export let activeOption:SideMenuOptions;
$: needsUpdateCount = $packages.filter((p) => p.state === PackageStates.NEEDS_UPDATE).length;
const selectToggle = (option: SideMenuOptions) => {
activeOption = option === activeOption ? SideMenuOptions.all : option;
}
</script>
<aside class="border border-t-0 border-b-0 border-l-0 border-gray p-2">
<ul class="flex flex-col pt-4 gap-1 pl-1">
<MenuButton label="Installed" icon="tea-checkmark"
active={activeOption === SideMenuOptions.installed}
on:click={() => selectToggle(SideMenuOptions.installed)}
on:click={() => goto(`/?tab=${SideMenuOptions.installed}`)}
/>
<hr/>
{#if needsUpdateCount}
<MenuButton label={$t("tags.updates_available")} icon="update"
<MenuButton label={$t("tags.installed_updates_available")} icon="update"
active={activeOption === SideMenuOptions.installed_updates_available}
on:click={() => selectToggle(SideMenuOptions.installed_updates_available)}
on:click={() => goto(`/?tab=${SideMenuOptions.installed_updates_available}`)}
/>
<hr/>
{/if}
<MenuButton label={$t("tags.recently_updated")} icon="back-in-time"
active={activeOption === SideMenuOptions.recently_updated}
on:click={() => selectToggle(SideMenuOptions.recently_updated)}
on:click={() => goto(`/?tab=${SideMenuOptions.recently_updated}`)}
/>
<hr/>
<MenuButton label={$t("tags.new_packages")} icon="birthday-cake"
active={activeOption === SideMenuOptions.new_packages}
on:click={() => selectToggle(SideMenuOptions.new_packages)}
on:click={() =>goto(`/?tab=${SideMenuOptions.new_packages}`)}
/>
<hr/>
<MenuButton label={$t("tags.popular")} icon="bar-chart"
active={activeOption === SideMenuOptions.popular}
on:click={() => selectToggle(SideMenuOptions.popular)}
on:click={() => goto(`/?tab=${SideMenuOptions.popular}`)}
/>
<hr/>
<MenuButton label={$t("tags.featured")} icon="lightbulb"
active={activeOption === SideMenuOptions.featured}
on:click={() => selectToggle(SideMenuOptions.featured)}
on:click={() => goto(`/?tab=${SideMenuOptions.featured}`)}
/>
<hr/>
<MenuButton label={$t("tags.essentials")} icon="square"
active={activeOption === SideMenuOptions.essentials}
on:click={() => selectToggle(SideMenuOptions.essentials)}
on:click={() => goto(`/?tab=${SideMenuOptions.essentials}`)}
/>
<hr/>
<MenuButton label={$t("tags.star_struct")} icon="star-full"
active={activeOption === SideMenuOptions.star_struct}
on:click={() => selectToggle(SideMenuOptions.star_struct)}
on:click={() => goto(`/?tab=${SideMenuOptions.star_struct}`)}
/>
<hr/>
<MenuButton label={$t("tags.made_by_tea")} icon="tea-logo-iconasset-1"
active={activeOption === SideMenuOptions.made_by_tea}
on:click={() => selectToggle(SideMenuOptions.made_by_tea)}
on:click={() => goto(`/?tab=${SideMenuOptions.made_by_tea}`)}
/>
</ul>
</aside>

2
modules/desktop/src/components/top-bar/profile-nav-button.svelte
View file

@ -7,6 +7,6 @@
}
</script>
<button class="flex items-center justify-center py-2 cursor-default hover:bg-white h-{8} rounded-sm" on:click={toggleSideNav}>
<button class="flex items-center justify-center py-2 hover:bg-white h-{8} rounded-sm" on:click={toggleSideNav}>
<div class="icon-hamburger-icon-square text-xl mt-2 py-4 px-2 text-gray hover:text-black"></div>
</button>

9
modules/desktop/src/components/top-bar/top-bar.svelte
View file

@ -22,11 +22,11 @@
<header class="border-gray flex items-center justify-between border w-full h-12 pr-2 border-t-0 border-x-0" style="-webkit-app-region: drag">
<ul class="text-gray flex h-10 gap-2 align-middle leading-10 pl-20">
<a href="/">
<a href="/?tab=all">
<div class="home-btn transition-all text-xl w-12 rounded-md text-center"><i class="icon-tea-logo-iconasset-1"/></div>
</a>
<button on:click={navStore.back} class={$prevPath ? 'active' : 'opacity-50'}>&#8592</button>
<button on:click={navStore.next} class={$nextPath ? 'active' : 'opacity-50'}>&#8594</button>
<button on:click={navStore.back} class:active={$prevPath} class="opacity-50 pt-1 text-xs"><i class="icon-arrow-left"/></button>
<button on:click={navStore.next} class:active={$nextPath} class="opacity-50 pt-1 text-xs"><i class="icon-arrow-right"/></button>
</ul>
<div class="px-2 w-1/3">
<SearchInput
@ -55,7 +55,6 @@
line-height: 40px;
padding-left: 3px;
background-color: rgba(34, 34, 34, 1);
cursor: auto;
}
.home-btn:hover {
background-size: cover;
@ -65,11 +64,11 @@
}
ul button {
pointer-events: none;
cursor: auto;
}
ul button.active {
color: white;
pointer-events: all;
opacity: 1;
}
</style>

2
modules/desktop/src/components/welcome-modal/welcome-modal.svelte
View file

@ -73,7 +73,7 @@
</div>
</article>
<button class="icon-tea-x-btn absolute text-gray top-5 right-5 cursor-default"
<button class="icon-tea-x-btn absolute text-gray top-5 right-5"
on:click={() => {
close()
}}

6
modules/desktop/src/libs/translations/translations.json
View file

@ -65,14 +65,14 @@
"tags": {
"all": "all",
"installed": "installed",
"updates_available": "Updates available",
"installed_updates_available": "Updates available",
"recently_updated": "Recently updated",
"new_packages": "New packages",
"popular": "Popular",
"featured": "Featured",
"essentials": "Essentials",
"star_struct": "Star-struct",
"made_by_tea": "Made by Tea.xyz"
"star_struct": "Star-struck",
"made_by_tea": "Made by tea.xyz"
}
}
}

2
modules/desktop/src/routes/+layout.svelte
View file

@ -53,7 +53,7 @@
<Footer/>
</div>
{#if $sideNavOpen}
<aside class="fixed border border-gray rounded-md bg-black transition-all">
<aside class="fixed z-50 border border-gray rounded-md bg-black transition-all">
<SideBar/>
</aside>
{/if}

21
modules/desktop/src/routes/+page.svelte
View file

@ -3,6 +3,7 @@
import { page } from '$app/stores';
import { t } from '$libs/translations';
import { afterNavigate } from '$app/navigation';
import { packagesStore, notificationStore } from '$libs/stores';
import Packages from '$components/packages/packages.svelte';
import { PackageStates, SideMenuOptions, type GUIPackage } from '$libs/types';
@ -48,15 +49,23 @@
$: teaPkg = $packages.find((p) => p.full_name === "tea.xyz");
$: needsUpdateCount = pkgsToUpdate.length;
afterNavigate(({ from, to }) => {
if (to?.url?.pathname === "/") {
const tab = to.url.searchParams.get("tab")
sideMenuOption = !tab ? SideMenuOptions.all : tab as SideMenuOptions;
}
});
</script>
<div id="package-container">
<Packages packageFilter={sideMenuOption} {sortBy} {sortDirection} bind:scrollY={packagesScrollY}/>
</div>
<header class="transition-all px-2 flex flex-col" class:scrolling={packagesScrollY > 100}>
<header class="transition-all px-2 flex flex-col z-20" class:scrolling={packagesScrollY > 100}>
<NotificationBar />
<div class="flex justify-between items-center">
<h1 class="text-primary pl-3 pt-2 text-2xl font-bold font-mona">{$t(`side-menu-title.${sideMenuOption}`)}</h1>
<h1 class="text-primary pl-3 text-2xl font-bold font-mona">{$t(`side-menu-title.${sideMenuOption}`)}</h1>
<!--
<section class="border-gray mt-4 mr-4 h-10 w-48 border rounded-sm">
@ -99,9 +108,17 @@
padding-top: 15px;
}
header h1 {
padding-top: 8px;
}
header.scrolling {
height: 60px;
background-color: #222222;
padding-top: 5px;
}
header.scrolling h1 {
padding-top: 0px;
}
</style>

4
modules/desktop/src/routes/packages/[slug]/+page.svelte
View file

@ -53,10 +53,10 @@
})
</script>
<header class="mx-16 py-5 mb-10 text-gray border border-x-0 border-t-0">
<a class="hover:text-white hover:opacity-80 cursor-default" href="/">{$t("common.home")}</a>
<a class="hover:text-white hover:opacity-80" href="/">{$t("common.home")}</a>
>
{#if tab !== "all"}
<a class="hover:text-white hover:opacity-80 cursor-default" href={`/?tab=${tab || "all"}`}>{$t(`tags.${tab}`) || "all"}</a>
<a class="hover:text-white hover:opacity-80" href={`/?tab=${tab || "all"}`}>{$t(`tags.${tab}`) || "all"}</a>
>
{/if}
<span class="text-white">{pkg?.full_name}</span>

1
modules/ui/src/checkbox/checkbox.svelte
View file

@ -14,7 +14,6 @@
<style>
label {
position: relative;
cursor: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

2
modules/ui/src/markdown/markdown.svelte
View file

@ -11,6 +11,6 @@
};
</script>
<section class="markdown-body p-4">
<section class="markdown-body py-4">
<SvelteMarkdown {source} {renderers} />
</section>