commit e0ab8c67a77f46c6f889156da19706dbc07aae0f
parent 2827858c4ac0d11253e997155c2e6635d7ecdf15
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Thu, 3 Oct 2024 08:42:22 +0000
apps-lib: add envelope buttons component, add blur component, edit css styles, add stores, routes, locales, edit layout and trellis components
Diffstat:
11 files changed, 78 insertions(+), 10 deletions(-)
diff --git a/apps-lib/src/lib/components/envelope_buttons.svelte b/apps-lib/src/lib/components/envelope_buttons.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+ import type { CallbackPromise } from "$lib/types/client";
+ import { fmt_cl } from "$lib/utils/client";
+ import { quintInOut } from "svelte/easing";
+ import { fly } from "svelte/transition";
+
+ export let basis: {
+ visible: boolean;
+ buttons: {
+ classes?: string;
+ label: string;
+ callback: CallbackPromise;
+ }[];
+ };
+
+ $: basis = basis;
+</script>
+
+{#if basis.visible}
+ <div
+ in:fly={{ y: `100`, easing: quintInOut }}
+ out:fly={{ y: `100`, easing: quintInOut }}
+ class={`z-20 absolute bottom-0 left-0 flex flex-col w-full px-4 pb-4 gap-3 justify-start items-center`}
+ >
+ {#each basis.buttons as button}
+ <button
+ class={`flex flex-row h-envelope_button w-full justify-center items-center bg-layer-2-surface active:bg-layer-2-surface_a rounded-2xl`}
+ on:click={async () => {
+ await button.callback();
+ }}
+ >
+ <p class={`${fmt_cl(button.classes)} font-sans `}>
+ {button.label}
+ </p>
+ </button>
+ {/each}
+ </div>
+{/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`}
+ class={`${fmt_cl(basis?.classes)} flex flex-col w-full pt-4 px-6 pb-12 gap-4 scroll-hide`}
>
<slot />
</div>
diff --git a/apps-lib/src/lib/components/layout_window.svelte b/apps-lib/src/lib/components/layout_window.svelte
@@ -1,3 +1,7 @@
+<script>
+ import Blur from "$lib/ui/blur.svelte";
+</script>
+
<div
class={`relative flex flex-col h-[100vh] w-full overflow-x-hidden overflow-y-hidden bg-layer-0-surface`}
>
@@ -5,4 +9,5 @@
<slot />
</div>
<slot name="overlay" />
+ <Blur />
</div>
diff --git a/apps-lib/src/lib/components/trellis_offset.svelte b/apps-lib/src/lib/components/trellis_offset.svelte
@@ -30,7 +30,7 @@
</div>
{:else if typeof mod === `object`}
<div
- class={`flex flex-row h-full min-w-[20px] w-trellisOffset justify-center items-center pr-2`}
+ class={`flex flex-row h-full min-w-[20px] w-trellisOffset justify-center items-center pr-3`}
>
<button
class={`fade-in pl-2 translate-x-[3px] translate-y-[1px]`}
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -1,4 +1,5 @@
export * from "./locales/i18n";
+export { default as Blur } from "./ui/blur.svelte";
export { default as SelectElement } from "./ui/select_element.svelte";
export { default as Toast } from "./ui/toast.svelte";
export { default as GlyphCircle } from "./ui/glyph_circle.svelte";
@@ -34,6 +35,7 @@ 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 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";
export { default as LayoutTrellisLine } from "./components/layout_trellis_line.svelte";
export { default as NotifyGlyph } from "./components/notify_glyph.svelte";
diff --git a/apps-lib/src/lib/locales/en/common.json b/apps-lib/src/lib/locales/en/common.json
@@ -1,4 +1,10 @@
{
+ "disconnect": "Disconnect",
+ "connected": "Connected",
+ "connection": "Connection",
+ "description": "Description",
+ "authenticated": "Authenticated",
+ "relay": "Relay",
"update": "Update",
"status": "Status",
"relays": "Relays",
diff --git a/apps-lib/src/lib/locales/en/model_fields.json b/apps-lib/src/lib/locales/en/model_fields.json
@@ -29,11 +29,11 @@
"lud16": "LUD 16",
"url": "",
"relay_id": "",
- "description": "",
- "pubkey": "",
+ "description": "Relay Description",
+ "pubkey": "Relay Admin",
"contact": "",
- "supported_nips": "",
- "software": "",
- "version": "",
+ "supported_nips": "Supported NIPs",
+ "software": "Software",
+ "version": "Version",
"data": ""
}
\ No newline at end of file
diff --git a/apps-lib/src/lib/stores/client.ts b/apps-lib/src/lib/stores/client.ts
@@ -9,6 +9,7 @@ if (!kv_name) throw new Error('Error: VITE_PUBLIC_KV_NAME is required');
export const qp = queryParameters();
export const qp_nostr_pk = queryParam("nostr_pk");
export const qp_rkey = queryParam("rkey");
+export const qp_id = queryParam("id");
export let kv: Keyva;
if (typeof window !== 'undefined') kv = new Keyva({ name: kv_name });
@@ -20,6 +21,7 @@ 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 app_blur = writable<boolean>(false);
export const nav_visible = writable<boolean>(false);
export const nav_blur = writable<boolean>(false);
diff --git a/apps-lib/src/lib/ui/blur.svelte b/apps-lib/src/lib/ui/blur.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+ import { app_blur, Fill } from "$lib";
+</script>
+
+<div
+ class={`z-10 absolute top-0 left-0 modal modal-bottom ${$app_blur ? `modal-open` : ``} h-[100vh] w-full m-0 p-0 backdrop-blur-sm overflow-y-hidden transition-all`}
+>
+ <div
+ class={`modal-box h-full w-full m-0 p-0 bg-transparent overflow-hidden transition-all`}
+ >
+ <Fill />
+ </div>
+</div>
diff --git a/apps-lib/src/lib/ui/css_styles.svelte b/apps-lib/src/lib/ui/css_styles.svelte
@@ -1,2 +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
+<div class="hidden 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="hidden 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/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":
