Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The new new new version of the system menu seems to be working pretty well. Wrapping up for the day.

Browse Source
This commit is contained in:
Scott Idem
2025-07-15 20:36:13 -04:00
parent 7b853ede8c
commit a52cc3808b
6 changed files with 404 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/e_app_access_type.svelte
View File

@@ -24,17 +24,19 @@ import { events_loc } from '$lib/ae_events_stores';
// *** Setup Svelte properties
interface Props {
log_lvl?: number;
hide?: null|boolean;
expand?: boolean;
show_passcode_input: boolean;
trigger_clear_access: null|boolean;
hidden: null|boolean;
}
let {
log_lvl = 0,
show_passcode_input = false,
trigger_clear_access = null,
hidden = true,
}: Props = $props();
log_lvl = $bindable(0),
hide = $bindable(false),
expand = $bindable(false),
show_passcode_input = $bindable(false),
trigger_clear_access = $bindable(null),
}: Props = $props();
let entered_passcode: null|string = $state(null);
@@ -104,6 +106,7 @@ $effect(() => {
$ae_loc = {...$ae_loc, ...access_checks_results};
$ae_loc = $ae_loc;
$ae_loc.sys_menu.expand = false;
} else if (trigger) {
trigger = false;
if (log_lvl) {
@@ -277,19 +280,21 @@ function handle_clear_access() {
bg-blue-100 text-gray-900
dark:bg-blue-800 dark:text-gray-200
duration-300 delay-150 hover:delay-1000 hover:ease-out
transition-all hover:transition-all
flex flex-col flex-wrap gap-1
items-end justify-center
w-72 max-w-72
p-1 my-1
p-1
border-2 border-gray-200
duration-300 delay-150 hover:delay-1000 hover:ease-out
transition-all
"
class:hidden={hidden}
class:hidden={hide}
>
<!-- class:hidden={!$ae_sess.show__sign_in_out__fields} -->
<header
class:hidden={!$ae_sess.show__sign_in_out__fields}
class="ae_header w-64 "
>
<h2 class="text-sm text-center font-semibold">
@@ -461,7 +466,7 @@ function handle_clear_access() {
onclick={() => {
// handle_clear_access();
// trigger_clear_access = true;
show_passcode_input = !show_passcode_input;
show_passcode_input = true;
}}
class="btn btn-sm variant-outline-surface hover:preset-tonal-warning border border-warning-500 transition-all"
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
@@ -477,6 +482,7 @@ function handle_clear_access() {
onclick={() => {
// handle_clear_access();
trigger_clear_access = true;
show_passcode_input = true;
// show_passcode_input = true;
}}
class="btn btn-sm variant-outline-warning hover:preset-tonal-warning border border-warning-500 transition-all"

14
src/lib/e_app_cfg.svelte
View File

@@ -117,12 +117,15 @@ function handle_clear_storage(item: null|string) {
bg-blue-100 text-gray-900
dark:bg-blue-800 dark:text-gray-200
transition hover:transition-all
flex flex-col flex-wrap gap-1
items-center justify-center
items-end justify-center
w-72 max-w-72
p-1 my-1
p-1
border-2 border-gray-200
duration-300 delay-150 hover:delay-1000 hover:ease-out
transition-all
"
class:hidden={hide}
>
@@ -262,7 +265,6 @@ function handle_clear_storage(item: null|string) {
class:justify-end={!expand} -->
<div
class="flex flex-row gap-2 items-center justify-between w-full"
>
<!-- {#if !expand} -->
<span>
@@ -301,7 +303,7 @@ class:justify-end={!expand} -->
<button
class="
ae_cfg_btn
btn btn-sm
btn btn-sm text-sm
preset-tonal-warning
group transition-all
"
@@ -311,7 +313,7 @@ class:justify-end={!expand} -->
>
<!-- <span class="fas fa-cog m-1"></span> -->
<span class="inline-block" title="Settings">
<Settings />
<Settings class="m-1" />
</span>
<span
class="

115
src/lib/e_app_sign_in_out.svelte
View File

@@ -349,48 +349,19 @@ async function handle_change_password() {
bg-blue-100 text-gray-900
dark:bg-blue-800 dark:text-gray-200
transition-all duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all
flex flex-col flex-wrap gap-1
items-end justify-center
w-72 max-w-72
p-1 my-1
p-1
border-2 border-gray-200
duration-300 delay-150 hover:delay-1000 hover:ease-out
transition-all
"
class:hidden={hidden}
>
<button
type="button"
class="btn btn-sm variant-outline-warning hover:preset-tonal-warning border border-warning-500 *:hover:inline w-full"
title="Sign In"
onclick={() => {
$ae_sess.show__sign_in_out__fields = !$ae_sess.show__sign_in_out__fields; // Toggle the visibility of the sign-in form
}}
>
{#if $ae_loc?.person_id && $ae_loc?.user_id}
{#if $ae_sess.show__sign_in_out__fields}
<CircleX class="mx-1" />
Hide User Sign-In Options
{:else}
<User class="mx-1 inline-block text-gray-500" />
{$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
{/if}
{:else}
{#if $ae_sess.show__sign_in_out__fields}
<CircleX class="mx-1" />
Hide User Sign-In Options
{:else}
<!-- <LockKeyhole size="1.25em" class="mx-1 inline-block text-gray-500" /> -->
<UserLock size="1.25em" class="mx-1 inline-block text-gray-500" />
<!-- <User class="mx-1 inline-block text-gray-500" /> -->
<span class="hidden">
User Sign-In?
</span>
{/if}
{/if}
</button>
<header
class:hidden={!$ae_sess.show__sign_in_out__fields}
@@ -749,6 +720,82 @@ async function handle_change_password() {
</span>
<div
class="flex flex-row gap-2 items-center justify-between w-full"
>
<span>
{#if $ae_loc?.person_id && $ae_loc?.user_id}
<span class="fas fa-user mx-1 text-gray-500"></span>
{$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
{:else}
<span class="fas fa-user-x mx-1 text-gray-500"></span>
Sign in?
{/if}
</span>
<button
type="button"
class="
btn btn-sm text-xs
variant-outline-warning hover:preset-tonal-warning
border border-warning-500 group
"
title="Sign In"
onclick={() => {
$ae_sess.show__sign_in_out__fields = !$ae_sess.show__sign_in_out__fields; // Toggle the visibility of the sign-in form
}}
>
{#if $ae_loc?.person_id && $ae_loc?.user_id}
{#if $ae_sess.show__sign_in_out__fields}
<CircleX class="m-1" />
<span
class="
cfg_text
hidden
group-hover:inline
"
>
Hide Sign-In
</span>
{:else}
<User class="mx-1 inline-block text-gray-500" />
{$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
{/if}
{:else}
{#if $ae_sess.show__sign_in_out__fields}
<CircleX class="mx-1" />
<span
class="
cfg_text
hidden
group-hover:inline
"
>
Hide Sign-In
</span>
{:else}
<!-- <LockKeyhole size="1.25em" class="mx-1 inline-block text-gray-500" /> -->
<UserLock size="1.25em" class="m-1 inline-block text-gray-500" />
<!-- <User class="mx-1 inline-block text-gray-500" /> -->
<span
class="
cfg_text
hidden
group-hover:inline
"
>
User Sign-In
</span>
{/if}
{/if}
</button>
</div>
</section>
<!-- Change Password Modal -->

490
src/lib/e_app_sys_menu.svelte
View File

@@ -74,13 +74,13 @@ max-w-max -->
transition hover:transition-all
z-10 hover:z-20
"
class:hidden={!$ae_loc?.sys_menu?.expand_btn}
class:hidden={!expand_btn}
> -->
<!-- && !$ae_loc?.sys_menu?.expand -->
<!-- && !expand -->
<!-- !$ae_loc
?.sys_menu?.expand_btn -->
<!-- bg-blue-100/60 dark:bg-blue-800/50 -->
<!-- class:hover:border-transparent={!$ae_loc?.sys_menu?.expand} -->
<!-- class:hover:border-transparent={!expand} -->
<!-- mx-1 my-2 -->
<!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
<section
@@ -117,17 +117,18 @@ max-w-max -->
duration-500 hover:duration-200
ease-in-out
"
class:top-0={$ae_loc?.sys_menu?.expand & 1 == 3}
class:w-full={$ae_loc?.sys_menu?.expand}
class:top-0={expand && 1 == 3}
class:w-full={expand}
class:hidden={false}
class:border-transparent={!$ae_loc?.sys_menu?.expand}
class:border-transparent={!expand}
class:hover:bg-transparent={!$ae_loc?.sys_menu?.expand}
class:hover:bg-transparent={!expand}
>
<!-- class:hidden={!expand} -->
<div
class:hidden={!$ae_loc?.expand && 1 == 3}
class:preset-filled-warning-100-900={expand}
class:border-green-200={$ae_loc?.expand}
class:dark:border-green-800={$ae_loc?.expand}
class="
@@ -140,13 +141,11 @@ max-w-max -->
w-full
bg-white/80 dark:dark-gray-800/80
hover:bg-red-100/90 dark:hover:bg-gray-800/90
bg-white/80
hover:bg-red-100/90 active:bg-red-200 focus:bg-red-300
dark:dark-gray-800/80 dark:hover:bg-gray-800/90
relative
*:hover:inline
*:hover:visible
**:hover:visible
opacity-70
hover:opacity-100
@@ -155,32 +154,206 @@ max-w-max -->
delay-1000 hover:delay-500
duration-200 hover:duration-200
ease-in-out
group
"
>
{#if $ae_loc?.person_id || $ae_loc?.user_id}
<span
class:hidden={!$ae_loc?.sys_menu?.expand}
class:hover:visible={$ae_loc?.sys_menu?.expand}
class:invisible={!$ae_loc?.sys_menu?.expand}
class="w-48"
<!-- class:hidden={!expand}
class:hover:visible={expand}
class:invisible={!expand} -->
<div
class="flex flex-col gap-1 items-start justify-center transition-all w-full group"
title="
Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
Username: {$ae_loc?.user?.username ?? '-- not set --'}
Email: {$ae_loc?.user?.email ?? '-- not set --'}
"
>
<User class="mx-1 inline-block text-gray-500" />
{$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}<br />
<!-- <ShieldUser /> -->
<ShieldUser class="mx-1 inline-block text-gray-500" />
{$ae_loc?.user?.username ?? '-- not set --'}<br />
</span>
<span class="flex flex-row gap-1 w-32">
<User class="mx-1 inline-block text-gray-500" />
<span
class="group-hover:inline-block"
class:hidden={!expand}>
{$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
</span>
</span>
<span class:hidden={!expand}>
<!-- <ShieldUser /> -->
<ShieldUser class="mx-1 inline-block text-gray-500" />
<span>
{$ae_loc?.user?.username ?? '-- not set --'}
</span>
</span>
</div>
{/if}
<div class="flex flex-row gap-1 items-center justify-between transition-all w-full">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
<span
class="flex flex-row gap-1 group"
title={`Current access type/level: ${$ae_loc.access_type}`}
>
<!-- <span class="fas fa-unlock mx-1"></span> -->
<!-- <ShieldPlus class="inline-block" /> -->
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-hat-wizard m-1"></span>
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
>Super</span>
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield m-1"></span>
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
>Manager</span>
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja m-1"></span>
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
>Administrator</span>
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-check m-1"></span>
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
>Trusted Access</span>
{:else if $ae_loc.access_type == 'public'}
Public
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
>Access</span>
{:else if $ae_loc.access_type == 'authenticated'}
Authenticated
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
>Access</span>
{:else if $ae_loc.access_type == 'anonymous'}
Anonymous Access
{:else}
Unknown Access
{/if}
</span>
{#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
<button
type="button"
onclick={() => {
// handle_clear_access();
// trigger_clear_access = true;
// $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
if (!expand) {
expand = true;
$ae_loc.sys_menu.expand = true;
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
// $ae_loc.sys_menu.expand_btn = false;
// $ae_loc.app_cfg.show_element__access_type = true;
// $ae_loc.app_cfg.show_element__passcode_input = true;
} else {
// expand = true;
// $ae_loc.sys_menu.expand = false;
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
// $ae_loc.sys_menu.expand_btn = true;
}
}}
class="btn btn-sm text-xs variant-outline-surface hover:variant-ghost-warning transition-all group"
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> -->
<!-- <ShieldMinus /> -->
<ShieldEllipsis class="inline-block" />
<span class="hidden group-hover:inline-block">Passcode?</span>
</button>
{:else}
<button
type="button"
onclick={() => {
trigger_clear_access = true;
if (expand) {
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = false;
expand = false;
// $ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
// await tick();
// console.log('Layout button click: Focus on passcode input!');
// /** @type {HTMLElement | null} */
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
} else {
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
// $ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
}
}}
class="
btn btn-sm text-xs
variant-outline-surface hover:variant-ghost-warning
transition-all group
"
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> Lock? -->
<ShieldMinus class="inline-block" />
<span class="hidden group-hover:inline-block">
Clear?
</span>
</button>
{/if}
{:else}
<button
type="button"
onclick={async () => {
expand = true;
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
// $ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
// $ae_loc.app_cfg.show_element__access_type = true;
// $ae_loc.app_cfg.show_element__passcode_input = true;
await tick();
console.log('Layout button click: Focus on passcode input!');
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
}}
class="
btn btn-sm text-xs
variant-outline-surface hover:variant-ghost-success
transition-all group
"
title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
>
<!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
<!-- <span class="">Unlock?</span> -->
<ShieldUser class="inline-block" />
<span class="hidden group-hover:inline-block">Auth?</span>
</button>
{/if}
</div>
{#if $ae_loc.edit_mode}
<button
@@ -189,17 +362,20 @@ max-w-max -->
$ae_loc.edit_mode = false;
// dispatch_edit_mode_changed();
}}
class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all
"
class="
btn btn-sm text-xs
preset-tonal-warning
preset-outlined-warning-800-200
hover:preset-tonal-success
transition-all group
gap-1
"
title="Edit mode is currently enabled. Click to disable."
>
<span class=" *:hover:inline-block">
<span class="fas fa-toggle-on mx-1 inline-block"></span>
Edit
<span class="hidden">
Mode On
</span>
<span class="fas fa-toggle-on m-1 inline-block"></span>
<span class="">Edit</span>
<span class="hidden group-hover:inline-block">
Mode
</span>
</button>
{:else if $ae_loc.authenticated_access}
@@ -209,164 +385,46 @@ max-w-max -->
$ae_loc.edit_mode = true;
// dispatch_edit_mode_changed();
}}
class="btn btn-md px-2 variant-ghost-warning hover:variant-filled-warning transition-all space-x-0 *:hover:inline"
class="
btn btn-sm text-xs
preset-tonal-surface
preset-outlined-warning-400-600
hover:preset-tonal-warning
transition-all group
gap-1
"
title="Edit mode is currently disabled. Click to enable."
>
<span class="fas fa-toggle-off mx-1"></span>
<span class="">Edit</span>
<span class="hidden">
<span class="fas fa-toggle-off m-1 inline"></span>
<span class="inline">Edit</span>
<span class="hidden group-hover:inline">
Mode?
</span>
</button>
{/if}
<span>
<div class="flex flex-row gap-1 items-center justify-between transition-all w-auto">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
<span
class="*:hover:inline flex flex-row gap-1 items-center justify-between"
title={`Current access type/level: ${$ae_loc.access_type}`}
>
<!-- <span class="fas fa-unlock mx-1"></span> -->
<!-- <ShieldPlus class="inline-block" /> -->
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-hat-wizard m-1"></span>
<span class="hidden">Super</span>
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield m-1"></span>
<span class="hidden">Manager</span>
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja m-1"></span>
<span class="hidden">Administrator</span>
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-check m-1"></span>
<span class="hidden">Trusted Access</span>
{:else if $ae_loc.access_type == 'public'}
Public
<span class="hidden">Access</span>
{:else if $ae_loc.access_type == 'authenticated'}
Authenticated
<span class="hidden">Access</span>
{:else if $ae_loc.access_type == 'anonymous'}
Anonymous Access
{:else}
Unknown Access
{/if}
</span>
{#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
<button
type="button"
onclick={() => {
// handle_clear_access();
// trigger_clear_access = true;
// $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
if (!$ae_loc?.sys_menu?.expand) {
$ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
} else {
$ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
}
}}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> -->
<!-- <ShieldMinus /> -->
<ShieldEllipsis class="inline-block" />
<span class="hidden">Passcode?</span>
</button>
{:else}
<button
type="button"
onclick={() => {
trigger_clear_access = true;
if ($ae_loc?.sys_menu?.expand_btn) {
$ae_loc.sys_menu.expand = true;
$ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
// await tick();
// console.log('Layout button click: Focus on passcode input!');
// /** @type {HTMLElement | null} */
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
} else {
$ae_loc.sys_menu.expand = false;
$ae_loc.sys_menu.expand_btn = true;
}
}}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> Lock? -->
<ShieldMinus class="inline-block" />
Clear?
</button>
{/if}
{:else}
<button
type="button"
onclick={async () => {
if ($ae_loc?.sys_menu?.expand_btn) {
$ae_loc.sys_menu.expand = true;
$ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
await tick();
console.log('Layout button click: Focus on passcode input!');
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
} else {
$ae_loc.sys_menu.expand = false;
$ae_loc.sys_menu.expand_btn = true;
}
// $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
}}
class="
btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
*:hover:inline
"
title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
>
<!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
<!-- <span class="">Unlock?</span> -->
<ShieldUser class="inline-block" />
<span class="hidden">Auth?</span>
</button>
{/if}
</div>
</span>
<!-- <div> -->
<!-- class:visible={$ae_loc?.sys_menu?.expand} -->
<!-- class:invisible={!$ae_loc?.sys_menu?.expand} -->
<!-- class:visible={expand} -->
<!-- class:invisible={!expand} -->
<!-- class:hover:visible={true} -->
<!-- invisible -->
<button
type="button"
class:w-48={$ae_loc?.sys_menu?.expand}
class:w-full={expand}
class="
btn btn-sm
preset-tonal-tertiary hover:preset-filled-success active:preset-filled-success
preset-filled-tertiary-400-600
preset-outlined-tertiary-400-600
hover:preset-filled-success active:preset-filled-success
px-6 py-1
invisible group-hover:visible groupx
transition-all group
"
title="Show or hide the menu"
title="Show/Hide the system menu"
onclick={async () => {
if (!$ae_loc?.sys_menu?.expand) {
$ae_loc.sys_menu.expand = true;
if (!expand) {
expand = true;
// $ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
@@ -382,26 +440,27 @@ max-w-max -->
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
} else {
$ae_loc.sys_menu.expand = false;
expand = false;
// $ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
$ae_loc.app_cfg.show_element__passcode_input = false;
// $ae_loc.app_cfg.show_element__passcode_input = false;
}
// $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
// $ae_loc.sys_menu.expand_btn = !expand_btn;
}}
>
<span class=" *:hover:inline-block">
{#if $ae_loc?.sys_menu?.expand}
<CircleX class="inline-block" />
<span class="inline-block">
<!-- <span class=""> -->
{#if expand}
<CircleX class="m-1 inline-block" />
<span class="hidden group-hover:inline-block">
Hide Menu
</span>
{:else}
<Menu class="inline-block" />
<span class="hidden groupx-hover:inline-block">
<Menu class="m-1 inline-block" />
<span class="hidden group-hover:inline-block">
Menu
</span>
{/if}
</span>
<!-- </span> -->
</button>
<!-- </div> -->
@@ -416,6 +475,8 @@ max-w-max -->
<!-- hover:opacity-100 -->
<!-- bg-white dark:bg-gray-800 -->
<div
class:preset-filled-warning-200-800={expand}
class:hidden={!expand}
class="
ae_app__sys_menu
@@ -423,7 +484,7 @@ max-w-max -->
flex flex-col
items-end
justify-end
gap-4
gap-2
min-w-48
@@ -440,35 +501,43 @@ max-w-max -->
z-20 hover:z-30
"
class:hidden={!$ae_loc?.sys_menu?.expand}
>
<button
type="button"
class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *:hover:inline px-6 py-1"
title="Sign In"
class:w-full={expand}
class="
btn btn-sm
preset-filled-tertiary-400-600
preset-outlined-tertiary-400-600
hover:preset-filled-success active:preset-filled-success
px-6 py-1
transition-all group
"
title="Show/Hide the system menu"
onclick={() => {
if (!$ae_loc?.sys_menu?.expand) {
if (!expand) {
expand = true;
$ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
} else {
$ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
}
// $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
// $ae_loc.sys_menu.expand = !$ae_loc?.sys_menu?.expand;
// $ae_loc.sys_menu.expand_btn = !expand_btn;
// $ae_loc.sys_menu.expand = !expand;
}}
>
{#if $ae_loc?.sys_menu?.expand}
<CircleX class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
{#if expand}
<CircleX class="m-1 inline-block" />
<span class="hidden group-hover:inline-block">
Hide Menu
<!-- </span> -->
</span>
{:else}
<Menu class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
<Menu class="m-1 inline-block" />
<span class="hidden group-hover:inline-block">
Menu
<!-- </span> -->
</span>
{/if}
</button>
@@ -480,15 +549,16 @@ max-w-max -->
hide={$ae_loc.sys_menu.hide_app_cfg}
expand={$ae_loc.sys_menu.expand_app_cfg}
/>
</span>
<span
class:hidden={!$ae_loc.edit_mode}
>
<Element_theme
hide={$ae_loc.sys_menu.hide_app_cfg}
expand={$ae_loc.sys_menu.expand_app_cfg}
set_theme_mode={true}
set_theme_name={true}
/>
<!-- END: Theme -->
/>
</span>
<!-- {/if} -->
@@ -501,13 +571,13 @@ max-w-max -->
/>
{/if}
{#if $ae_loc?.app_cfg?.show_element__access_type}
{#if !$ae_loc?.sys_menu?.hide_access_type && !$ae_loc?.iframe}
<!-- hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !expand} -->
<Element_access_type
hide={$ae_loc.sys_menu.hide_access_type}
expand={$ae_loc.sys_menu.expand_access_type}
show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input}
trigger_clear_access={trigger_clear_access}
hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.sys_menu?.expand}
bind:hide={$ae_loc.sys_menu.hide_access_type}
bind:expand={$ae_loc.sys_menu.expand_access_type}
bind:show_passcode_input={$ae_loc.app_cfg.show_element__passcode_input}
bind:trigger_clear_access={trigger_clear_access}
/>
{/if}

22
src/lib/e_app_theme.svelte
View File

@@ -44,17 +44,26 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
dark:bg-blue-800 dark:text-gray-200
flex flex-col flex-wrap gap-1
items-end justify-end
items-end justify-center
w-72 max-w-72
p-1 my-1
p-1
border-2 border-gray-200
duration-300 delay-150 hover:delay-1000 hover:ease-out
transition-all
"
class:hidden={hide}
>
<div>
<div
class:hidden={!expand}
class="flex flex-row flex-wrap gap-2 items-center justify-between w-full"
>
<!-- Theme Name: -->
<span class="text-sm font-semibold">
{$ae_loc.theme_name}
</span>
<select
onchange={(event) => {
// $slct_trigger = 'set_theme_name';
@@ -80,8 +89,7 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
// }
}}
bind:value={$ae_loc.theme_name}
class="select"
class:hidden={!expand}
class="select w-32"
title="Theme name"
>
<option value="">-- None --</option>
@@ -158,10 +166,10 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
>
<!-- <span class="fas fa-adjust"></span> -->
{#if $ae_loc.theme_mode == 'light'}
<Sun />
<Sun class="m-1" />
<span class="hidden md:inline-block group-hover:inline-block">Light Mode</span>
{:else if $ae_loc.theme_mode == 'dark'}
<Moon />
<Moon class="m-1" />
<span class="hidden group-hover:inline-block">Dark Mode</span>
{/if}
<span

4
src/routes/+layout.svelte
View File

@@ -947,8 +947,8 @@ $effect(() => {
{#if !$ae_loc?.iframe || $ae_loc?.trusted_access}
<E_app_sys_menu
data={data}
hide={$ae_loc.sys_menu.hide}
expand={$ae_loc.sys_menu.expand}
bind:hide={$ae_loc.sys_menu.hide}
bind:expand={$ae_loc.sys_menu.expand}
/>
<!-- The app debug menu -->