mirror of
https://github.com/ivabus/gui
synced 2025-04-23 14:07:14 +03:00
New top bar (#334)
* #333 new top-bar * package page adjustments --------- Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil
GitHub
parent
dbb390429e
commit
05e31f4798
7 changed files with 94 additions and 75 deletions
|
|
@ -2,7 +2,6 @@ import { mkdirp } from "mkdirp";
|
|||
import path from "path";
|
||||
import fs from "fs";
|
||||
import { getTeaPath } from "./tea-dir";
|
||||
import * as v1Client from "./v1-client";
|
||||
import { app } from "electron";
|
||||
import * as log from "electron-log";
|
||||
import axios from "axios";
|
||||
|
|
@ -44,16 +43,11 @@ async function createInitialSessionFile(): Promise<Session> {
|
|||
} else {
|
||||
log.info("session file does not exists!");
|
||||
await mkdirp(sessionFolder);
|
||||
const req = await axios.get<{ deviceId: string }>(
|
||||
"https://api.tea.xyz/v1/auth/registerDevice"
|
||||
);
|
||||
const data = { device_id: "", locale };
|
||||
if (req && req.data.deviceId) {
|
||||
data.device_id = req.data.deviceId;
|
||||
log.info("got device_id", data);
|
||||
await writeSessionData(data);
|
||||
}
|
||||
session = data;
|
||||
const data = {
|
||||
device_id: await getDeviceId(),
|
||||
locale
|
||||
};
|
||||
await writeSessionData(data);
|
||||
}
|
||||
} catch (error) {
|
||||
log.error(error);
|
||||
|
|
@ -61,10 +55,28 @@ async function createInitialSessionFile(): Promise<Session> {
|
|||
return session;
|
||||
}
|
||||
|
||||
let deviceIdRetryCount = 0;
|
||||
async function getDeviceId() {
|
||||
let deviceId = "";
|
||||
try {
|
||||
const req = await axios.get<{ deviceId: string }>("https://api.tea.xyz/v1/auth/registerDevice");
|
||||
deviceId = req.data.deviceId;
|
||||
} catch (error) {
|
||||
log.error(error);
|
||||
}
|
||||
|
||||
if (deviceIdRetryCount < 3 && !deviceId) {
|
||||
deviceIdRetryCount++;
|
||||
deviceId = await getDeviceId();
|
||||
}
|
||||
|
||||
return deviceId;
|
||||
}
|
||||
|
||||
export async function readSessionData(): Promise<Session> {
|
||||
log.info("read session data.");
|
||||
const data = await initialized;
|
||||
log.info("initialized session exists:", !!data);
|
||||
log.info("initialized session exists:", data);
|
||||
if (sessionMemory?.device_id) {
|
||||
log.info("use session cache");
|
||||
return sessionMemory;
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<section class="border-gray mt-4 border bg-black">
|
||||
<header class="flex p-2">
|
||||
<section class="mt-4 bg-black">
|
||||
<header class="flex">
|
||||
<figure class="grow-1 w-1/3">
|
||||
<img width={260} src={pkg.thumb_image_url} alt={pkg.full_name} />
|
||||
</figure>
|
||||
|
|
@ -67,5 +67,4 @@
|
|||
</menu>
|
||||
</article>
|
||||
</header>
|
||||
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,11 @@
|
|||
|
||||
<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 class="flex gap-2 h-{8} mr-1 border border-gray rounded-md items-center px-1">
|
||||
<div class="text-gray font-inter bg-black">@{$user.login}</div>
|
||||
<div class="overflow-clip w-{6} h-{6} rounded-sm">
|
||||
<img class="w-{6} w-{6} h-{6}" src={$user.avatar_url || '/images/bored-ape.png'} alt="profile" />
|
||||
</div>
|
||||
</figure>
|
||||
{:else}
|
||||
<div class="icon-hamburger-icon-square text-xl mt-2 py-4 px-2 text-gray"></div>
|
||||
|
|
|
|||
|
|
@ -21,19 +21,15 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<header class="border-gray flex items-center w-full border border-l-0 border-r-0 h-12" style="-webkit-app-region: drag">
|
||||
<div class="w-16 mr-2">
|
||||
<!-- just spacing for the traffice-lights buttons in title bar
|
||||
todo: handle this different when on linux probably move to right
|
||||
-->
|
||||
</div>
|
||||
{#if $prevPath || $nextPath}
|
||||
<ul class="text-gray flex h-10 gap-4 pl-2 align-middle leading-10 mr-2">
|
||||
<button on:click={navStore.back} class={$prevPath ? 'active' : ''}>←</button>
|
||||
<button on:click={navStore.next} class={$nextPath ? 'active' : ''}>→</button>
|
||||
</ul>
|
||||
{/if}
|
||||
<div class="px-2 flex-grow">
|
||||
<header class="border-gray flex items-center justify-between border w-full h-12 pr-2 rounded-t-xl" style="-webkit-app-region: drag">
|
||||
<ul class="text-gray flex h-10 gap-2 align-middle leading-10 pl-20">
|
||||
<a href="/">
|
||||
<button id="home" class="text-xl hover:bg-primary w-12 rounded-md text-center"><i class="icon-tea-logo-iconasset-1"/></button>
|
||||
</a>
|
||||
<button on:click={navStore.back} class={$prevPath ? 'active' : 'opacity-50'}>←</button>
|
||||
<button on:click={navStore.next} class={$nextPath ? 'active' : 'opacity-50'}>→</button>
|
||||
</ul>
|
||||
<div class="px-2 w-1/3">
|
||||
<SearchInput
|
||||
class="w-full border border-gray rounded-sm h-9"
|
||||
size="small"
|
||||
|
|
@ -52,8 +48,13 @@
|
|||
header {
|
||||
background: rgba(26,26,26,0.9);
|
||||
backdrop-filter: blur(2px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#home {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: #222222;
|
||||
}
|
||||
|
||||
ul button {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</script>
|
||||
|
||||
{#if pkg}
|
||||
<div class="bg-black">
|
||||
<div class="bg-black px-16">
|
||||
<section>
|
||||
<PackageBanner {pkg} />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -27,77 +27,70 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<section class="bg-black">
|
||||
<h1 class="border border-gray p-4 text-primary">METADATA</h1>
|
||||
<ul class="border border-t-0 border-gray p-4">
|
||||
<section class="bg-black pt-2">
|
||||
<h1 class="text-primary">Metadata</h1>
|
||||
<ul class="mb-10 flex flex-col gap-2">
|
||||
{#if pkg?.bottles}
|
||||
<li class="border border-gray p-4">
|
||||
<i class="icon-calendar" />
|
||||
<span class="ml-4">{dayjs().to(dayjs(pkg?.bottles[0].last_modified_at))}</span>
|
||||
<li>
|
||||
<span>{dayjs().to(dayjs(pkg?.bottles[0].last_modified_at))}</span>
|
||||
</li>
|
||||
{/if}
|
||||
{#if pkg?.license}
|
||||
<li class="border border-gray p-4">
|
||||
<i class="icon-calendar" />
|
||||
<span class="ml-4">{pkg.license}</span>
|
||||
<li>
|
||||
<span>{pkg.license}</span>
|
||||
</li>
|
||||
{/if}
|
||||
{#if pkg?.bottles}
|
||||
<li class="border border-gray p-4">
|
||||
<i class="icon-calendar" />
|
||||
<span class="ml-4">{computeFileSize(pkg?.bottles[0].bytes)}</span>
|
||||
<li>
|
||||
<span>{computeFileSize(pkg?.bottles[0].bytes)}</span>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
<h1 class="border border-t-0 border-gray p-4 text-primary">HOMEPAGE</h1>
|
||||
<ul class="border border-t-0 border-gray p-4">
|
||||
<li class="border border-gray p-4">
|
||||
<i class="icon-calendar" />
|
||||
<h1 class="text-primary">Homepage</h1>
|
||||
<ul class="mb-10 flex flex-col gap-2">
|
||||
<li>
|
||||
<a target="_blank" rel="noreferrer" href={pkg.homepage}>
|
||||
<span class="ml-4">{pkg.homepage}</span>
|
||||
<span>{pkg.homepage}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{#if pkg.documentation_url}
|
||||
<h1 class="border border-t-0 border-gray p-4 text-primary">DOCUMENTATION</h1>
|
||||
<ul class="border border-t-0 border-gray p-4">
|
||||
<li class="border border-gray p-4">
|
||||
<i class="icon-calendar" />
|
||||
<span class="ml-4">{pkg.documentation_url}</span>
|
||||
<h1 class="text-primary">Documentation</h1>
|
||||
<ul class="mb-10 flex flex-col gap-2">
|
||||
<li>
|
||||
<a target="_blank" rel="noreferrer" href={pkg.documentation_url}>
|
||||
<span class="ml-4">{pkg.documentation_url}</span>
|
||||
<span>{pkg.documentation_url}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{/if}
|
||||
{#if pkg.github}
|
||||
<h1 class="border border-t-0 border-gray p-4 text-primary">GITHUB REPOSITORY</h1>
|
||||
<ul class="border border-t-0 border-gray p-4">
|
||||
<li class="border border-gray p-4">
|
||||
<i class="icon-calendar" />
|
||||
<h1 class="text-primary">Github Repository</h1>
|
||||
<ul class="mb-10 flex flex-col gap-2">
|
||||
<li>
|
||||
<a target="_blank" rel="noreferrer" href={`https://github.com/${pkg.github}`}>
|
||||
<span class="ml-4">{pkg.github}</span>
|
||||
<span>{pkg.github}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{/if}
|
||||
{#if pkg.contributors?.length}
|
||||
<h1 class="border border-t-0 border-gray p-4 text-primary">CONTRIBUTORS</h1>
|
||||
<ul class="border border-t-0 border-gray p-4">
|
||||
<h1 class="text-primary">Contributors</h1>
|
||||
<ul class="mb-10 flex flex-col gap-2">
|
||||
{#each pkg.contributors as contributor}
|
||||
<a href={`https://github.com/${contributor.login}`} rel="noreferrer" target="_blank">
|
||||
<li class="flex items-center border border-gray p-4">
|
||||
<figure class="h-5 w-5 bg-gray">
|
||||
<img src={contributor.avatar_url} alt={contributor.login} />
|
||||
</figure>
|
||||
<span class="ml-4">{contributor.login}</span>
|
||||
</li>
|
||||
</a>
|
||||
<li>
|
||||
<!-- <figure class="h-5 w-5 bg-gray">
|
||||
<img src={contributor.avatar_url} alt={contributor.login} />
|
||||
</figure> -->
|
||||
<a href={`https://github.com/${contributor.login}`} rel="noreferrer" target="_blank">
|
||||
<span>{contributor.login}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
{#if pkg.categories?.length}
|
||||
<!-- {#if pkg.categories?.length}
|
||||
<h1 class="border border-t-0 border-gray p-4 text-primary">CATEGORIES</h1>
|
||||
<ul class="border border-t-0 border-gray p-4">
|
||||
{#each pkg.categories as category}
|
||||
|
|
@ -107,5 +100,16 @@
|
|||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{/if} -->
|
||||
</section>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
margin-top: 10px;
|
||||
}
|
||||
ul > li {
|
||||
border-top: gray 1px solid;
|
||||
height: 36px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<section class={`relative h-auto border border-gray ${clazz || ""}`}>
|
||||
<menu class="flex border border-gray">
|
||||
<section class={`relative h-auto ${clazz || ""}`}>
|
||||
<menu class="flex gap-1">
|
||||
{#each tabs as tab}
|
||||
<div class="border border-y-0 border-l-0 border-gray text-white">
|
||||
<div class="border border-x-0 border-t-0 border-gray text-white">
|
||||
<Button onClick={() => (active = tab.label)}>
|
||||
<span class={tab.label === active ? "text-white" : ""}>{tab.label}</span>
|
||||
</Button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue