Pulling out parts into separate files. Also minor clean up.
This commit is contained in:
Scott Idem
247
src/lib/e_app_debug_menu.svelte
Normal file
247
src/lib/e_app_debug_menu.svelte
Normal file
@@ -0,0 +1,247 @@
|
||||
<script lang="ts">
|
||||
// *** Import Svelte specific
|
||||
|
||||
// *** Import other supporting libraries
|
||||
import {
|
||||
Bug,
|
||||
CircleX,
|
||||
ToggleLeft, ToggleRight,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
// import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
|
||||
|
||||
// *** Setup Svelte properties
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
show_debug_menu: boolean;
|
||||
hidden: null|boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = 0,
|
||||
show_debug_menu = false,
|
||||
hidden = true,
|
||||
}: Props = $props();
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!-- App Debug Menu -->
|
||||
<!-- opacity-25
|
||||
hover:opacity-100 -->
|
||||
<!-- text-slate-400 hover:text-slate-800 -->
|
||||
<div
|
||||
class="
|
||||
absolute bottom-0 left-0
|
||||
flex
|
||||
text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
|
||||
|
||||
dark:text-slate-400 dark:hover:text-slate-200
|
||||
bg-red-100/60 dark:bg-red-800/50
|
||||
hover:bg-red-200 hover:dark:bg-red-900
|
||||
|
||||
mx-1 my-2
|
||||
max-h-min
|
||||
max-w-lg
|
||||
transition-all
|
||||
transition-delay-1000
|
||||
transition-duration-1000
|
||||
ease-in
|
||||
z-50
|
||||
|
||||
border-2
|
||||
border-red-300 dark:border-red-700
|
||||
hover:border-red-500 hover:dark:border-red-500
|
||||
"
|
||||
class:top-0={$ae_loc?.debug_menu}
|
||||
class:w-full={$ae_loc?.debug_menu}
|
||||
class:hidden={!$ae_loc?.trusted_access}
|
||||
class:border-transparent={!$ae_loc?.debug_menu}
|
||||
class:hover:border-transparent={!$ae_loc?.debug_menu}
|
||||
class:hover:bg-transparent={!$ae_loc?.debug_menu}
|
||||
>
|
||||
|
||||
<div
|
||||
class:hidden={!$ae_loc?.debug_menu}
|
||||
class:border-red-200={$ae_loc?.debug_menu}
|
||||
class:dark:border-red-800={$ae_loc?.debug_menu}
|
||||
class="
|
||||
|
||||
transition-all
|
||||
transition-delay-1000
|
||||
transition-duration-1000
|
||||
ease-in
|
||||
overflow-y-auto
|
||||
px-1 py-4
|
||||
opacity-50
|
||||
hover:opacity-100
|
||||
relative
|
||||
"
|
||||
>
|
||||
|
||||
<!-- flex flex-col items-center justify-center max-h-full outline -->
|
||||
<div>
|
||||
<!-- <span class="fas fa-bug mx-1"></span> -->
|
||||
<Bug class="inline-block mx-1" />
|
||||
<span>Debug</span>
|
||||
</div>
|
||||
|
||||
<pre>
|
||||
{JSON.stringify($ae_loc, null, 2)}
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="absolute top-0 right-0 flex flex-row gap-1 items-center justify-center">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Debug ae_loc:', $ae_loc);
|
||||
$ae_loc.debug_mode = !$ae_loc?.debug_mode;
|
||||
}}
|
||||
class="
|
||||
btn btn-sm variant-ghost-surface hover:variant-ghost-warning
|
||||
transition-all *:hover:inline-block
|
||||
|
||||
|
||||
"
|
||||
title="Turn debug content and styles off and on"
|
||||
>
|
||||
{#if $ae_loc?.debug_mode}
|
||||
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
|
||||
<ToggleRight strokeWidth="2.5" color="green" class="inline-block mx-1" />
|
||||
<span>Debug</span>
|
||||
<span class="hidden">
|
||||
Mode On
|
||||
</span>
|
||||
{:else}
|
||||
<!-- <span class="fas fa-toggle-off mx-1"></span> -->
|
||||
<ToggleLeft strokeWidth="1" color="gray" class="inline-block mx-1" />
|
||||
<span>Debug?</span>
|
||||
<span class="hidden">
|
||||
Mode Off
|
||||
</span>
|
||||
{/if}
|
||||
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
|
||||
<!-- <ToggleRight class="inline-block mx-1" /> -->
|
||||
<!-- <X class="inline-block mx-1" /> -->
|
||||
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Debug ae_loc:', $ae_loc);
|
||||
$ae_loc.debug_menu = !$ae_loc?.debug_menu;
|
||||
}}
|
||||
class="
|
||||
btn btn-sm variant-ghost-surface hover:variant-ghost-warning
|
||||
transition-all *:hover:inline-block
|
||||
"
|
||||
title="Turn debug content and styles off and on"
|
||||
>
|
||||
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
|
||||
<!-- <ToggleRight class="inline-block mx-1" /> -->
|
||||
<CircleX class="inline-block mx-1" />
|
||||
<span class="hidden">
|
||||
Close
|
||||
</span>
|
||||
<span>Debug</span>
|
||||
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Debug ae_loc:', $ae_loc);
|
||||
$ae_loc.debug_menu = !$ae_loc?.debug_menu;
|
||||
}}
|
||||
id="AE-Quick-Debug"
|
||||
class="
|
||||
btn btn-icon
|
||||
variant-ghost-surface
|
||||
hover:variant-ghost-warning
|
||||
transition-all
|
||||
fixed bottom-2 left-2
|
||||
text-gray-400 hover:text-gray-800
|
||||
"
|
||||
title="Turn debug content and styles off and on"
|
||||
>
|
||||
<!-- absolute bottom-2 left-2 -->
|
||||
<!-- fixed bottom-0 left-0 -->
|
||||
π
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
/* BEGIN: AE's Svelte Quick Debug component */
|
||||
#AE-Quick-Debug {
|
||||
/* position: absolute; */
|
||||
/* position: fixed; */
|
||||
/* position: relative; */
|
||||
/* position: static; */
|
||||
/* position: sticky; */
|
||||
/* top: 1em; */
|
||||
/* bottom: 2rem; */
|
||||
/* left: 1rem; */
|
||||
|
||||
/* padding: .0rem; */
|
||||
|
||||
/* lightyellow */
|
||||
/* background-color: hsla(60,100%,90%,.30); */
|
||||
/* background-color: rgba(var(--color-surface-500) / .5); */
|
||||
|
||||
/* border: none;
|
||||
|
||||
border-top: solid thin hsla(0,0%,0%,.25);
|
||||
border-left: solid thin hsla(0,0%,0%,.25);
|
||||
border-bottom: solid thin hsla(0,0%,0%,.25); */
|
||||
/* border-top-left-radius: .5em; */
|
||||
/* border-bottom-left-radius: .5em; */
|
||||
|
||||
/* opacity: .15; */
|
||||
/* opacity: 1; */
|
||||
|
||||
font-size: .75rem;
|
||||
|
||||
/* z-index: 15; */
|
||||
|
||||
/* NOTE: transition when no longer hovering */
|
||||
transition-property: opacity, background-color;
|
||||
transition-delay: 1.25s;
|
||||
transition-duration: .5s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
#AE-Quick-Debug:hover {
|
||||
/* lightyellow */
|
||||
/* background-color: hsla(60,100%,90%,.95); */
|
||||
/* background-color: rgba(var(--color-surface-500) / 1); */
|
||||
/*
|
||||
border-top: solid thin hsla(0,0%,0%,.95);
|
||||
border-left: solid thin hsla(0,0%,0%,.95);
|
||||
border-bottom: solid thin hsla(0,0%,0%,.95); */
|
||||
|
||||
/* opacity: 1; */
|
||||
|
||||
/* padding: .5rem; */
|
||||
|
||||
font-size: 1.5rem;
|
||||
/* Need to zoom 3.5 when hovering */
|
||||
/* transform: scale(3.5); */
|
||||
|
||||
/* NOTE: transition when hover starts */
|
||||
transition-property: opacity, background-color;
|
||||
transition-delay: .5s;
|
||||
transition-duration: .10s;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user