commit 32a71db51fa4c06f79f8695676b5d54a4ddb0af7
parent 98b9f5e3f45792d769666b574113adc3d80c59e0
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sat, 28 Sep 2024 09:08:17 +0000
apps-lib: edit ui style maps, add css dimensions, add locales
Diffstat:
6 files changed, 53 insertions(+), 29 deletions(-)
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -1,6 +1,7 @@
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 CssStatic } from "./ui/css_static.svelte";
export { default as Divider } from "./ui/divider.svelte";
export { default as LabelSwap } from "./ui/label_swap.svelte";
diff --git a/apps-lib/src/lib/locales/en/icu.json b/apps-lib/src/lib/locales/en/icu.json
@@ -1,4 +1,5 @@
{
+ "unconnected_*": "Unconnected {value}",
"connected_*": "Connected {value}",
"no_*_published": "No {value} published",
"*_as": "{value} as",
diff --git a/apps-lib/src/lib/types/ui.ts b/apps-lib/src/lib/types/ui.ts
@@ -1,4 +1,4 @@
-import type { CallbackPromiseGeneric, GeometryCardinalDirection, GeometryGlyphDimension, ICbGOpt, ICbOpt, IClOpt, IFormField, ILy, ILyOptTs } from "$lib";
+import type { CallbackPromiseGeneric, GeometryCardinalDirection, GeometryDimension, GeometryGlyphDimension, ICbGOpt, ICbOpt, IClOpt, IFormField, ILy, ILyOptTs } from "$lib";
import type { ThemeLayer } from "@radroots/theme";
export type GlyphKeyCurrency = `dollar` | `eur`;
@@ -91,11 +91,12 @@ export type IGlyph = ICbOpt & {
weight?: GlyphWeight;
key: GlyphKey;
dim?: GeometryGlyphDimension;
+ fill_under?: boolean;
};
export type ILoadingBlades = 6 | 12;
-export type ILoadingDimension = GeometryGlyphDimension | `glyph-send-button`;
+export type ILoadingDimension = GeometryDimension | `glyph-send-button`;
export type ILoading = {
classes?: string;
diff --git a/apps-lib/src/lib/ui/css_dim.svelte b/apps-lib/src/lib/ui/css_dim.svelte
@@ -0,0 +1,2 @@
+<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/glyph.svelte b/apps-lib/src/lib/ui/glyph.svelte
@@ -2,20 +2,22 @@
import type { GeometryGlyphDimension } from "../types/client";
import type { IGlyph } from "../types/ui";
import { fmt_cl } from "../utils/client";
+ import Fill from "./fill.svelte";
- const glyph_map: Map<GeometryGlyphDimension, string> = new Map([
- [`xs--`, `text-[12px]`],
- [`xs-`, `text-[13px]`],
- [`xs`, `text-[15px]`],
- [`xs+`, `text-[18px]`],
- [`sm`, `text-[20px]`],
- [`sm+`, `text-[21px]`],
- [`md-`, `text-[23px]`],
- [`md`, `text-[24px]`],
- [`md+`, `text-[27px]`],
- [`lg`, `text-[28px]`],
- [`xl`, `text-[30px]`],
- [`xl+`, `text-[40px]`],
+ 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;
@@ -24,14 +26,29 @@
$: weight =
!basis?.weight || basis?.weight === `regular` ? `` : `-${basis.weight}`;
- $: dimension = basis?.dim ? glyph_map.get(basis.dim) : glyph_map.get(`sm`);
+ $: styles = basis?.dim ? style_map.get(basis.dim) : style_map.get(`sm`);
</script>
<button
- class={`${fmt_cl(basis.classes)} flex flex-row justify-center items-center transition-all ${dimension}`}
+ class={`relative flex flex-col justify-center items-center transition-all`}
on:click={async () => {
if (basis.callback) await basis.callback();
}}
>
- <i class="ph{weight} ph-{basis.key}"></i>
+ <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}
</button>
diff --git a/apps-lib/src/lib/ui/loading.svelte b/apps-lib/src/lib/ui/loading.svelte
@@ -1,27 +1,28 @@
<script lang="ts">
- import { fmt_cl, type ILoading, type ILoadingDimension } from "$lib";
+ import { type ILoading, type ILoadingDimension } from "$lib";
- export const lm: Map<ILoadingDimension, [string, string]> = new Map([
- [`xl`, [`h-[36px] w-[36px]`, `text-[22px]`]],
- [`lg`, [`h-[32px] w-[32px]`, `text-[18px]`]],
- [`md`, [`h-[32px] w-[32px]`, `text-[18px]`]],
- [`sm`, [`h-[32px] w-[32px]`, `text-[18px]`]],
- [`xs`, [`h-[20px] w-[20px]`, `text-[16px]`]],
- [`glyph-send-button`, [`h-[20px] w-[20px]`, `text-[18px]`]],
+ 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 }],
]);
export let basis: ILoading | undefined = undefined;
$: basis = basis;
- $: dim = lm.get(basis?.dim || "sm");
+ $: styles = basis?.dim ? style_map.get(basis?.dim) : style_map.get("sm");
$: num_blades = basis?.blades || 12;
</script>
<div
- class={`relative flex flex-row justify-center items-center ${fmt_cl(dim?.[0])} fade-in transition-all`}
+ 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`} ${fmt_cl(dim?.[1])}`}
+ class={`${num_blades === 12 ? `spinner12 center` : `spinner6 center`} text-[${styles.gl_1 || styles.dim_1}px]`}
>
<div
class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
