commit f741d68439773f511749eaf87433fa1ac7796574 parent 5a346fa792d229459e7ea94ea842ad6b9d60c5cc Author: triesap <137732411+triesap@users.noreply.github.com> Date: Fri, 27 Sep 2024 08:09:02 +0000 apps-lib: edit label type, edit label_swap ui, add locales, stores Diffstat:
16 files changed, 185 insertions(+), 137 deletions(-)
diff --git a/apps-lib/src/lib/components/layout_trellis_line.svelte b/apps-lib/src/lib/components/layout_trellis_line.svelte @@ -9,11 +9,13 @@ <div class={`flex flex-col w-full gap-1 justify-start items-start`}> <div class={`flex flex-row w-full px-2 gap-2 justify-start items-center`}> - <p - class={`${fmt_cl(basis.label.classes)} font-sans font-[400] uppercase text-layer-2-glyph text-sm`} - > - {basis.label.value} - </p> + {#if `value` in basis.label} + <p + class={`${fmt_cl(basis.label.classes)} font-sans font-[400] uppercase text-layer-2-glyph text-sm`} + > + {basis.label.value} + </p> + {/if} {#if basis.notify} <div class={`${fmt_cl(basis.notify.classes)} flex flex-row justify-start items-center fade-in transition-all`} @@ -24,11 +26,13 @@ await basis.notify?.callback(); }} > - <p - class={`${fmt_cl(basis.notify.label.classes)} font-sans font-[600] uppercase text-layer-2-glyph/80 text-xs`} - > - {basis.notify.label.value} - </p> + {#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`} + > + {basis.notify.label.value} + </p> + {/if} </button> </div> {/if} diff --git a/apps-lib/src/lib/components/nav.svelte b/apps-lib/src/lib/components/nav.svelte @@ -25,7 +25,8 @@ onMount(async () => { try { nav_visible.set(true); - if ($nav_prev.length) nav_prev_label = $nav_prev[0].label || ``; + if ($nav_prev.length) + nav_prev_label = $nav_prev[$nav_prev.length - 1].label || ``; } catch (e) { } finally { } @@ -102,11 +103,13 @@ await basis.title.callback(); }} > - <p - class={`${fmt_cl(basis.title.label.classes)} font-sans text-navCurrent text-layer-1-glyph`} - > - {basis.title.label.value} - </p> + {#if `value` in basis.title.label} + <p + class={`${fmt_cl(basis.title.label.classes)} font-sans text-navCurrent text-layer-1-glyph`} + > + {basis.title.label.value} + </p> + {/if} </button> {:else} <Fill /> diff --git a/apps-lib/src/lib/components/nav_option.svelte b/apps-lib/src/lib/components/nav_option.svelte @@ -1,6 +1,12 @@ <!-- svelte-ignore a11y-label-has-associated-control --> <script lang="ts"> - import { fmt_cl, Glyph, Loading, type INavBasisOption } from "$lib"; + import { + fmt_cl, + Glyph, + LabelSwap, + Loading, + type INavBasisOption, + } from "$lib"; let el_swap: HTMLLabelElement | null = null; @@ -10,6 +16,25 @@ $: classes_swap = ``; let layer = 1; + + /* +<label bind:this={el_swap} class={`swap${classes_swap}`}> + <div class="swap-off"> + <p + class={`${fmt_cl(basis.label.classes)} font-sans text-navPrevious text-layer-${layer}-glyph-hl -translate-y-[1px] transition-all`} + > + {basis.label.swap.value_on} + </p> + </div> + <div class="swap-on"> + <p + class={`${fmt_cl(basis.label.classes)} font-sans text-navPrevious text-layer-${layer}-glyph-hl group-active:opacity-60 -translate-y-[1px] transition-all`} + > + {basis.label.swap.value_off} + </p> + </div> + </label> + */ </script> {#if basis.loading} @@ -35,22 +60,7 @@ {/if} {#if `label` in basis && basis.label} {#if `swap` in basis.label} - <label bind:this={el_swap} class={`swap${classes_swap}`}> - <div class="swap-off"> - <p - class={`${fmt_cl(basis.label.classes)} font-sans text-navPrevious text-layer-${layer}-glyph-hl -translate-y-[1px] transition-all`} - > - {basis.label.swap.value_on} - </p> - </div> - <div class="swap-on"> - <p - class={`${fmt_cl(basis.label.classes)} font-sans text-navPrevious text-layer-${layer}-glyph-hl group-active:opacity-60 -translate-y-[1px] transition-all`} - > - {basis.label.swap.value_off} - </p> - </div> - </label> + <LabelSwap basis={basis.label} /> {:else if `value` in basis.label} <p class={`${fmt_cl(basis.label.classes)} font-sans text-navPrevious text-layer-1-glyph-hl group-active:opacity-60 transition-opacity`} diff --git a/apps-lib/src/lib/components/trellis_offset.svelte b/apps-lib/src/lib/components/trellis_offset.svelte @@ -8,46 +8,43 @@ type ITrellisBasisOffsetMod, } from ".."; - export let basis: ITrellisBasisOffset | undefined; + export let basis: ITrellisBasisOffset | undefined = undefined; export let layer: ThemeLayer; let mod: ITrellisBasisOffsetMod = `sm`; $: mod = basis && basis.mod ? basis.mod : `sm`; + //min-w-[34px] </script> -{#if mod !== `none`} - <div class={`flex flex-row h-full min-w-[34px]`}> - {#if mod === `sm`} - <div class={`${fmt_cl(``)} flex flex-row h-full w-[22px]`}> +<div class={`flex flex-row h-full`}> + {#if mod === `sm`} + <div class={`${fmt_cl(``)} flex flex-row h-full w-[22px]`}> + <Fill /> + </div> + {:else if mod === `glyph`} + <div class={`flex flex-row pr-[2px]`}> + <div class={`${fmt_cl(``)} flex flex-row h-full w-trellisOffset`}> <Fill /> </div> - {:else if mod === `glyph`} - <div class={`flex flex-row pr-[2px]`}> - <div - class={`${fmt_cl(``)} flex flex-row h-full w-trellisOffset`} - > - <Fill /> - </div> - </div> - {:else if typeof mod === `object`} - <div - class={`flex flex-row h-full min-w-[20px] w-trellisOffset justify-center items-center`} + </div> + {:else if typeof mod === `object`} + <div + class={`flex flex-row h-full min-w-[20px] w-trellisOffset justify-center items-center`} + > + <button + class={`fade-in pl-2 translate-x-[3px] translate-y-[1px]`} + on:click|preventDefault={async (ev) => { + if (typeof basis !== `boolean` && basis?.callback) + await basis.callback(ev); + }} > - <button - class={`fade-in pl-2 translate-x-[3px] translate-y-[1px]`} - on:click|preventDefault={async (ev) => { - if (typeof basis !== `boolean` && basis?.callback) - await basis.callback(ev); + <Glyph + basis={{ + classes: `text-layer-${layer}-glyph ${fmt_cl(mod.classes ? `` : ``)}`, + ...mod, }} - > - <Glyph - basis={{ - classes: `text-layer-${layer}-glyph ${fmt_cl(mod.classes ? `` : ``)}`, - ...mod, - }} - /> - </button> - </div> - {/if} - </div> -{/if} + /> + </button> + </div> + {/if} +</div> diff --git a/apps-lib/src/lib/components/trellis_row_display_value.svelte b/apps-lib/src/lib/components/trellis_row_display_value.svelte @@ -31,10 +31,12 @@ }} /> {:else if basis.label} - <p - class={`${fmt_cl(basis.label.classes)} font-sans text-trellisLine line-clamp-1 ${get_label_classes(layer, basis.label.kind, hide_active)} transition-all`} - > - {basis.label.value} - </p> + {#if `value` in basis.label} + <p + class={`${fmt_cl(basis.label.classes)} font-sans text-trellisLine line-clamp-1 ${get_label_classes(layer, basis.label.kind, hide_active)} transition-all`} + > + {basis.label.value} + </p> + {/if} {/if} </button> diff --git a/apps-lib/src/lib/components/trellis_row_label.svelte b/apps-lib/src/lib/components/trellis_row_label.svelte @@ -8,12 +8,14 @@ export let hide_active: boolean; </script> -<div class={`flex flex-row h-full w-full items-center justify-between`}> +<div + class={`flex flex-row h-full w-trellis_display items-center justify-between`} +> {#if basis.left && basis.left.length} - <div class={`flex flex-row h-full w-content items-center`}> + <div class={`flex flex-row h-full items-center truncate`}> {#each basis.left as title_l} <div - class={`${fmt_cl(title_l.classes_wrap)} flex flex-row h-full max-w-fit items-center ${title_l.hide_truncate ? `` : `truncate`}`} + class={`${fmt_cl(title_l.classes_wrap)} flex flex-row h-full items-center ${title_l.hide_truncate ? `` : `truncate`}`} > {#if title_l.glyph} <div @@ -22,11 +24,13 @@ <Glyph basis={{ ...title_l.glyph }} /> </div> {/if} - <p - class={`${fmt_cl(title_l.classes)} ${get_label_classes(layer, title_l.kind, hide_active)} ${title_l.hide_truncate ? `` : `truncate`} font-sans text-trellisLine transition-all`} - > - {title_l.value || ``} - </p> + {#if `value` in title_l} + <p + class={`${fmt_cl(title_l.classes)} ${get_label_classes(layer, title_l.kind, hide_active)} ${title_l.hide_truncate ? `` : `truncate`} font-sans text-trellisLine transition-all`} + > + {title_l.value || ``} + </p> + {/if} </div> {/each} </div> @@ -37,16 +41,18 @@ > {#each basis.right.reverse() as title_r} <div - class={`${fmt_cl(title_r.classes_wrap)} flex flex-row h-full max-w-trellis_value gap-1 items-center ${title_r.hide_truncate ? `` : `truncate`}`} + class={`${fmt_cl(title_r.classes_wrap)} flex flex-row h-full w-trellis_value gap-1 items-center ${title_r.hide_truncate ? `` : `truncate`}`} > {#if title_r.glyph} <Glyph basis={{ ...title_r.glyph }} /> {/if} - <p - class={`${fmt_cl(title_r.classes)} ${get_label_classes(layer, title_r.kind, hide_active)} ${title_r.hide_truncate ? `` : `truncate`} font-sans text-trellisLine transition-all`} - > - {title_r.value || ``} - </p> + {#if `value` in title_r} + <p + class={`${fmt_cl(title_r.classes)} ${get_label_classes(layer, title_r.kind, hide_active)} ${title_r.hide_truncate ? `` : `truncate`} font-sans text-trellisLine transition-all`} + > + {title_r.value || ``} + </p> + {/if} </div> {/each} </div> diff --git a/apps-lib/src/lib/components/trellis_title.svelte b/apps-lib/src/lib/components/trellis_title.svelte @@ -1,6 +1,7 @@ <script lang="ts"> import Fill from "$lib/ui/fill.svelte"; import Glyph from "$lib/ui/glyph.svelte"; + import LabelSwap from "$lib/ui/label_swap.svelte"; import type { ThemeLayer } from "@radroots/theme"; import { fmt_cl, type ITrellisTitle } from ".."; @@ -38,11 +39,15 @@ }} > {#if basis.link.label} - <p - class={`${fmt_cl(basis.link.label.classes)} font-sans text-trellisTitle uppercase fade-in`} - > - {basis.link.label.value || ``} - </p> + {#if `swap` in basis.link.label} + <LabelSwap basis={basis.link.label} /> + {:else} + <p + class={`${fmt_cl(basis.link.label.classes)} font-sans text-trellisTitle uppercase fade-in`} + > + {basis.link.label.value || ``} + </p> + {/if} {/if} {#if basis.link.glyph} <div class={`flex flex-row w-max`}> diff --git a/apps-lib/src/lib/components/trellis_touch.svelte b/apps-lib/src/lib/components/trellis_touch.svelte @@ -24,7 +24,7 @@ }} > <div - class={`flex flex-row h-full w-full justify-between items-center ${basis.end ? `pr-2` : ``}`} + class={`flex flex-row h-full justify-between items-center ${basis.end ? `pr-2` : ``}`} > <TrellisRowLabel basis={basis.label} {layer} {hide_active} /> {#if basis.display} diff --git a/apps-lib/src/lib/locales/en/common.json b/apps-lib/src/lib/locales/en/common.json @@ -1,4 +1,8 @@ { + "update": "Update", + "status": "Status", + "relays": "Relays", + "secret_key": "Secret key", "done": "Done", "unlock": "Unlock", "nsec": "Nsec", diff --git a/apps-lib/src/lib/locales/en/icu.json b/apps-lib/src/lib/locales/en/icu.json @@ -1,16 +1,21 @@ { - "your": "Your {value}", - "nostr": "Nostr {value}", - "invalid_entry": "Invalid {value} entry", - "enter_new": "Enter new {value}", - "enter": "Enter {value}", - "post": "Post {value}", - "no": "No {value}", - "delete": "Delete {value}", - "set_as": "Set as {value}", - "add": "Add {value}", - "add_a": "Add a {value}", - "edit": "Edit {value}", - "view": "View {value}", - "available": "{value} Available" + "connected_*": "Connected {value}", + "no_*_published": "No {value} published", + "*_as": "{value} as", + "as_*": "As {value}", + "*_copied": "{value} copied", + "your_*": "Your {value}", + "nostr_*": "Nostr {value}", + "invalid_*_entry": "Invalid {value} entry", + "enter_new_*": "Enter new {value}", + "enter_*": "Enter {value}", + "post_*": "Post {value}", + "no_*": "No {value}", + "delete_*": "Delete {value}", + "set_as_*": "Set as {value}", + "add_*": "Add {value}", + "add_a_*": "Add a {value}", + "edit_*": "Edit {value}", + "view_*": "View {value}", + "*_available": "{value} Available" } \ No newline at end of file diff --git a/apps-lib/src/lib/stores/client.ts b/apps-lib/src/lib/stores/client.ts @@ -19,6 +19,7 @@ export const app_render = writable<boolean>(false); export const app_win = writable<[number, number]>([0, 0]); export const app_notify = writable<string>(``); export const app_toast = writable<IToast | false>(false); +export const app_submit_route = writable<NavigationPreviousParam | undefined>(undefined); export const nav_visible = writable<boolean>(false); export const nav_blur = writable<boolean>(false); diff --git a/apps-lib/src/lib/types/client.ts b/apps-lib/src/lib/types/client.ts @@ -126,10 +126,13 @@ export type ILabelTupFields = { }; export type ILableFieldsSwap = { - on?: boolean; - value_on: string; - value_off: string; - + toggle: boolean; + on: IClOpt & { + value: string; + }, + off: IClOpt & { + value: string; + }, }; export type ILabelSwap = { diff --git a/apps-lib/src/lib/types/trellis.ts b/apps-lib/src/lib/types/trellis.ts @@ -42,7 +42,7 @@ export type ITrellisStyles = { set_default_background?: boolean; }; -export type ITrellisBasisOffsetModKey = 'none' | 'sm' | 'glyph'; +export type ITrellisBasisOffsetModKey = 'sm' | 'glyph'; export type ITrellisBasisOffsetMod = ITrellisBasisOffsetModKey | IGlyph; export type ITrellisKind = ( @@ -80,7 +80,6 @@ export type ITrellisKindDisplayValueIcon = { }; }; - export type ITrellisKindTouch = ITrellisBasis & { touch: ITrellisBasisTouch; }; diff --git a/apps-lib/src/lib/ui/input_element.svelte b/apps-lib/src/lib/ui/input_element.svelte @@ -13,6 +13,7 @@ onMount(async () => { try { + console.log(JSON.stringify(basis, null, 4), `basis`); if (basis.id) { if (basis.sync_init) await kv.set( @@ -21,10 +22,10 @@ ? basis.sync_init : ``, ); - else if (basis.sync) { + if (basis.sync) { const kv_val = await kv.get(basis.id); if (kv_val) el.value = kv_val; - await kv.set(basis.id, kv_val || ``); + else await kv.set(basis.id, ``); } } if (basis.on_mount) await basis.on_mount(el); diff --git a/apps-lib/src/lib/ui/label_swap.svelte b/apps-lib/src/lib/ui/label_swap.svelte @@ -1,28 +1,34 @@ <!-- svelte-ignore a11y-label-has-associated-control --> <script lang="ts"> - import { fmt_cl, type IClOpt, type ILabelSwap, type ILyOpt } from "$lib"; + import { fmt_cl, type ILabelSwap, type ILyOpt } from "$lib"; export let el_swap: HTMLLabelElement | null = null; - export let basis: IClOpt & ILabelSwap & ILyOpt & {}; + export let basis: ILabelSwap & ILyOpt; $: basis = basis; $: layer = basis?.layer ? basis.layer : 1; - $: classes_swap = basis.swap?.on ? ` swap-active` : ``; + $: classes_swap = basis.swap?.toggle ? ` swap-active` : ``; + + $: { + console.log(`classes_swap `, classes_swap); + } </script> -<label bind:this={el_swap} class={`swap${classes_swap}`}> - <div class="swap-off"> - <p - class={`${fmt_cl(basis.classes)} font-sans text-navPrevious text-layer-${layer}-glyph-hl -translate-y-[1px] transition-all`} - > - {basis.swap.value_off} - </p> - </div> - <div class="swap-on"> - <p - class={`${fmt_cl(basis.classes)} font-sans text-navPrevious text-layer-${layer}-glyph-hl group-active:opacity-60 -translate-y-[1px] transition-all`} - > - {basis.swap.value_on} - </p> - </div> -</label> +<div class={`flex flex-row justify-start items-center`}> + <label bind:this={el_swap} class={`swap${classes_swap}`}> + <div class="swap-on"> + <p + class={`${fmt_cl(basis.swap.on.classes || `text-navPrevious text-layer-${layer}-glyph-hl group-active:opacity-60`)} font-sans -translate-y-[1px] transition-all`} + > + {basis.swap.on.value} + </p> + </div> + <div class="swap-off"> + <p + class={`${fmt_cl(basis.swap.off.classes || `text-navPrevious text-layer-${layer}-glyph-hl group-active:opacity-60`)} font-sans -translate-y-[1px] transition-all`} + > + {basis.swap.off.value} + </p> + </div> + </label> +</div> diff --git a/apps-lib/src/lib/ui/toast.svelte b/apps-lib/src/lib/ui/toast.svelte @@ -60,11 +60,13 @@ <div class={`col-span-12 flex flex-row pl-1 ${fmt_cl(styles.map((style) => fmt_cl(lm.get(style)?.inner)).join(` `))}`} > - <p - class={`font-sans font-[500] truncate text-layer-${layer}-glyph -translate-y-[1px]`} - > - {basis.label.value} - </p> + {#if `value` in basis.label} + <p + class={`font-sans font-[500] truncate text-layer-${layer}-glyph -translate-y-[1px]`} + > + {basis.label.value} + </p> + {/if} </div> </div> </div>