commit e62ff2fdf159f36b9fd7a2bc53ea65557932a3aa
parent f54a438d26f7b46273116c120baaebae7218d3b7
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Thu, 29 Aug 2024 10:36:23 +0000
Add tabs component, edit app_layout store
Diffstat:
7 files changed, 115 insertions(+), 11 deletions(-)
diff --git a/src/app.css b/src/app.css
@@ -12,20 +12,20 @@
height: 100%;
flex: 1 0 100%;
}
-}
-@layer base {
- :root {
- background-color: hsl(var(--layer-0-surface));
+ .scroll-hide::-webkit-scrollbar {
+ display: none;
}
- body {
+ .scroll-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
+}
- body::-webkit-scrollbar {
- display: none;
+@layer base {
+ :root {
+ background-color: hsl(var(--layer-0-surface));
}
p {
diff --git a/src/lib/components/layout-trellis.svelte b/src/lib/components/layout-trellis.svelte
@@ -5,6 +5,6 @@
</script>
-<div class={`flex flex-col w-full pt-20 pb-12 px-4 gap-4 justify-start items-start overflow-y-scroll`}>
+<div class={`flex flex-col w-full mb-4 pt-20 pb-h_tabs_lg px-4 gap-4 justify-start items-start overflow-y-scroll scroll-hide`}>
{@render children()}
</div>
diff --git a/src/lib/components/tabs.svelte b/src/lib/components/tabs.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+ import { app_layout, app_tab_active, app_tabs_blur } from "$lib/stores";
+ import { glyph, type ITabsBasis } from "@radroots/svelte-lib";
+
+ let {
+ basis,
+ }: {
+ basis: ITabsBasis;
+ } = $props();
+
+ let classes_blur = $derived($app_tabs_blur ? `bg-layer-1-surface/30` : ``);
+
+ let el: HTMLElement | null;
+ let el_inner: HTMLElement | null;
+</script>
+
+<div
+ bind:this={el}
+ class={`z-10 absolute bottom-0 left-0 flex flex-col w-full justify-start items-start transition-all backdrop-blur-md h-tabs_${$app_layout} ${classes_blur}`}
+>
+ <div
+ bind:this={el_inner}
+ class={`relative flex flex-col h-full w-full justify-start items-center`}
+ >
+ <div
+ class={`absolute top-4 left-0 grid grid-cols-12 flex flex-row w-full justify-center items-center`}
+ >
+ {#each basis.list as tab, tab_i}
+ <button
+ class={`col-span-3 flex flex-col h-full justify-start items-center transition-all`}
+ onclick={async () => {
+ app_tab_active.set(tab_i);
+ await tab.callback(tab_i);
+ }}
+ >
+ <svelte:component
+ this={glyph}
+ basis={{
+ classes:
+ $app_tab_active === tab_i
+ ? `text-layer-0-glyph text-lineActiveBlue`
+ : `text-layer-0-glyph text-lineMd`,
+ key: tab.icon,
+ dim: `md`,
+ weight:
+ $app_tab_active === tab_i
+ ? tab.active_weight || `fill`
+ : `bold`,
+ }}
+ />
+ </button>
+ {/each}
+ </div>
+ </div>
+</div>
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -7,7 +7,7 @@ export const app_thm = writable<ThemeKey>(`os`);
export const app_config = writable<boolean>(false);
export const app_render = writable<boolean>(false);
-export const app_lo = writable<AppLayoutKey>(`base`);
+export const app_layout = writable<AppLayoutKey>(`base`);
export const app_win = writable<[number, number]>([0, 0]);
export const app_nav_visible = writable<boolean>(false);
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+ import { goto } from "$app/navigation";
+ import Tabs from "$lib/components/tabs.svelte";
+ import { app_layout } from "$lib/stores";
+ import { type PropChildren } from "@radroots/svelte-lib";
+ let { children }: PropChildren = $props();
+
+ let tab_active = $state<number>(0);
+</script>
+
+{@render children()}
+<Tabs
+basis={{
+ tab_active,
+ app_layout: $app_layout,
+ list: [
+ {
+ icon: `house-line`,
+ callback: async (tab_i) => {
+ tab_active = tab_i;
+ await goto("/");
+ },
+ },
+ {
+ icon: `key`,
+ callback: async (tab_i) => {
+ tab_active = tab_i;
+ },
+ },
+ {
+ icon: `network`,
+ callback: async (tab_i) => {
+ tab_active = tab_i;
+ },
+ },
+ {
+ icon: `bell-simple`,
+ callback: async (tab_i) => {
+ tab_active = tab_i;
+ await goto("/settings");
+ },
+ },
+ ],
+}}
+/>
+
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
import { cl } from "$lib/client";
import LayoutWindow from "$lib/components/layout-window.svelte";
import { _cf } from "$lib/conf";
- import { app_config, app_key, app_lo, app_pwa_polyfills, app_render, app_sqlite, app_thc, app_thm, app_win } from "$lib/stores";
+ import { app_config, app_key, app_layout, app_pwa_polyfills, app_render, app_sqlite, app_thc, app_thm, app_win } from "$lib/stores";
import {
css_static as CssStatic,
sleep,
@@ -44,7 +44,7 @@
});
app_win.subscribe(([win_h, win_w]) => {
- if (win_h > 800) app_lo.set("lg");
+ if (win_h > 800) app_layout.set("lg");
});
app_thc.subscribe((app_thc) => {
@@ -101,3 +101,4 @@
</LayoutWindow>
{/if}
<CssStatic />
+<div class="hidden h-nav_base pt-h_nav_base pb-h_nav_base h-nav_lg pt-h_nav_lg pb-h_nav_lg h-tabs_base pt-h_tabs_base pb-h_tabs_base h-tabs_lg pt-h_tabs_lg pb-h_tabs_lg"></div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -6,6 +6,8 @@ const { fontFamily: tw_font } = tailwind_default;
const heights = {
line: `46px`,
+ tabs_base: `64px`,
+ tabs_lg: `88px`,
};
const widths = {
