mirror of
https://github.com/ivabus/gui
synced 2025-04-23 14:07:14 +03:00
auth and i81n menu into the sidebar (#285)
* #277 auth into the sidebar * show version to be removed * #282 fix notification buttons * update button colors --------- Co-authored-by: neil <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil
GitHub
parent
64aa63a8c0
commit
414cdc2be8
15 changed files with 123 additions and 107 deletions
|
|
@ -39,7 +39,7 @@ setupTitlebar();
|
|||
|
||||
function createWindow() {
|
||||
const windowState = windowStateManager({
|
||||
defaultWidth: 800,
|
||||
defaultWidth: 1000,
|
||||
defaultHeight: 600
|
||||
});
|
||||
|
||||
|
|
@ -51,8 +51,8 @@ function createWindow() {
|
|||
x: 14,
|
||||
y: 13
|
||||
},
|
||||
minHeight: 450,
|
||||
minWidth: 500,
|
||||
minHeight: 600,
|
||||
minWidth: 1000,
|
||||
webPreferences: {
|
||||
contextIsolation: false,
|
||||
nodeIntegration: true,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { Titlebar } from "custom-electron-titlebar";
|
||||
|
||||
const isVite = () => {
|
||||
try {
|
||||
return window.location.href.includes("is-vite");
|
||||
|
|
@ -19,10 +17,3 @@ if (!isVite()) {
|
|||
SvelteSentry.init
|
||||
);
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
// Title bar implemenation
|
||||
new Titlebar({
|
||||
titleHorizontalAlignment: "left"
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,6 +5,13 @@
|
|||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
<style>
|
||||
html {
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>%sveltekit.body%</div>
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
link={`/packages/${pkg.slug}`}
|
||||
ctaLabel={getCTALabel(pkg.state)}
|
||||
progessLoading={+fakeLoadingProgress.toFixed(2)}
|
||||
ctaType={PackageStates.INSTALLED === pkg.state ? "ghost" : "plain"}
|
||||
onClickCTA={async () => {
|
||||
fakeLoadingProgress = 1;
|
||||
startFakeLoader();
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@
|
|||
|
||||
let sortBy = 'popularity';
|
||||
let sortDirection: 'asc' | 'desc' = 'desc';
|
||||
let limit = 9;
|
||||
const loadMore = 12;
|
||||
let limit = loadMore;
|
||||
|
||||
let packages: GUIPackage[] = [];
|
||||
|
||||
|
|
@ -126,7 +127,7 @@
|
|||
</ul>
|
||||
{#if limit < packages.length }
|
||||
<footer class="w-full flex border border-gray h-16">
|
||||
<button class="flex-grow h-16" on:click={() => limit += 9 }>show more</button>
|
||||
<button class="flex-grow h-16" on:click={() => limit += loadMore }>show more</button>
|
||||
</footer>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,27 @@
|
|||
<script lang="ts">
|
||||
import '$appcss';
|
||||
import { authStore } from '$libs/stores';
|
||||
import type { Developer } from '@tea/ui/types';
|
||||
|
||||
let user: Developer | null = null;
|
||||
const authPage = `http://localhost:3000/v1/auth/user?device_id=${authStore.deviceId}`; // https://api.tea.xyz/v1/auth/user?device_id=device_id
|
||||
|
||||
authStore.subscribe((u) => (user = u));
|
||||
const { user } = authStore;
|
||||
// const authPage = `http://localhost:3000/v1/auth/user?device_id=${authStore.deviceId}`; // https://api.tea.xyz/v1/auth/user?device_id=device_id
|
||||
</script>
|
||||
|
||||
{#if user}
|
||||
{#if $user}
|
||||
<section class="border-gray border-2 bg-black p-2">
|
||||
<div class="profile_banner border-gray container flex border bg-black">
|
||||
<img class="w-1/5" src={user.avatar_url || '/images/bored-ape.png'} alt="profile" />
|
||||
<img class="w-1/5" src={$user.avatar_url || '/images/bored-ape.png'} alt="profile" />
|
||||
<div class="flex w-4/5 items-center p-5">
|
||||
<div class="w-1/2 pl-5">
|
||||
<p class="text-gray uppercase">Authenticated with GitHub</p>
|
||||
<p />
|
||||
<p class="text-primary text-4xl">@{user.login}</p>
|
||||
<p class="text-primary text-4xl">@{$user.login}</p>
|
||||
</div>
|
||||
<div class="border-gray h-full border-l" />
|
||||
<div class="w-1/2 pl-10">
|
||||
<p class="text-gray uppercase leading-loose">
|
||||
Country: <span>{user?.country}</span><br />Wallet:
|
||||
{#if user.wallet}
|
||||
<span>{user.wallet}</span>
|
||||
Country: <span>$user?.country}</span><br />Wallet:
|
||||
{#if $user.wallet}
|
||||
<span>{$user.wallet}</span>
|
||||
{:else}
|
||||
<a class="text-green underline" href="/">Connect Now</a>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { t, locales, locale } from '$libs/translations';
|
||||
</script>
|
||||
|
||||
<section class="flex items-center border border-gray h-8 mt-1 mr-1 px-2 w-48 rounded-sm">
|
||||
<section class="flex items-center border border-gray h-8 mt-1 mr-1 px-2 w-full rounded-sm">
|
||||
<i class="icon-world text-gray mt-2"></i>
|
||||
<select bind:value="{$locale}" class="bg-black text-sm text-gray flex-grow">
|
||||
{#each $locales as value}
|
||||
|
|
|
|||
32
modules/desktop/src/components/side-bar/side-bar.svelte
Normal file
32
modules/desktop/src/components/side-bar/side-bar.svelte
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script lang="ts">
|
||||
import { authStore } from '$libs/stores';
|
||||
import SelectLang from '$components/select-lang/select-lang.svelte';
|
||||
import { baseUrl } from '$libs/v1-client';
|
||||
import { shellOpenExternal } from '@native';
|
||||
const { user, deviceIdStore } = authStore;
|
||||
|
||||
const openGithub = () => {
|
||||
shellOpenExternal(`${baseUrl}/auth/user?device_id=${$deviceIdStore}`)
|
||||
try {
|
||||
authStore.pollSession();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<nav class="bg-opacity-20 w-full h-full p-4">
|
||||
{#if $user}
|
||||
<section class="flex rounded-full mb-2">
|
||||
<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>
|
||||
{:else}
|
||||
<button class="flex border border-gray rounded-sm w-full mb-2 h-8 items-center" on:click={openGithub}>
|
||||
<figure class="p-2">
|
||||
<img width="18" height="18" src="/images/github.png" alt="profile" />
|
||||
</figure>
|
||||
<div class="text-gray">Login</div>
|
||||
</button>
|
||||
{/if}
|
||||
<SelectLang/>
|
||||
</nav>
|
||||
|
|
@ -1,37 +1,24 @@
|
|||
<script lang="ts">
|
||||
import { authStore } from '$libs/stores';
|
||||
import type { Developer } from '@tea/ui/types';
|
||||
import { baseUrl } from '$libs/v1-client';
|
||||
import { shellOpenExternal } from '@native';
|
||||
|
||||
let user: Developer | null = null;
|
||||
import { authStore, navStore } from '$libs/stores';
|
||||
const { user } = authStore;
|
||||
const deviceId = authStore.deviceIdStore;
|
||||
const { sideNavOpen } = navStore;
|
||||
|
||||
const openGithub = () => {
|
||||
shellOpenExternal(`${baseUrl}/auth/user?device_id=${$deviceId}`)
|
||||
try {
|
||||
authStore.pollSession();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
authStore.subscribe((u) => (user = u));
|
||||
|
||||
const toggleSideNav = () => {
|
||||
console.log("toggle", $sideNavOpen)
|
||||
navStore.sideNavOpen.update((v) => !v);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{#if user}
|
||||
<a href="/profile">
|
||||
<section class="flex">
|
||||
<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>
|
||||
</a>
|
||||
{:else}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<section class="flex" on:click={openGithub}>
|
||||
<figure class="p-2">
|
||||
<img width="28" height="28" src="/images/github.png" alt="profile" />
|
||||
<button class="flex items-center justify-center py-2" on:click={toggleSideNav}>
|
||||
{#if $user}
|
||||
<figure class="flex rounded-full overflow-clip w-{8} h-{8} mr-1">
|
||||
<img src={$user.avatar_url || '/images/bored-ape.png'} alt="profile" />
|
||||
</figure>
|
||||
<div class="text-gray p-2">Login</div>
|
||||
</section>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="icon-hamburger-icon-square text-xl mt-2 py-4 px-2 text-gray"></div>
|
||||
{/if}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
import { searchStore } from '$libs/stores';
|
||||
import SearchInput from '@tea/ui/search-input/search-input.svelte';
|
||||
import { navStore } from '$libs/stores';
|
||||
import { t } from '$libs/translations';
|
||||
import { t } from '$libs/translations';
|
||||
import * as pub from '$env/static/public';
|
||||
|
||||
import ProfileNavButton from './profile-nav-button.svelte';
|
||||
import SelectLang from '$components/select-lang/select-lang.svelte';
|
||||
|
||||
let { nextPath, prevPath } = navStore;
|
||||
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<header class="border-gray flex w-full border border-l-0 border-r-0" style="-webkit-app-region: drag">
|
||||
<header class="border-gray flex w-full border border-l-0 border-r-0 h-10" style="-webkit-app-region: drag">
|
||||
<div class="w-16 mr-2">
|
||||
<!-- just spacing for the close/expand/ buttons in title bar
|
||||
todo: handle this different when on linux probably move to right
|
||||
|
|
@ -37,29 +37,12 @@
|
|||
<SearchInput
|
||||
class="w-full border border-gray rounded-sm"
|
||||
size="small"
|
||||
placeholder={$t("store-search-placeholder")}
|
||||
placeholder={`${$t("store-search-placeholder")} rm this v${pub.PUBLIC_VERSION}`}
|
||||
{onSearch}
|
||||
/>
|
||||
</div>
|
||||
<!-- <ul class="text-gray flex gap-4 pr-4 pt-2 align-middle">
|
||||
<button class="icon-filter hover:text-white" />
|
||||
<button class="icon-share hover:text-white" />
|
||||
<button class="icon-star-empty hover:text-white" />
|
||||
</ul> -->
|
||||
<SelectLang />
|
||||
<ProfileNavButton />
|
||||
</header>
|
||||
<!-- <menu
|
||||
class="border-gray text-gray flex h-10 gap-4 border border-l-0 border-r-0 border-t-0 pl-4 align-middle leading-10"
|
||||
>
|
||||
<a href="/cli" class={currentPath === '/cli' ? 'active' : ''}>{$t('cli.install')}</a>
|
||||
<a href="/documentation" class={currentPath === '/documentation' ? 'active' : ''}>{$t('documentation.title')}</a
|
||||
>
|
||||
<a href="/packages" class={currentPath === '/packages' ? 'active' : ''}>packages</a>
|
||||
<a href="https://github.com/teaxyz" target="_blank" rel="noreferrer">
|
||||
<i class="icon-star-empty" /> Github (5.2k)
|
||||
</a>
|
||||
</menu> -->
|
||||
|
||||
<style>
|
||||
@tailwind base;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export const getSession = async (): Promise<Session | null> => {
|
|||
};
|
||||
|
||||
export default function initAuthStore() {
|
||||
const user = writable<Developer>();
|
||||
const sessionStore = writable<Session>({});
|
||||
let pollLoop = 0;
|
||||
|
||||
|
|
@ -24,6 +25,7 @@ export default function initAuthStore() {
|
|||
sessionStore.set(sess);
|
||||
deviceIdStore.set(sess.device_id!);
|
||||
deviceId = sess.device_id!;
|
||||
if (sess.user) user.set(sess.user);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -35,7 +37,7 @@ export default function initAuthStore() {
|
|||
key: data.key,
|
||||
user: data.user
|
||||
};
|
||||
console.log("localSession:", localSession);
|
||||
|
||||
await electronUpdateSession(localSession);
|
||||
sessionStore.set(localSession);
|
||||
}
|
||||
|
|
@ -46,12 +48,12 @@ export default function initAuthStore() {
|
|||
pollLoop++;
|
||||
try {
|
||||
const data = await getDeviceAuth(deviceId);
|
||||
console.log("dd", deviceId, data);
|
||||
if (data.status === "SUCCESS") {
|
||||
updateSession({
|
||||
key: data.key,
|
||||
user: data.user
|
||||
});
|
||||
user.set(data.user);
|
||||
timer && clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
|
|
@ -69,11 +71,10 @@ export default function initAuthStore() {
|
|||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
session: sessionStore,
|
||||
deviceId,
|
||||
deviceIdStore,
|
||||
subscribe: (cb: (u: Developer) => void) => {
|
||||
return sessionStore.subscribe((v) => v?.user && cb(v.user));
|
||||
},
|
||||
pollSession
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { writable } from "svelte/store";
|
|||
import { goto } from "$app/navigation";
|
||||
|
||||
export default function initNavStore() {
|
||||
const sideNavOpen = writable<boolean>(false);
|
||||
const historyStore = writable<string[]>(["/"]);
|
||||
let history = ["/"];
|
||||
|
||||
|
|
@ -17,6 +18,7 @@ export default function initNavStore() {
|
|||
|
||||
return {
|
||||
historyStore,
|
||||
sideNavOpen,
|
||||
prevPath: prevPathStore,
|
||||
nextPath: nextPathStore,
|
||||
next: () => {
|
||||
|
|
|
|||
|
|
@ -3,29 +3,32 @@
|
|||
import { navigating } from '$app/stores';
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
import TopBar from '$components/top-bar/top-bar.svelte';
|
||||
import FooterLinks from '$components/footer-links/footer-links.svelte';
|
||||
import SideBar from '$components/side-bar/side-bar.svelte';
|
||||
import { navStore, notificationStore } from '$libs/stores';
|
||||
|
||||
import Notification from "@tea/ui/notification/notification.svelte";
|
||||
|
||||
import SearchPopupResults from '$components/search-popup-results/search-popup-results.svelte';
|
||||
|
||||
import TeaUpdate from '$components/tea-update/tea-update.svelte';
|
||||
import TeaUpdate from '$components/tea-update/tea-update.svelte';
|
||||
|
||||
let view: HTMLElement;
|
||||
|
||||
const { sideNavOpen, setNewPath } = navStore;
|
||||
|
||||
$: if ($navigating) view.scrollTop = 0;
|
||||
|
||||
afterNavigate(({ from, to }) => {
|
||||
if (to && to?.route.id && from && from?.url) {
|
||||
const nextPath = to.url.href.replace(to.url.origin, '');
|
||||
const fromPath = from?.url.href.replace(from.url.origin, '');
|
||||
navStore.setNewPath(nextPath, fromPath || '/');
|
||||
setNewPath(nextPath, fromPath || '/');
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div id="main-layout" class="w-full">
|
||||
<div id="main-layout" class={`${$sideNavOpen ? "w-3/4" : "w-full"} transition-all`}>
|
||||
<TopBar />
|
||||
{#each $notificationStore as notification}
|
||||
<Notification {notification} onClose={() => {
|
||||
|
|
@ -42,6 +45,10 @@
|
|||
<SearchPopupResults />
|
||||
</section>
|
||||
</div>
|
||||
<aside class={`absolute h-full w-1/4 bg-gray bg-opacity-10 top-0 transition-all ${$sideNavOpen ? "right-0":"-right-1/4"}`}>
|
||||
<SideBar/>
|
||||
</aside>
|
||||
|
||||
|
||||
<style>
|
||||
#main-layout {
|
||||
|
|
@ -49,7 +56,7 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
section {
|
||||
height: calc(100vh - 82px);
|
||||
height: calc(100vh - 42px);
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -64,10 +71,6 @@
|
|||
}
|
||||
}
|
||||
@media screen and (max-width: 1440px) {
|
||||
figure {
|
||||
background-size: contain;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
.content {
|
||||
padding: 0vw 3.33vw;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,15 +11,17 @@
|
|||
|
||||
<div class=" flex w-full items-center justify-between bg-accent px-4 py-2">
|
||||
<div class="text-white">{notification.message}</div>
|
||||
{#if notification.callback}
|
||||
<button
|
||||
class="h-10 w-32 bg-white text-accent"
|
||||
on:click={() => {
|
||||
if (notification.callback) {
|
||||
notification.callback();
|
||||
}
|
||||
}}>{notification.callback_label}</button
|
||||
>
|
||||
{/if}
|
||||
<button class="icon-tea-x-btn" on:click={onClose} />
|
||||
<div class="flex items-center gap-4">
|
||||
{#if notification.callback}
|
||||
<button
|
||||
class="h-10 w-32 rounded-sm bg-white text-accent"
|
||||
on:click={() => {
|
||||
if (notification.callback) {
|
||||
notification.callback();
|
||||
}
|
||||
}}>{notification.callback_label}</button
|
||||
>
|
||||
{/if}
|
||||
<button class="icon-tea-x-btn mt-1 text-xs" on:click={onClose} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@
|
|||
import "../app.css";
|
||||
import type { Package } from "../types";
|
||||
import ImgLoader from "../img-loader/img-loader.svelte";
|
||||
import Button from "../button/button.svelte";
|
||||
import ProgressCircle from "../progress-circle/progress-circle.svelte";
|
||||
|
||||
export let pkg: Package;
|
||||
export let link: string;
|
||||
export let ctaLabel: string;
|
||||
export let progessLoading = 0;
|
||||
export let ctaType: "ghost" | "plain" = "ghost";
|
||||
|
||||
export let onClickCTA = () => {
|
||||
console.log("do nothing");
|
||||
|
|
@ -35,17 +37,24 @@
|
|||
</article>
|
||||
</figure>
|
||||
</a>
|
||||
<footer class="mt-4 flex items-center justify-between">
|
||||
<footer class="mt-4 flex items-stretch justify-between gap-2">
|
||||
<div>
|
||||
<p>
|
||||
<span class="pk-version text-xs">V {pkg.version}</span>
|
||||
<span class="pk-version text-xs">v{pkg.version}</span>
|
||||
<!--
|
||||
TODO: uncomment once install counts improve
|
||||
<br>
|
||||
<span class="package-install-no">>{{- .installs -}} installs</span> -->
|
||||
</p>
|
||||
</div>
|
||||
<button class="p-2 font-machina" on:click={onClickCTA}>{ctaLabel}</button>
|
||||
<Button
|
||||
class="w-1/2 border border-gray p-2 font-machina"
|
||||
onClick={onClickCTA}
|
||||
type={ctaType}
|
||||
color="secondary"
|
||||
>
|
||||
{ctaLabel}
|
||||
</Button>
|
||||
</footer>
|
||||
{#if progessLoading > 0 && progessLoading < 100}
|
||||
<div class="absolute top-0 left-0 h-full w-full bg-black bg-opacity-50">
|
||||
|
|
@ -105,7 +114,7 @@
|
|||
padding: 0px;
|
||||
}
|
||||
|
||||
button {
|
||||
/* button {
|
||||
background-color: #1a1a1a;
|
||||
border: 0.5px solid #ffffff;
|
||||
color: #fff;
|
||||
|
|
@ -118,5 +127,5 @@
|
|||
button:hover {
|
||||
background-color: #8000ff;
|
||||
box-shadow: inset 0vw 0vw 0vw 0.223vw #1a1a1a !important;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue