Bug fixes. Style setting improvements.

src/lib/ae_stores.ts

@@ -56,7 +56,9 @@ export let ae_app_local_data_struct: key_val = {
 
     'ds': {},
     'hub': {
-        'show_xyz': 'abc',
+        'show_cfg': false,
+        'theme_mode': 'dark',
+        'theme_name': 'wintry',
     },
     'mod': {
         'archives': {},
@@ -85,6 +87,8 @@ export let ae_app_local_data_struct: key_val = {
             show_list__sponsorship_obj_li: true,
             show_view__sponsorship_obj: false,
             disable_submit__sponsorship_obj: false,
+
+            submit_status: null, // 'saving', 'created', 'updated'
         },
 
         'testing': {},

src/lib/element_app_cfg.svelte

@@ -1,20 +1,49 @@
 <script lang="ts">
 import { createEventDispatcher, onMount, tick } from 'svelte';
+import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
 
 import { ae_util } from '$lib/ae_utils';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 
 let notes: null|string = null;
 let all: boolean = false;
-let trigger: null|string = null;
+
+export let theme_mode: null|string = null;
+export let set_theme_mode: null|boolean = null;
+export let theme_name: null|string = null;
+export let set_theme_name: null|boolean = null;
 
 const dispatch = createEventDispatcher();
 
 
 onMount(() => {
     console.log('** Element Mounted: ** Element App Config');
+    if (set_theme_mode) {
+        $slct_trigger = 'set_theme_mode';
+    }
+    if (set_theme_name) {
+        $slct_trigger = 'set_theme_name';
+    }
 });
 
+$: if ($slct_trigger == 'set_theme_mode' && $ae_loc.hub.theme_mode) {
+    console.log(`$ae_loc.hub.theme_mode=${$ae_loc.hub.theme_mode}`);
+    $slct_trigger = null;
+    if ($ae_loc.hub.theme_mode == 'light') {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.classList.add('light');
+    } else if ($ae_loc.hub.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}`);
+    $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);
+}
 
 // $: if (entered_passcode && entered_passcode.length >= 5) {
 //     console.log(`entered_passcode=${entered_passcode}`);
@@ -62,6 +91,13 @@ function dispatch_something_changed() {
 
 
 <section id="AE-App-Cfg" class="ae_app_cfg transition duration-300 delay-150 hover:delay-300 hover:transition-all hidden-print">
+
+<div
+    class="ae_cfg_content"
+    class:hidden={!$ae_loc.hub.show_cfg}
+    >
+
+    <div>
     {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
         {#if $ae_loc.access_type == 'super'}
             <span class="fas fa-secret"></span> Super Access
@@ -80,7 +116,7 @@ function dispatch_something_changed() {
         {/if}
 
         <button
-            class="btn btn-sm access_type_lock_btn hover:transition-all"
+            class="btn btn-sm variant-soft-secondary access_type_lock_btn hover:transition-all"
             on:click={() => {
                 handle_clear_access();
             }}
@@ -91,11 +127,76 @@ function dispatch_something_changed() {
     {:else}
         Not logged in
     {/if}
+    </div>
+
+    <div>
+        Theme:
+    <div>
+    <!-- Light/Dark Theme: -->
+    <RadioGroup
+        active="variant-soft"
+        hover="hover:variant-ringed-primary"
+        >
+        <RadioItem
+            on:change={() => {
+                $slct_trigger = 'set_theme_mode';
+            }}
+            bind:group={$ae_loc.hub.theme_mode}
+            name="theme_light"
+            value={'light'}
+            >
+            Light
+        </RadioItem>
+        <RadioItem
+            on:change={() => {
+                $slct_trigger = 'set_theme_mode';
+            }}
+            bind:group={$ae_loc.hub.theme_mode}
+            name="theme_dark"
+            value={'dark'}
+            >
+            Dark
+        </RadioItem>
+    </RadioGroup>
+    </div>
+
+    <div>
+    <!-- Theme Name: -->
+    <select
+        on:change={() => {
+            $slct_trigger = 'set_theme_name';
+        }}
+        bind:value={$ae_loc.hub.theme_name}
+        class="select"
+        title="Theme name"
+        >
+        <option value="">-- None --</option>
+        <option value="gold-nouveau">Gold Nouveau</option>
+        <option value="hamlindigo">Hamlindigo</option>
+        <option value="modern">Modern</option>
+        <option value="rocket">Rocket</option>
+        <option value="wintry">Wintry</option>
+    </select>
+    </div>
+    </div>
+
+</div>
+
+<button
+    class="btn btn-sm ae_cfg_btn hover:transition-all"
+    on:click={() => {
+        $ae_loc.hub.show_cfg = !$ae_loc.hub.show_cfg;
+    }}
+    >
+    <span class="fas fa-cog mx-1"></span>
+    <span class="cfg_text">Config</span>
+</button>
+
 </section>
 
 
 <style lang="postcss">
-/* BEGIN: AE's Svelte Quick Access Type component  */
+/* BEGIN: AE's Svelte App Config component  */
 #AE-App-Cfg {
     /* position: absolute; */
     position: fixed;
@@ -113,10 +214,10 @@ function dispatch_something_changed() {
     background-color: rgba(var(--color-surface-500) / .5);
 
     border-top: solid thin black;
-    border-left: solid thin black;
+    border-right: solid thin black;
     border-bottom: solid thin black;
-    border-top-left-radius: .5em;
-    border-bottom-left-radius: .5em;
+    border-top-right-radius: .5em;
+    border-bottom-right-radius: .5em;
 
     opacity: .50;
 
@@ -144,16 +245,11 @@ function dispatch_something_changed() {
     transition-timing-function: linear;
 }
 
-/* #Access-Type .unlock_text {
-    transition: width 2s, height 2s, background-color 2s, transform 2s;
-} */
-/* END: Svelte Access Type component  */
-
-.access_type_unlock_btn .unlock_text {
+.ae_cfg_btn .cfg_text {
     display: none;
 }
 
-.access_type_unlock_btn:hover .unlock_text {
+.ae_cfg_btn:hover .cfg_text {
     display: initial;
     /* outline: solid thin red; */
 }
@@ -166,4 +262,5 @@ function dispatch_something_changed() {
     display: initial;
     /* outline: solid thin red; */
 }
+/* END: AE's Svelte App Config component */
 </style>