diff --git a/README_guidelines.md b/README_guidelines.md new file mode 100644 index 00000000..9da30b14 --- /dev/null +++ b/README_guidelines.md @@ -0,0 +1,61 @@ +# One Sky IT's Aether App - UI and UX Guidelines and Rules + + +## General +### Events +#### layout header +#### layout footer + +### Journals +#### buttons +##### alert + +##### info + +##### priority, flag + +##### warning, hide +```css +variant-soft-warning hover:variant-filled-warning +``` +##### error, delete, disable +```css +variant-soft-error hover:variant-filled-error +``` +#### new root layout header +#### submenu +```css +flex flex-row items-center justify-center gap-1 +``` +#### new layout footer + + +## Svelte 5 and SvelteKit v2 (framework and routing) + + +## Tailwind 3.x CSS (styles) +Waiting to upgrade to 4.x when ShadCN is ready. ShadCN is still being worked on as of late March 2025. +* https://ui.shadcn.com/docs/tailwind-v4 + + +## ShadCN (Tailwind Components) +* https://github.com/shadcn-ui/ui + + +## Skeleton (Design System, Tailwind Components, Functional Components) + + +## Flowbite (Tailwind Components) + + +## Lucide Icons (SVG Icons) +* https://lucide.dev/icons/ + + +## Markdown +Using marked for Markdown parsing. +* https://marked.js.org/ + + +## Edra (TipTap based Rich Text Editor) +* https://edra.tsuzat.com/ diff --git a/package-lock.json b/package-lock.json index ec2f51d6..7b90b43c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ae-app-svelte5", - "version": "0.2.4", + "version": "0.2.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ae-app-svelte5", - "version": "0.2.4", + "version": "0.2.6", "dependencies": { "@floating-ui/dom": "^1.6.0", "@lucide/svelte": "^0.483.0", @@ -4319,9 +4319,9 @@ } }, "node_modules/immutable": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz", - "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.0.tgz", + "integrity": "sha512-L3LqPjnn4+m1ZNFBXo9QdXQhbfLwmcd+6IttT5hn821zDelhfaGLsVIEXJX0M5vJwc3NzA7zm1p5bFo8kDfn8A==", "dev": true, "license": "MIT" }, diff --git a/package.json b/package.json index 64d8f9e2..4a14f2d8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ae-app-svelte5", - "version": "0.2.4", + "version": "0.2.6", "private": true, "scripts": { "dev": "vite dev", diff --git a/src/lib/ae_core/ae_core_functions.ts b/src/lib/ae_core/ae_core_functions.ts index 9636572d..cf0425b5 100644 --- a/src/lib/ae_core/ae_core_functions.ts +++ b/src/lib/ae_core/ae_core_functions.ts @@ -84,7 +84,7 @@ async function handle_load_ae_obj_id__site_domain( let params = {}; - // ae_loc.hub.site_domain_id_qry_status = 'loading'; + // ae_sess.hub.site_domain_id_qry_status = 'loading'; ae_promises.load__site_domain_obj = api.get_ae_obj_id_crud({ api_cfg: api_cfg, no_account_id: no_account_id, diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts index 5329ac13..7c628df2 100644 --- a/src/lib/ae_stores.ts +++ b/src/lib/ae_stores.ts @@ -57,6 +57,8 @@ export let ae_app_local_data_struct: key_val = { ver_idb: '2024-10-16_1540', // Clear if date IndexedDB version name: 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)', theme: 'light', + theme_mode: 'light', + theme_name: 'wintry', // wintry iframe: false, title: `OSIT's Æ`, // - Dev SvelteKit`, // Æ @@ -112,6 +114,18 @@ export let ae_app_local_data_struct: key_val = { show_element__sql_qry_results: false, }, + app_cfg: { + show_element__access_type: true, + show_element__cfg: true, + show_element__cfg_detail: false, + show_opt__debug: true, + show_opt__permissions: true, + show_opt__reset: true, + show_opt__sync: true, + show_opt__theme: true, + show_opt__utilities: true, + }, + files: { processed_file_kv: {}, uploaded_file_kv: {}, @@ -233,6 +247,14 @@ export let ae_app_session_data_struct: key_val = { 'hub': { 'show_xyz': null, + 'account_id_qry_status': null, + 'event_badge_id_status_qry__search': null, + 'event_presenter_id_qry_status': null, + 'site_domain_id_qry_status': null, + 'sponsorship_id_qry_status': null, + 'sponsorship_cfg_id_qry_status': null, + + 'qr': {}, }, 'mod': { 'archives': {}, diff --git a/src/lib/element_access_type.svelte b/src/lib/element_access_type.svelte index 2e2f01ce..bce8e05f 100644 --- a/src/lib/element_access_type.svelte +++ b/src/lib/element_access_type.svelte @@ -122,14 +122,14 @@ function handle_check_access_type_passcode() { // WARNING 2024-08-21: For some reason the config element does not auto show or hide when the access type changes. if (!$ae_loc.iframe && $ae_loc.authenticated_access) { - $ae_loc.hub.show_element__access_type = true; - $ae_loc.hub.show_element__cfg = true; + $ae_loc.app_cfg.show_element__access_type = true; + $ae_loc.app_cfg.show_element__cfg = true; } else if ($ae_loc.iframe && $ae_loc.trusted_access) { - $ae_loc.hub.show_element__access_type = true; - $ae_loc.hub.show_element__cfg = true; + $ae_loc.app_cfg.show_element__access_type = true; + $ae_loc.app_cfg.show_element__cfg = true; } else { - $ae_loc.hub.show_element__access_type = true; - $ae_loc.hub.show_element__cfg = false; + $ae_loc.app_cfg.show_element__access_type = true; + $ae_loc.app_cfg.show_element__cfg = false; } // dispatch_access_type_changed(); diff --git a/src/lib/element_app_cfg.svelte b/src/lib/element_app_cfg.svelte index 1a2414e7..d426ed90 100644 --- a/src/lib/element_app_cfg.svelte +++ b/src/lib/element_app_cfg.svelte @@ -26,23 +26,23 @@ onMount(() => { } }); -// $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.hub?.theme_mode) { -// console.log(`$ae_loc.hub.theme_mode=${$ae_loc?.hub?.theme_mode}`); +// $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.app_cfg?.theme_mode) { +// console.log(`$ae_loc.app_cfg.theme_mode=${$ae_loc?.app_cfg?.theme_mode}`); // $slct_trigger = null; -// if ($ae_loc.hub.theme_mode == 'light') { +// if ($ae_loc.app_cfg.theme_mode == 'light') { // document.documentElement.classList.remove('dark'); // document.documentElement.classList.add('light'); -// } else if ($ae_loc.hub.theme_mode == 'dark') { +// } else if ($ae_loc.app_cfg.theme_mode == 'dark') { // document.documentElement.classList.remove('light'); // document.documentElement.classList.add('dark'); // } // } -// $: if ($slct_trigger == 'set_theme_name' && $ae_loc?.hub?.theme_name) { -// console.log(`$ae_loc?.hub?.theme_name=${$ae_loc?.hub?.theme_name}`); +// $: if ($slct_trigger == 'set_theme_name' && $ae_loc?.app_cfg?.theme_name) { +// console.log(`$ae_loc?.app_cfg?.theme_name=${$ae_loc?.app_cfg?.theme_name}`); // $slct_trigger = null; // // Update the body attribute named "data-theme" to the current theme name. -// document.body.setAttribute('data-theme', $ae_loc?.hub?.theme_name); +// document.body.setAttribute('data-theme', $ae_loc?.app_cfg?.theme_name); // } // $: if (entered_passcode && entered_passcode.length >= 5) { @@ -95,7 +95,7 @@ function handle_clear_storage(item: null|string) {
@@ -149,7 +149,7 @@ function handle_clear_storage(item: null|string) { on:change={() => { $slct_trigger = 'set_theme_mode'; }} - bind:group={$ae_loc.hub.theme_mode} + bind:group={$ae_loc.app_cfg.theme_mode} name="theme_light" value={'light'} > @@ -159,7 +159,7 @@ function handle_clear_storage(item: null|string) { on:change={() => { $slct_trigger = 'set_theme_mode'; }} - bind:group={$ae_loc.hub.theme_mode} + bind:group={$ae_loc.app_cfg.theme_mode} name="theme_dark" value={'dark'} > @@ -174,7 +174,7 @@ function handle_clear_storage(item: null|string) { on:change={() => { $slct_trigger = 'set_theme_name'; }} - bind:value={$ae_loc.hub.theme_name} + bind:value={$ae_loc.app_cfg.theme_name} class="select" title="Theme name" > @@ -269,7 +269,7 @@ function handle_clear_storage(item: null|string) {