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
*:hover:inline
*:hover:visible
**:hover:visible
opacity-50
hover:opacity-100
@@ -182,7 +183,7 @@ max-w-max -->
$ae_loc.edit_mode = false;
// 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."
@@ -202,7 +203,7 @@ max-w-max -->
$ae_loc.edit_mode = true;
// 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."
>
<span class="fas fa-toggle-off mx-1"></span>
@@ -212,140 +213,145 @@ max-w-max -->
</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?.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>
<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-lock mx-1"></span> -->
<!-- <ShieldMinus /> -->
<ShieldEllipsis class="inline-block" />
<span class="hidden">Passcode?</span>
<!-- <span class="fas fa-unlock mx-1"></span> -->
<!-- <ShieldPlus class="inline-block" /> -->
</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}
<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:preset-tonal-warning border border-warning-500 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?
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: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}
{:else}
<button
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>
</span>
<!-- <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
type="button"
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:preset-tonal-success border border-success-500 px-6 py-1"
class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success px-6 py-1 *:hover:inline"
title="Show or hide the menu"
onclick={async () => {
if (!$ae_loc?.app_cfg?.show_element__menu) {
@@ -425,7 +431,7 @@ max-w-max -->
<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"
onclick={() => {
if (!$ae_loc?.app_cfg?.show_element__menu) {