commit 1eebd22f9a8458418e58cd0a6a9d904a78168844
parent fd2833baf7cc281a8b987453e83a69e430e29a53
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sat, 5 Oct 2024 06:57:05 +0000
apps-lib: edit nav routing logic, edit nav option, edit layout trellis components, rename app config to app controls and move app config store assignment to `app`, add locales
Diffstat:
12 files changed, 87 insertions(+), 73 deletions(-)
diff --git a/apps-lib/src/lib/components/app_config.svelte b/apps-lib/src/lib/components/app_config.svelte
@@ -1,63 +0,0 @@
-<script lang="ts" context="module">
- const toast_ms = 1500;
-
- export const init_toast = (): void => {
- app_toast.set(false);
- };
-
- export const show_toast = async (opts: {
- args: IToast | string;
- callback?: CallbackPromise;
- }): Promise<void> => {
- try {
- const basis: IToast =
- typeof opts.args === `string`
- ? {
- layer: 1,
- label: {
- value: opts.args,
- },
- }
- : opts.args;
- app_toast.set(basis);
- await sleep(toast_ms);
- init_toast();
- if (opts.callback) await opts.callback();
- } catch (e) {
- console.log(`(error) show_toast `, e);
- }
- };
-</script>
-
-<script lang="ts">
- import {
- app_config,
- app_layout,
- app_toast,
- app_win,
- sleep,
- type CallbackPromise,
- type IToast,
- } from "$lib";
- import Toast from "$lib/ui/toast.svelte";
- import { onMount } from "svelte";
-
- onMount(async () => {
- try {
- app_win.set([window.innerHeight, window.innerWidth]);
- app_config.set(true);
- app_toast.set(false);
- } catch (e) {
- console.log(`(layout mount) `, e);
- } finally {
- }
- });
-
- app_win.subscribe(([win_h, win_w]) => {
- if (win_h > 800) app_layout.set("lg");
- });
-</script>
-
-{#if $app_toast}
- <Toast basis={$app_toast} />
-{/if}
diff --git a/apps-lib/src/lib/components/app_controls.svelte b/apps-lib/src/lib/components/app_controls.svelte
@@ -0,0 +1,61 @@
+<script lang="ts" context="module">
+ const toast_ms = 1500;
+
+ export const init_toast = (): void => {
+ app_toast.set(false);
+ };
+
+ export const show_toast = async (opts: {
+ args: IToast | string;
+ callback?: CallbackPromise;
+ }): Promise<void> => {
+ try {
+ const basis: IToast =
+ typeof opts.args === `string`
+ ? {
+ layer: 1,
+ label: {
+ value: opts.args,
+ },
+ }
+ : opts.args;
+ app_toast.set(basis);
+ await sleep(toast_ms);
+ init_toast();
+ if (opts.callback) await opts.callback();
+ } catch (e) {
+ console.log(`(error) show_toast `, e);
+ }
+ };
+</script>
+
+<script lang="ts">
+ import {
+ app_layout,
+ app_toast,
+ app_win,
+ sleep,
+ type CallbackPromise,
+ type IToast,
+ } from "$lib";
+ import Toast from "$lib/ui/toast.svelte";
+ import { onMount } from "svelte";
+
+ onMount(async () => {
+ try {
+ app_win.set([window.innerHeight, window.innerWidth]);
+ app_toast.set(false);
+ } catch (e) {
+ console.log(`(layout mount) `, e);
+ } finally {
+ }
+ });
+
+ app_win.subscribe(([win_h, win_w]) => {
+ if (win_h > 800) app_layout.set("lg");
+ });
+</script>
+
+{#if $app_toast}
+ <Toast basis={$app_toast} />
+{/if}
diff --git a/apps-lib/src/lib/components/layout_trellis.svelte b/apps-lib/src/lib/components/layout_trellis.svelte
@@ -6,7 +6,7 @@
</script>
<div
- class={`${fmt_cl(basis?.classes)} flex flex-col w-full pt-4 px-6 pb-12 gap-4 scroll-hide`}
+ class={`${fmt_cl(basis?.classes)} flex flex-col w-full pt-4 px-2 pb-12 gap-4 justify-center items-center scroll-hide`}
>
<slot />
</div>
diff --git a/apps-lib/src/lib/components/layout_trellis_line.svelte b/apps-lib/src/lib/components/layout_trellis_line.svelte
@@ -7,7 +7,7 @@
$: basis = basis;
</script>
-<div class={`flex flex-col w-full gap-1 justify-start items-start`}>
+<div class={`flex flex-col w-full gap-1 justify-start items-center`}>
<div class={`flex flex-row w-full px-2 gap-2 justify-start items-center`}>
{#if `value` in basis.label}
<p
@@ -28,7 +28,7 @@
>
{#if `value` in basis.notify.label}
<p
- class={`${fmt_cl(basis.notify.label.classes)} font-sans font-[600] uppercase text-layer-2-glyph/80 text-xs`}
+ class={`${fmt_cl(basis.notify.label.classes)} font-sans font-[500] uppercase text-layer-2-glyph/80 text-xs`}
>
{basis.notify.label.value}
</p>
diff --git a/apps-lib/src/lib/components/layout_view.svelte b/apps-lib/src/lib/components/layout_view.svelte
@@ -48,7 +48,6 @@
const scrollChange = (): void => {
if (Math.max(el?.scrollTop || 0, 0) > 10) nav_blur.set(true);
else nav_blur.set(false);
-
if (Math.max(el?.scrollTop || 0, 0) > 10) tabs_blur.set(true);
else tabs_blur.set(false);
};
diff --git a/apps-lib/src/lib/components/nav.svelte b/apps-lib/src/lib/components/nav.svelte
@@ -55,7 +55,10 @@
<button
class={`group col-span-4 flex flex-row h-full pl-2 justify-start items-center`}
on:click={async () => {
- if (basis.prev.callback) await basis.prev.callback();
+ if (basis.prev.prevent_route) {
+ await basis.prev.prevent_route.callback();
+ return;
+ } else if (basis.prev.callback) await basis.prev.callback();
let route_to =
typeof basis.prev.route === `string`
? basis.prev.route
diff --git a/apps-lib/src/lib/components/nav_option.svelte b/apps-lib/src/lib/components/nav_option.svelte
@@ -22,7 +22,7 @@
</div>
{:else}
<button
- class={`group col-span-4 flex flex-row h-full pr-6 gap-2 justify-end items-center`}
+ class={`${fmt_cl(basis.classes)} group col-span-4 flex flex-row h-full pr-6 justify-end items-center`}
on:click={async () => {
await basis.callback(el_swap);
}}
@@ -63,6 +63,16 @@
{basis.label.value}
</p>
{/if}
+ {#if `glyph` in basis.label && basis.label.glyph}
+ <Glyph
+ basis={{
+ key: basis.label.glyph.key,
+ classes: `text-layer-1-glyph-hl group-active:opacity-60 ${basis.label.glyph.classes}`,
+ weight: `bold`,
+ dim: `md`,
+ }}
+ />
+ {/if}
{/if}
</button>
{/if}
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -28,12 +28,12 @@ export { default as EnvelopeLower } from "./components/envelope_lower.svelte";
export { default as TrellisInput } from "./components/trellis_input.svelte";
export { default as TrellisEnd } from "./components/trellis_end.svelte";
export { default as Envelope } from "./components/envelope.svelte";
-export { default as AppConfig, init_toast, show_toast } from "./components/app_config.svelte";
export { default as LayoutTrellis } from "./components/layout_trellis.svelte";
export { default as Tabs } from "./components/tabs.svelte";
export { default as TrellisTitle } from "./components/trellis_title.svelte";
export { default as TrellisTouch } from "./components/trellis_touch.svelte";
export { default as Trellis } from "./components/trellis.svelte";
+export { default as AppControls, init_toast, show_toast } from "./components/app_controls.svelte";
export { default as TrellisRowDisplayValue } from "./components/trellis_row_display_value.svelte";
export { default as EnvelopeButtons } from "./components/envelope_buttons.svelte";
export { default as LayoutWindow } from "./components/layout_window.svelte";
diff --git a/apps-lib/src/lib/locales/en/common.json b/apps-lib/src/lib/locales/en/common.json
@@ -1,4 +1,5 @@
{
+ "list": "List",
"add_map_location": "Add map location",
"connect": "Connect",
"not_connected": "Not connected",
diff --git a/apps-lib/src/lib/locales/en/icu.json b/apps-lib/src/lib/locales/en/icu.json
@@ -1,4 +1,6 @@
{
+ "show_*": "Show {value}",
+ "invalid_*": "Invalid {value}",
"disconnect_*": "Disconnect {value}",
"connect_*": "Connect {value}",
"unconnected_*": "Unconnected {value}",
diff --git a/apps-lib/src/lib/types/components.ts b/apps-lib/src/lib/types/components.ts
@@ -80,7 +80,7 @@ export type IEnvelopeTitledBasis = {
}
};
-export type INavBasisOption = ICbG<
+export type INavBasisOption = IClOpt & ICbG<
HTMLLabelElement | null
> & IGlOpt & ILabelOpt & {
loading?: boolean;
@@ -89,6 +89,9 @@ export type INavBasis = {
prev: ICbOpt & {
label?: string;
route: NavigationRoute | [NavigationRoute, NavigationParamTuple[]];
+ prevent_route?: {
+ callback: CallbackPromise;
+ };
};
title?: ICbOpt & ILabel;
option?: INavBasisOption;
diff --git a/apps-lib/src/lib/utils/routes.ts b/apps-lib/src/lib/utils/routes.ts
@@ -11,7 +11,6 @@ export type NavigationRoute =
| "/models/nostr-relay/view"
| "/models/trade-product"
| "/models/trade-product/add"
- | "/models/trade-product/add/preview"
| "/nostr"
| "/nostr/keys"
| "/nostr/nip-99/view"
@@ -36,7 +35,6 @@ export function parse_route(route: string): NavigationRoute {
case "/models/nostr-relay/view":
case "/models/trade-product":
case "/models/trade-product/add":
- case "/models/trade-product/add/preview":
case "/nostr":
case "/nostr/keys":
case "/nostr/nip-99/view":
