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

Working on making Tailwind select children when hovering.

Browse Source
This commit is contained in:
Scott Idem
2025-06-18 21:10:53 -04:00
parent 376837950e
commit 0d4885b778
1 changed files with 132 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/lib/e_app_sys_menu.svelte
View File

@@ -141,6 +141,7 @@ max-w-max -->
relative relative
*:hover:inline *:hover:inline
*:hover:visible *:hover:visible
**:hover:visible
opacity-50 opacity-50
hover:opacity-100 hover:opacity-100
@@ -182,7 +183,7 @@ max-w-max -->
$ae_loc.edit_mode = false; $ae_loc.edit_mode = false;
// dispatch_edit_mode_changed(); // dispatch_edit_mode_changed();
}} }}
class="btn btn-md px-2 preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all
" "
title="Edit mode is currently enabled. Click to disable." title="Edit mode is currently enabled. Click to disable."
@@ -202,7 +203,7 @@ max-w-max -->
$ae_loc.edit_mode = true; $ae_loc.edit_mode = true;
// dispatch_edit_mode_changed(); // dispatch_edit_mode_changed();
}} }}
class="btn btn-md px-2 preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition-all space-x-0 *:hover:inline" class="btn btn-md px-2 variant-ghost-warning hover:variant-filled-warning transition-all space-x-0 *:hover:inline"
title="Edit mode is currently disabled. Click to enable." title="Edit mode is currently disabled. Click to enable."
> >
<span class="fas fa-toggle-off mx-1"></span> <span class="fas fa-toggle-off mx-1"></span>
@@ -212,140 +213,145 @@ max-w-max -->
</span> </span>
</button> </button>
{/if} {/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" /> -->
<span>
{#if $ae_loc.access_type == 'super'} <div class="flex flex-row gap-1 items-center justify-between transition-all w-auto">
<span class="fas fa-hat-wizard m-1"></span> {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
<span class="hidden">Super</span> <span
{:else if $ae_loc.access_type == 'manager'} class="*:hover:inline flex flex-row gap-1 items-center justify-between"
<span class="fas fa-user-shield m-1"></span> title={`Current access type/level: ${$ae_loc.access_type}`}
<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?.app_cfg?.show_element__menu) {
$ae_loc.app_cfg.show_element__menu = true;
// $ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
} else {
$ae_loc.app_cfg.show_element__menu = false;
// $ae_loc.app_cfg.show_element__menu_btn = true;
}
}}
class="btn btn-sm variant-outline-surface hover:preset-tonal-warning border border-warning-500 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> --> <!-- <span class="fas fa-unlock mx-1"></span> -->
<!-- <ShieldMinus /> --> <!-- <ShieldPlus class="inline-block" /> -->
<ShieldEllipsis class="inline-block" />
<span class="hidden">Passcode?</span>
</button>
{#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?.app_cfg?.show_element__menu) {
$ae_loc.app_cfg.show_element__menu = true;
// $ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
} else {
$ae_loc.app_cfg.show_element__menu = false;
// $ae_loc.app_cfg.show_element__menu_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?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_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.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_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} {:else}
<button <button
type="button" type="button"
onclick={() => { onclick={async () => {
trigger_clear_access = true; if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
if ($ae_loc?.app_cfg?.show_element__menu_btn) { $ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__menu = true; $ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__menu_btn = false; $ae_loc.app_cfg.show_element__passcode_input = true;
$ae_loc.app_cfg.show_element__access_type = true; await tick();
$ae_loc.app_cfg.show_element__passcode_input = true; console.log('Layout button click: Focus on passcode input!');
/** @type {HTMLElement | null} */
// await tick(); const to_focus = document.getElementById('access_passcode_input');
// console.log('Layout button click: Focus on passcode input!'); to_focus?.focus();
// /** @type {HTMLElement | null} */ } else {
// const to_focus = document.getElementById('access_passcode_input'); $ae_loc.app_cfg.show_element__menu = false;
// to_focus?.focus(); $ae_loc.app_cfg.show_element__menu_btn = true;
} else { }
$ae_loc.app_cfg.show_element__menu = false; // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
$ae_loc.app_cfg.show_element__menu_btn = true; }}
} class="
}} btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
class="btn btn-sm variant-outline-surface hover:preset-tonal-warning border border-warning-500 transition-all hidden" *:hover:inline
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`} "
> 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"></span> Lock? --> >
<ShieldMinus class="inline-block" /> <!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
Clear? <!-- <span class="">Unlock?</span> -->
<ShieldUser class="inline-block" />
<span class="hidden">Auth?</span>
</button> </button>
{/if} {/if}
{:else} </div>
<button </span>
type="button"
onclick={async () => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_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.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
}}
class="
btn btn-sm variant-outline-surface hover:preset-tonal-success border border-success-500 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> --> <!-- <div> -->
<!-- class:visible={$ae_loc?.app_cfg?.show_element__menu} -->
<!-- class:invisible={!$ae_loc?.app_cfg?.show_element__menu} -->
<!-- class:hover:visible={true} -->
<!-- invisible -->
<button <button
type="button" type="button"
class:w-48={$ae_loc?.app_cfg?.show_element__menu} class:w-48={$ae_loc?.app_cfg?.show_element__menu}
class:visible={$ae_loc?.app_cfg?.show_element__menu}
class:invisible={!$ae_loc?.app_cfg?.show_element__menu} class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success px-6 py-1 *:hover:inline"
class="btn btn-sm variant-outline-tertiary hover:preset-tonal-success border border-success-500 px-6 py-1"
title="Show or hide the menu" title="Show or hide the menu"
onclick={async () => { onclick={async () => {
if (!$ae_loc?.app_cfg?.show_element__menu) { if (!$ae_loc?.app_cfg?.show_element__menu) {
@@ -425,7 +431,7 @@ max-w-max -->
<button <button
type="button" type="button"
class="btn btn-sm variant-outline-tertiary hover:preset-tonal-success border border-success-500 *:hover:inline px-6 py-1" class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *:hover:inline px-6 py-1"
title="Sign In" title="Sign In"
onclick={() => { onclick={() => {
if (!$ae_loc?.app_cfg?.show_element__menu) { if (!$ae_loc?.app_cfg?.show_element__menu) {