commit 3ac9fb430441fb79cd5a1c77d03410292a59ccbd
parent 067486a7eeae8abffc2bc8adec7d26589a0a6fbf
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Thu, 3 Oct 2024 07:10:42 +0000
apps-lib: add style maps and css styles component, add glyph circle component, edit components, types, utils
Diffstat:
12 files changed, 89 insertions(+), 62 deletions(-)
diff --git a/apps-lib/src/lib/components/input_select.svelte b/apps-lib/src/lib/components/input_select.svelte
@@ -40,7 +40,7 @@
>
{#if basis.loading}
<div class={`flex flex-row w-full justify-center items-center`}>
- <Loading basis={{ dim: `xs-` }} />
+ <Loading basis={{ dim: `xs` }} />
</div>
{:else}
<select
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 GlyphCircle from "$lib/ui/glyph_circle.svelte";
import Loading from "$lib/ui/loading.svelte";
import type { ThemeLayer } from "@radroots/theme";
import {
@@ -14,7 +15,6 @@
let mod: ITrellisBasisOffsetMod = `sm`;
$: mod = basis && basis.mod ? basis.mod : `sm`;
- //min-w-[34px]
</script>
<div class={`flex flex-row h-full`}>
@@ -42,11 +42,25 @@
>
{#if mod.loading}
<Loading basis={{ blades: 6, dim: `xs` }} />
- {:else}
+ {:else if `glyph` in mod}
<Glyph
basis={{
- classes: `${fmt_cl(mod.classes ? `` : ``)} text-layer-${layer}-glyph`,
- ...mod,
+ classes: mod.glyph.classes
+ ? mod.glyph.classes
+ : `text-layer-${layer}-glyph`,
+ ...mod.glyph,
+ }}
+ />
+ {:else if `glyph_circle` in mod}
+ <GlyphCircle
+ basis={{
+ classes_wrap: mod.glyph_circle?.classes_wrap,
+ glyph: {
+ classes: mod.glyph_circle?.glyph?.classes
+ ? mod.glyph_circle?.glyph?.classes
+ : `text-layer-${layer}-glyph`,
+ ...mod.glyph_circle?.glyph,
+ },
}}
/>
{/if}
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -1,11 +1,12 @@
export * from "./locales/i18n";
export { default as SelectElement } from "./ui/select_element.svelte";
export { default as Toast } from "./ui/toast.svelte";
-export { default as CssDim } from "./ui/css_dim.svelte";
+export { default as GlyphCircle } from "./ui/glyph_circle.svelte";
export { default as CssStatic } from "./ui/css_static.svelte";
export { default as Divider } from "./ui/divider.svelte";
export { default as LabelSwap } from "./ui/label_swap.svelte";
export { default as Glyph } from "./ui/glyph.svelte";
+export { default as CssStyles } from "./ui/css_styles.svelte";
export { default as Loading } from "./ui/loading.svelte";
export { default as InputElement } from "./ui/input_element.svelte";
export { default as Fill } from "./ui/fill.svelte";
@@ -17,6 +18,7 @@ export * from "./stores/ndk";
export * from "./stores/client";
export * from "./utils/routes";
export * from "./utils/dom";
+export * from "./utils/styles";
export * from "./utils/ndk";
export * from "./utils/client";
export * from "./utils/time";
diff --git a/apps-lib/src/lib/types/trellis.ts b/apps-lib/src/lib/types/trellis.ts
@@ -1,5 +1,5 @@
import type { CallbackPromise, ICbGOpt, ICbOpt, ICbROpt, IClOpt, IGlOpt, ILabel, ILabelOpt, ILabelTup, ILy } from "./client";
-import type { GlyphKey, IGlyph, IInputElement } from "./ui";
+import type { GlyphKey, IGlyph, IGlyphCircle, IInputElement } from "./ui";
export type ITrellis = ILy &
IClOpt &
@@ -43,7 +43,7 @@ export type ITrellisStyles = {
};
export type ITrellisBasisOffsetModKey = 'sm' | 'glyph';
-export type ITrellisBasisOffsetMod = ITrellisBasisOffsetModKey | (IGlyph & {
+export type ITrellisBasisOffsetMod = ITrellisBasisOffsetModKey | (({ glyph: IGlyph } | { glyph_circle: IGlyphCircle }) & {
loading?: boolean;
});
diff --git a/apps-lib/src/lib/types/ui.ts b/apps-lib/src/lib/types/ui.ts
@@ -92,7 +92,11 @@ export type IGlyph = ICbOpt & {
weight?: GlyphWeight;
key: GlyphKey;
dim?: GeometryGlyphDimension;
- fill_under?: boolean;
+};
+
+export type IGlyphCircle = {
+ classes_wrap: string;
+ glyph: IGlyph
};
export type ILoadingBlades = 6 | 12;
diff --git a/apps-lib/src/lib/ui/css_dim.svelte b/apps-lib/src/lib/ui/css_dim.svelte
@@ -1,2 +0,0 @@
-<div class="h-[13px] w-[13px] h-[16px] w-[16px] h-[20px] w-[20px] h-[28px] w-[28px] h-[36px] w-[36px]"></div>
-<div class="text-[12px] text-[13px] text-[15px] text-[16px] text-[18px] text-[20px] text-[21px] text-[23px] text-[24px] text-[27px] text-[28px] text-[30px] text-[36px] text-[40px]"></div>
-\ No newline at end of file
diff --git a/apps-lib/src/lib/ui/css_styles.svelte b/apps-lib/src/lib/ui/css_styles.svelte
@@ -0,0 +1,2 @@
+<div class="h-[12px] w-[12px] h-[16px] w-[16px] h-[17px] w-[17px] h-[18px] w-[18px] h-[20px] w-[20px] h-[24px] w-[24px] h-[28px] w-[28px] h-[36px] w-[36px]"></div>
+<div class="text-[12px] text-[15px] text-[16px] text-[18px] text-[20px] text-[21px] text-[23px] text-[24px] text-[27px] text-[28px] text-[30px] text-[36px] text-[40px]"></div>
+\ No newline at end of file
diff --git a/apps-lib/src/lib/ui/glyph.svelte b/apps-lib/src/lib/ui/glyph.svelte
@@ -1,24 +1,7 @@
<script lang="ts">
- import type { GeometryGlyphDimension } from "../types/client";
+ import { fmt_cl } from "$lib/utils/client";
+ import { glyph_style_map } from "$lib/utils/styles";
import type { IGlyph } from "../types/ui";
- import { fmt_cl } from "../utils/client";
- import Fill from "./fill.svelte";
-
- type StyleMap = { gl_1: number; dim_2?: number };
- const style_map: Map<GeometryGlyphDimension, StyleMap> = new Map([
- ["xs--", { gl_1: 12 }],
- ["xs-", { gl_1: 13 }],
- ["xs", { gl_1: 15 }],
- ["xs+", { gl_1: 18 }],
- ["sm", { gl_1: 20 }],
- ["sm+", { gl_1: 21 }],
- ["md-", { gl_1: 23 }],
- ["md", { gl_1: 24 }],
- ["md+", { gl_1: 27 }],
- ["lg", { gl_1: 28 }],
- ["xl", { gl_1: 30 }],
- ["xl+", { gl_1: 40 }],
- ]);
export let basis: IGlyph;
$: basis = basis;
@@ -26,29 +9,16 @@
$: weight =
!basis?.weight || basis?.weight === `regular` ? `` : `-${basis.weight}`;
- $: styles = basis?.dim ? style_map.get(basis.dim) : style_map.get(`sm`);
+ $: styles = basis?.dim
+ ? glyph_style_map.get(basis.dim)
+ : glyph_style_map.get(`sm`);
</script>
<button
- class={`relative flex flex-col justify-center items-center transition-all`}
+ class={`${fmt_cl(basis.classes)} flex flex-col justify-center items-center text-[${styles?.gl_1}px] transition-all`}
on:click={async () => {
if (basis.callback) await basis.callback();
}}
>
- <div
- class={`${fmt_cl(basis.classes)} z-10 flex flex-row justify-start items-center text-[${styles?.gl_1}px]`}
- >
- <i class="ph{weight} ph-{basis.key}"></i>
- </div>
- {#if basis.fill_under && styles?.dim_2}
- <div
- class={`z-5 absolute top-0 left-0 flex flex-row w-full justify-center items-center`}
- >
- <div
- class={`flex flex-row h-[${styles?.dim_2}px] w-[${styles?.dim_2}px] justify-start items-center translate-y-[10px] bg-white/80 rounded-full`}
- >
- <Fill />
- </div>
- </div>
- {/if}
+ <i class={`ph${weight} ph-${basis.key}`}></i>
</button>
diff --git a/apps-lib/src/lib/ui/glyph_circle.svelte b/apps-lib/src/lib/ui/glyph_circle.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+ import { type IGlyphCircle, fmt_cl, Glyph, glyph_style_map } from "$lib";
+
+ export let basis: IGlyphCircle;
+
+ $: styles = basis?.glyph?.dim
+ ? glyph_style_map.get(basis?.glyph?.dim)
+ : glyph_style_map.get(`sm`);
+</script>
+
+{#if styles?.dim_1}
+ <div
+ class={`${fmt_cl(basis?.classes_wrap)} flex flex-col h-[${styles?.dim_1}px] w-[${styles?.dim_1}px] justify-center items-center rounded-full transition-all`}
+ >
+ <Glyph basis={basis?.glyph} />
+ </div>
+{/if}
diff --git a/apps-lib/src/lib/ui/loading.svelte b/apps-lib/src/lib/ui/loading.svelte
@@ -1,20 +1,12 @@
<script lang="ts">
- import { type ILoading, type ILoadingDimension } from "$lib";
-
- type StyleMap = { dim_1: number; gl_1: number };
- export const style_map: Map<ILoadingDimension, StyleMap> = new Map([
- ["glyph-send-button", { dim_1: 20, gl_1: 20 }],
- ["xs", { dim_1: 13, gl_1: 13 }],
- ["sm", { dim_1: 16, gl_1: 16 }],
- ["md", { dim_1: 20, gl_1: 20 }],
- ["lg", { dim_1: 28, gl_1: 28 }],
- ["xl", { dim_1: 36, gl_1: 36 }],
- ]);
+ import { type ILoading, loading_style_map } from "$lib";
export let basis: ILoading | undefined = undefined;
$: basis = basis;
- $: styles = basis?.dim ? style_map.get(basis?.dim) : style_map.get("sm");
+ $: styles = basis?.dim
+ ? loading_style_map.get(basis?.dim)
+ : loading_style_map.get("sm");
$: num_blades = basis?.blades || 12;
</script>
@@ -22,7 +14,7 @@
class={`relative flex flex-row justify-center items-center h-[${styles?.dim_1}px] w-[${styles?.dim_1}px] fade-in transition-all`}
>
<div
- class={`${num_blades === 12 ? `spinner12 center` : `spinner6 center`} text-[${styles?.gl_1 || styles?.dim_1}px]`}
+ class={`${num_blades === 12 ? `spinner12 center` : `spinner6 center`} text-[${styles?.gl_2 || styles?.dim_1}px]`}
>
<div
class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
diff --git a/apps-lib/src/lib/utils/routes.ts b/apps-lib/src/lib/utils/routes.ts
@@ -6,6 +6,7 @@ export type NavigationRoute =
| "/models/nostr-profile/edit/field"
| "/models/nostr-profile/view"
| "/models/nostr-relay"
+ | "/models/nostr-relay/view"
| "/models/trade-product"
| "/models/trade-product/add"
| "/models/trade-product/add/preview"
@@ -28,6 +29,7 @@ export function parse_route(route: string): NavigationRoute {
case "/models/nostr-profile/edit/field":
case "/models/nostr-profile/view":
case "/models/nostr-relay":
+ case "/models/nostr-relay/view":
case "/models/trade-product":
case "/models/trade-product/add":
case "/models/trade-product/add/preview":
diff --git a/apps-lib/src/lib/utils/styles.ts b/apps-lib/src/lib/utils/styles.ts
@@ -0,0 +1,25 @@
+import type { GeometryGlyphDimension, ILoadingDimension } from "$lib";
+
+export const glyph_style_map: Map<GeometryGlyphDimension, { gl_1: number; dim_1?: number; }> = new Map([
+ ["xs--", { gl_1: 12 }],
+ ["xs-", { gl_1: 12, dim_1: 17 }],
+ ["xs", { gl_1: 15, dim_1: 18 }],
+ ["xs+", { gl_1: 18, dim_1: 20 }],
+ ["sm", { gl_1: 20, dim_1: 24 }],
+ ["sm+", { gl_1: 21 }],
+ ["md-", { gl_1: 23 }],
+ ["md", { gl_1: 24 }],
+ ["md+", { gl_1: 27 }],
+ ["lg", { gl_1: 28 }],
+ ["xl", { gl_1: 30 }],
+ ["xl+", { gl_1: 40 }],
+]);
+
+export const loading_style_map: Map<ILoadingDimension, { dim_1: number; gl_2: number }> = new Map([
+ ["glyph-send-button", { dim_1: 20, gl_2: 20 }],
+ ["xs", { dim_1: 12, gl_2: 12 }],
+ ["sm", { dim_1: 16, gl_2: 16 }],
+ ["md", { dim_1: 20, gl_2: 20 }],
+ ["lg", { dim_1: 28, gl_2: 28 }],
+ ["xl", { dim_1: 36, gl_2: 36 }],
+]);
+\ No newline at end of file
