commit 6d01b78c02db50f3f67b15c3e68b20d808707651
parent 8b0ef93ce96c36aa7fe8a8c358ad1194af83c5dc
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Wed, 13 Nov 2024 16:16:48 +0000
Add `/settings/nostr` route with photo hosting option select basis. Edit `/settings` add trellis option select to control color mode. Edit models routes. Add/edit styles.
Diffstat:
6 files changed, 252 insertions(+), 60 deletions(-)
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -71,7 +71,7 @@
},
},
{
- route: `/`,
+ route: `/settings/nostr`,
label: `Cooperatives`,
key: `users-three`,
},
diff --git a/src/routes/(app)/models/nostr-profile/+page.svelte b/src/routes/(app)/models/nostr-profile/+page.svelte
@@ -23,9 +23,8 @@
| `edit-profile-name`
| `add-profile-name`
| `delete-key`;
- type OptionsList = ISelectOption<OptionsListKey>;
const page_param: {
- options_list: OptionsList[];
+ options_list: ISelectOption<OptionsListKey>[];
} = {
options_list: [
{
diff --git a/src/routes/(app)/models/nostr-profile/view/+page.svelte b/src/routes/(app)/models/nostr-profile/view/+page.svelte
@@ -196,7 +196,7 @@
],
},
end: {
- icon: {
+ glyph: {
key: as_glyph_key(`caret-right`),
},
},
diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte
@@ -7,10 +7,11 @@
LayoutTrellis,
LayoutView,
Nav,
+ route,
t,
- toggle_color_mode,
Trellis,
} from "@radroots/svelte-lib";
+ import { parse_color_mode } from "@radroots/theme";
</script>
<LayoutView>
@@ -25,18 +26,53 @@
list: [
{
hide_active: true,
- touch: {
+ select: {
label: {
left: [
{
- value: `Toggle Color Mode (${toggle_color_mode($app_thc)})`,
+ value: `${$t(`common.color_mode`)}`,
classes: `capitalize`,
},
],
},
- callback: async () => {
- await haptics.impact();
- app_thc.set(toggle_color_mode($app_thc));
+ display: {
+ label: {
+ value: `${$app_thc}`,
+ classes: `capitalize`,
+ },
+ },
+ el: {
+ value: $app_thc,
+ options: [
+ {
+ entries: [
+ {
+ value: `~`,
+ label: `${$t(`icu.choose_*`, { value: `${$t(`common.color_mode`)}` })}`,
+ disabled: true,
+ },
+ {
+ value: `light`,
+ label: `${$t(`common.light`)}`,
+ },
+ {
+ value: `dark`,
+ label: `${$t(`common.dark`)}`,
+ },
+ ],
+ },
+ ],
+ callback: async ({ value }) => {
+ if (value)
+ app_thc.set(
+ parse_color_mode(value),
+ );
+ },
+ },
+ end: {
+ glyph: {
+ key: `caret-right`,
+ },
},
},
},
@@ -63,7 +99,7 @@
],
},
end: {
- icon: {
+ glyph: {
key: `caret-right`,
},
},
@@ -89,7 +125,7 @@
],
},
end: {
- icon: {
+ glyph: {
key: `caret-right`,
},
},
@@ -127,13 +163,33 @@
label: {
left: [
{
+ value: `Nostr Settings`,
+ classes: `capitalize`,
+ },
+ ],
+ },
+ end: {
+ glyph: {
+ key: `caret-right`,
+ },
+ },
+ callback: async () => {
+ await route(`/settings/nostr`);
+ },
+ },
+ },
+ {
+ touch: {
+ label: {
+ left: [
+ {
value: `Reset Device`,
classes: `capitalize`,
},
],
},
end: {
- icon: {
+ glyph: {
key: `caret-right`,
},
},
@@ -303,7 +359,7 @@
],
},
end: {
- icon: {
+ glyph: {
key: `caret-right`,
},
},
@@ -323,7 +379,7 @@
],
},
end: {
- icon: {
+ glyph: {
key: `caret-right`,
},
},
@@ -343,7 +399,7 @@
],
},
end: {
- icon: {
+ glyph: {
key: `caret-right`,
},
},
diff --git a/src/routes/(app)/settings/nostr/+page.svelte b/src/routes/(app)/settings/nostr/+page.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+ import { dialog } from "$lib/client";
+ import {
+ LayoutTrellis,
+ LayoutView,
+ Nav,
+ t,
+ Trellis,
+ type ISelectOption,
+ } from "@radroots/svelte-lib";
+ import { onMount } from "svelte";
+
+ const page_param: {
+ select_options: ISelectOption<string>[];
+ } = {
+ select_options: [
+ {
+ value: `~`,
+ label: `Choose photo hosting`,
+ disabled: true,
+ },
+ {
+ value: `*add`,
+ label: `${$t(`icu.add_*`, { value: `${$t(`common.endpoint`)}`.toLowerCase() })}`,
+ },
+ {
+ value: `^radroots`,
+ label: `https://radroots.net`,
+ },
+ ],
+ };
+
+ let nostr_photohosting_sel_val = ``;
+ let nostr_photohosting_sel_label = ``;
+
+ onMount(async () => {
+ try {
+ await init_page();
+ } catch (e) {
+ } finally {
+ }
+ });
+
+ const init_page = async (): Promise<void> => {
+ try {
+ nostr_photohosting_sel_val = `^radroots`; //@todo
+ } catch (e) {
+ console.log(`(error) init_page `, e);
+ }
+ };
+
+ $: nostr_photohosting_sel_label = nostr_photohosting_sel_val
+ ? page_param.select_options.filter(
+ (i) => i.value === nostr_photohosting_sel_val,
+ )?.[0].label
+ : ``;
+
+ const handle_select_option = async (
+ option_value: string,
+ ): Promise<void> => {
+ try {
+ if (!option_value.startsWith(`*`)) {
+ nostr_photohosting_sel_val = option_value;
+ return;
+ }
+ nostr_photohosting_sel_val = ``;
+
+ await dialog.alert(`@todo`); //@todo
+ nostr_photohosting_sel_val = `^radroots`;
+ } catch (e) {
+ console.log(`(error) handle_select_option `, e);
+ }
+ };
+</script>
+
+<LayoutView>
+ <LayoutTrellis>
+ <Trellis
+ basis={{
+ args: {
+ layer: 1,
+ list: [
+ {
+ hide_active: true,
+ select: {
+ label: {
+ left: [
+ {
+ value: `Photo Hosting`,
+ classes: `capitalize`,
+ },
+ ],
+ },
+ display: {
+ loading: !nostr_photohosting_sel_val,
+ label: {
+ value: nostr_photohosting_sel_label,
+ },
+ },
+ el: {
+ value: nostr_photohosting_sel_val,
+ options: [
+ {
+ entries: page_param.select_options,
+ },
+ ],
+ callback: async ({ value }) => {
+ await handle_select_option(value);
+ },
+ },
+ end: {
+ glyph: {
+ key: `caret-right`,
+ },
+ },
+ },
+ },
+ ],
+ },
+ }}
+ />
+ </LayoutTrellis>
+</LayoutView>
+<Nav
+ basis={{
+ prev: {
+ label: `Settings`,
+ route: `/settings`,
+ },
+ title: {
+ label: {
+ value: `${$t(`common.nostr`)}`,
+ },
+ },
+ }}
+/>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -7,7 +7,7 @@ import tailwind_default from "tailwindcss/defaultTheme";
const { fontFamily: tw_font } = tailwind_default;
const heights_form = {
- line: "46px",
+ line: `46px`,
};
const heights_responsive = {
@@ -29,7 +29,7 @@ const heights = {
touch_bold: `4.25rem`,
touch_guide: `3.4rem`,
line: `46px`,
- envelope_top: "56px",
+ envelope_top: `56px`,
toast_min: `56px`,
envelope_button: `50px`,
line_label: `1.75rem`
@@ -46,7 +46,7 @@ const widths = {
line: `320px`,
trellis_line: `349px`,
trellis_value: `180px`,
- trellis_display: `290px`,
+ trellis_display: `286px`,
};
const dimensions_responsive = {
@@ -72,37 +72,37 @@ const config: Config = {
mobile_base: { raw: `(orientation: portrait) and (max-height: ${wind.app.layout.mobile_base}px)` },
},
aspectRatio: {
- auto: 'auto',
- square: '1 / 1',
- video: '16 / 9',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
- 14: '14',
- 15: '15',
- 16: '16',
+ auto: `auto`,
+ square: `1 / 1`,
+ video: `16 / 9`,
+ 1: `1`,
+ 2: `2`,
+ 3: `3`,
+ 4: `4`,
+ 5: `5`,
+ 6: `6`,
+ 7: `7`,
+ 8: `8`,
+ 9: `9`,
+ 10: `10`,
+ 11: `11`,
+ 12: `12`,
+ 13: `13`,
+ 14: `14`,
+ 15: `15`,
+ 16: `16`,
},
extend: {
colors: {
...theme_colors,
- 'chart-green': 'var(--chart-color-green)',
- 'chart-red': 'var(--chart-color-red)',
+ 'chart-green': `var(--chart-color-green)`,
+ 'chart-red': `var(--chart-color-red)`,
},
fontFamily: {
- sans: ['SF Pro Rounded', ...tw_font.sans],
+ sans: [`SF Pro Rounded`, ...tw_font.sans],
serif: [...tw_font.serif],
mono: [...tw_font.mono],
- apercu: ['Apercu Mono Pro'],
+ apercu: [`Apercu Mono Pro`],
magda: [`Magda Text`],
lust: [`Lust`],
circ: [`Circular`],
@@ -113,21 +113,22 @@ const config: Config = {
},
fontSize: {
line_label: [`1.3rem`, { lineHeight: `1.3rem` }],
- trellisTitle: ["0.8rem", { lineHeight: "1rem", fontWeight: 200 }],
- trellisTitleNote: ["0.76rem", { lineHeight: "1rem", fontWeight: 200 }],
- line_display: ["1.05rem", { lineHeight: "1.33rem", fontWeight: 300 }],
- trellisLabel: ["0.8rem", { lineHeight: "1rem", fontWeight: 200 }],
- navPrevious: ["1.09rem", { lineHeight: "1.33rem", fontWeight: 400 }],
- navCurrent: ["1.09rem", { lineHeight: "1.33rem", fontWeight: 500 }],
- envelopeTitle: ["1.05rem", { lineHeight: "1.75rem", fontWeight: 600 }],
- envelopeTitlePrevious: ["1.02rem", { lineHeight: "1.75rem", fontWeight: 400 }],
- envelopeTitleAction: ["1.02rem", { lineHeight: "1.75rem", fontWeight: 500 }],
- envelopeButtonCancel: ["1.1rem", { lineHeight: "1.75rem", fontWeight: 600 }],
- envelopeButtonLabel: ["1.1rem", { lineHeight: "1.75rem", fontWeight: 500 }],
+ trellisTitle: [`0.8rem`, { lineHeight: `1rem`, fontWeight: 300 }],
+ trellisTitleNote: [`0.76rem`, { lineHeight: `1rem`, fontWeight: 200 }],
+ line_display: [`1.05rem`, { lineHeight: `1.33rem`, fontWeight: 400 }],
+ line_display_e: [`1.05rem`, { lineHeight: `1.33rem`, fontWeight: 500 }],
+ trellisLabel: [`0.8rem`, { lineHeight: `1rem`, fontWeight: 200 }],
+ navPrevious: [`1.09rem`, { lineHeight: `1.33rem`, fontWeight: 400 }],
+ navCurrent: [`1.09rem`, { lineHeight: `1.33rem`, fontWeight: 500 }],
+ envelopeTitle: [`1.05rem`, { lineHeight: `1.75rem`, fontWeight: 600 }],
+ envelopeTitlePrevious: [`1.02rem`, { lineHeight: `1.75rem`, fontWeight: 400 }],
+ envelopeTitleAction: [`1.02rem`, { lineHeight: `1.75rem`, fontWeight: 500 }],
+ envelopeButtonCancel: [`1.1rem`, { lineHeight: `1.75rem`, fontWeight: 600 }],
+ envelopeButtonLabel: [`1.1rem`, { lineHeight: `1.75rem`, fontWeight: 500 }],
},
gridTemplateColumns: {
- '16': 'repeat(16, minmax(0, 1fr))',
- '24': 'repeat(24, minmax(0, 1fr))',
+ '16': `repeat(16, minmax(0, 1fr))`,
+ '24': `repeat(24, minmax(0, 1fr))`,
},
height: {
...heights,
@@ -163,13 +164,13 @@ const config: Config = {
...Object.fromEntries(Object.entries(dimensions).map(([k, v]) => [`dim_${k}`, v])),
},
borderWidth: {
- "line": `1px`,
- "edge": `2px`
+ line: `1px`,
+ edge: `2px`
},
borderRadius: {
- input_form: "8px",
- entry: "1.05rem",
- touch: "1.25rem"
+ input_form: `8px`,
+ entry: `1.05rem`,
+ touch: `1.25rem`
},
}
},
