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

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}