commit 98b9f5e3f45792d769666b574113adc3d80c59e0
parent 0aa63e4da1df9f6a40d7eb933bb20e84631fad85
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Fri, 27 Sep 2024 19:17:05 +0000
apps-lib: edit trellis offset mod, edit nav option callback, edit label_swap classes, edit loading styles, edit toast styles
Diffstat:
8 files changed, 52 insertions(+), 22 deletions(-)
diff --git a/apps-lib/src/lib/components/nav_option.svelte b/apps-lib/src/lib/components/nav_option.svelte
@@ -3,13 +3,17 @@
import {
fmt_cl,
Glyph,
- LabelSwap,
Loading,
+ parse_layer,
type INavBasisOption,
} from "$lib";
+ let el_swap: HTMLLabelElement | null = null;
+
export let basis: INavBasisOption;
$: basis = basis;
+
+ $: layer = parse_layer(1);
</script>
{#if basis.loading}
@@ -20,9 +24,7 @@
<button
class={`group col-span-4 flex flex-row h-full pr-6 gap-2 justify-end items-center`}
on:click={async () => {
- //await basis.callback([classes_swap ? false : true, el_swap]);
- //if (classes_swap) classes_swap = ``;
- //else classes_swap = ` swap-active`;
+ await basis.callback(el_swap);
}}
>
{#if `glyph` in basis && basis.glyph}
@@ -35,7 +37,25 @@
{/if}
{#if `label` in basis && basis.label}
{#if `swap` in basis.label}
- <LabelSwap basis={basis.label} />
+ <label
+ bind:this={el_swap}
+ class={`swap${basis.label.swap.toggle ? ` swap-active` : ``}`}
+ >
+ <div class="swap-on">
+ <p
+ class={`${fmt_cl(basis.label.swap.on.classes || `text-navPrevious text-layer-${layer}-glyph-hl group-active:opacity-60`)} font-sans -translate-y-[1px] transition-all`}
+ >
+ {basis.label.swap.on.value}
+ </p>
+ </div>
+ <div class="swap-off">
+ <p
+ class={`${fmt_cl(basis.label.swap.off.classes || `text-navPrevious text-layer-${layer}-glyph-hl group-active:opacity-60`)} font-sans -translate-y-[1px] transition-all`}
+ >
+ {basis.label.swap.off.value}
+ </p>
+ </div>
+ </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
@@ -1,4 +1,5 @@
<script lang="ts">
+ import Loading from "$lib/ui/loading.svelte";
import type { ThemeLayer } from "@radroots/theme";
import {
Fill,
@@ -29,21 +30,26 @@
</div>
{:else if typeof mod === `object`}
<div
- class={`flex flex-row h-full min-w-[20px] w-trellisOffset justify-center items-center`}
+ class={`flex flex-row h-full min-w-[20px] w-trellisOffset justify-center items-center pr-2`}
>
<button
class={`fade-in pl-2 translate-x-[3px] translate-y-[1px]`}
on:click|preventDefault={async (ev) => {
- if (typeof basis !== `boolean` && basis?.callback)
+ if (mod.loading) return;
+ else if (typeof basis !== `boolean` && basis?.callback)
await basis.callback(ev);
}}
>
- <Glyph
- basis={{
- classes: `text-layer-${layer}-glyph ${fmt_cl(mod.classes ? `` : ``)}`,
- ...mod,
- }}
- />
+ {#if mod.loading}
+ <Loading basis={{ blades: 6, dim: `xs` }} />
+ {:else}
+ <Glyph
+ basis={{
+ classes: `${fmt_cl(mod.classes ? `` : ``)} text-layer-${layer}-glyph`,
+ ...mod,
+ }}
+ />
+ {/if}
</button>
</div>
{/if}
diff --git a/apps-lib/src/lib/locales/en/model_fields.json b/apps-lib/src/lib/locales/en/model_fields.json
@@ -28,6 +28,7 @@
"lud06": "LUD 06",
"lud16": "LUD 16",
"url": "",
+ "relay_id": "",
"description": "",
"pubkey": "",
"contact": "",
diff --git a/apps-lib/src/lib/types/components.ts b/apps-lib/src/lib/types/components.ts
@@ -81,7 +81,7 @@ export type IEnvelopeTitledBasis = {
};
export type INavBasisOption = ICbG<
- [boolean, HTMLLabelElement | null]
+ HTMLLabelElement | null
> & IGlOpt & ILabelOpt & {
loading?: boolean;
};
diff --git a/apps-lib/src/lib/types/trellis.ts b/apps-lib/src/lib/types/trellis.ts
@@ -43,7 +43,9 @@ export type ITrellisStyles = {
};
export type ITrellisBasisOffsetModKey = 'sm' | 'glyph';
-export type ITrellisBasisOffsetMod = ITrellisBasisOffsetModKey | IGlyph;
+export type ITrellisBasisOffsetMod = ITrellisBasisOffsetModKey | (IGlyph & {
+ loading?: boolean;
+});
export type ITrellisKind = (
| ITrellisKindTouch
diff --git a/apps-lib/src/lib/ui/label_swap.svelte b/apps-lib/src/lib/ui/label_swap.svelte
@@ -7,11 +7,13 @@
$: basis = basis;
$: layer = basis?.layer ? basis.layer : 1;
- $: classes_swap = basis.swap?.toggle ? ` swap-active` : ``;
</script>
<div class={`flex flex-row justify-start items-center`}>
- <label bind:this={el_swap} class={`swap${classes_swap}`}>
+ <label
+ bind:this={el_swap}
+ class={`swap${basis.swap.toggle ? ` swap-active` : ``}`}
+ >
<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`}
diff --git a/apps-lib/src/lib/ui/loading.svelte b/apps-lib/src/lib/ui/loading.svelte
@@ -6,7 +6,7 @@
[`lg`, [`h-[32px] w-[32px]`, `text-[18px]`]],
[`md`, [`h-[32px] w-[32px]`, `text-[18px]`]],
[`sm`, [`h-[32px] w-[32px]`, `text-[18px]`]],
- [`xs`, [`h-[32px] w-[32px]`, `text-[18px]`]],
+ [`xs`, [`h-[20px] w-[20px]`, `text-[16px]`]],
[`glyph-send-button`, [`h-[20px] w-[20px]`, `text-[18px]`]],
]);
diff --git a/apps-lib/src/lib/ui/toast.svelte b/apps-lib/src/lib/ui/toast.svelte
@@ -23,7 +23,7 @@
`simple`,
{
inner: `justify-center`,
- outer: `min-h-cover1 w-full px-4 rounded-2xl shadow-sm`,
+ outer: `min-h-toast_min w-full px-4 rounded-2xl shadow-sm`,
},
],
]);
@@ -33,8 +33,7 @@
let styles: IToastKind[] = basis.styles || [`simple`];
$: styles = styles;
- let layer = parse_layer(basis.layer || 1);
- $: layer = layer;
+ $: layer = basis.layer ? parse_layer(basis.layer) : 1;
$: layout = get_layout($app_layout);
</script>
@@ -46,7 +45,7 @@
class={`${fmt_cl(basis.classes)} relative grid grid-cols-12 h-max items-center justify-center ${styles.includes(`simple`) ? `bg-layer-${layer}-surface` : ``} ${fmt_cl(styles.map((style) => fmt_cl(lm.get(style)?.outer)).join(` `))}`}
>
<div
- class={`absolute top-0 left-4 flex flex-row h-full items-center`}
+ class={`absolute top-0 left-4 flex flex-row h-full items-center text-layer-${layer}-glyph`}
>
<Glyph
basis={{
