long sidebar style
This commit is contained in:
parent
9a76383154
commit
9b84b4483e
|
@ -1,4 +1,16 @@
|
||||||
|
|
||||||
|
let events: CSSVariableEventHandler[] = [];
|
||||||
|
|
||||||
|
export interface CSSVariableEvent {
|
||||||
|
name: string
|
||||||
|
newValue: string,
|
||||||
|
oldValue: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CSSVariableEventHandler {
|
||||||
|
(event: CSSVariableEvent): any | void | Promise<any>
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set CSS variable
|
* Set CSS variable
|
||||||
*
|
*
|
||||||
|
@ -10,6 +22,12 @@ export function setCSSVariable(name: string, val: string | number): void {
|
||||||
if (typeof val == 'number') val = `${val}px`;
|
if (typeof val == 'number') val = `${val}px`;
|
||||||
if (!name.startsWith('--')) name = `--${name}`;
|
if (!name.startsWith('--')) name = `--${name}`;
|
||||||
|
|
||||||
|
callEvent({
|
||||||
|
name,
|
||||||
|
newValue: val,
|
||||||
|
oldValue: getCSSVariable(name)
|
||||||
|
});
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
document.querySelector(':root').style.setProperty(name, val);
|
document.querySelector(':root').style.setProperty(name, val);
|
||||||
}
|
}
|
||||||
|
@ -39,3 +57,24 @@ export function setCSSVariableFor(name: string, val: string | number, timeout: n
|
||||||
setCSSVariable(name, val);
|
setCSSVariable(name, val);
|
||||||
setTimeout(() => setCSSVariable(name, old), timeout);
|
setTimeout(() => setCSSVariable(name, old), timeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register an event handler that would watch for
|
||||||
|
* CSS variable changes
|
||||||
|
*
|
||||||
|
* @param handler Handler to be called
|
||||||
|
*/
|
||||||
|
export function registerEventHandler(handler: CSSVariableEventHandler) {
|
||||||
|
events.push(handler)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function callEvent(e: CSSVariableEvent) {
|
||||||
|
let promises = [];
|
||||||
|
|
||||||
|
for (const event of events) {
|
||||||
|
promises.push(event(e));
|
||||||
|
}
|
||||||
|
|
||||||
|
// trick to execute all promises concurrently
|
||||||
|
await Promise.all(promises);
|
||||||
|
}
|
|
@ -1,7 +1,9 @@
|
||||||
:root {
|
:root {
|
||||||
--sidebar-width: 60px;
|
--sidebar-width: 60px;
|
||||||
--sidebar-button-margin: 8px;
|
--sidebar-button-margin: 8px;
|
||||||
--sidebar-button-icon-size: 16px;
|
--sidebar-button-icon-size: 11pt;
|
||||||
|
--sidebar-button-font-size: 9pt;
|
||||||
|
--sidebar-button-size: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=text] {
|
input[type=text] {
|
||||||
|
|
|
@ -6,21 +6,53 @@
|
||||||
import VscArrowLeft from "svelte-icons-pack/vsc/VscArrowLeft";
|
import VscArrowLeft from "svelte-icons-pack/vsc/VscArrowLeft";
|
||||||
import BsGearFill from 'svelte-icons-pack/bs/BsGearFill';
|
import BsGearFill from 'svelte-icons-pack/bs/BsGearFill';
|
||||||
import { route, back } from '../../store/RouteStore';
|
import { route, back } from '../../store/RouteStore';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
import { registerEventHandler } from '../../lib/css_var';
|
||||||
|
|
||||||
|
let self: HTMLElement;
|
||||||
|
let longStyle = false;
|
||||||
|
|
||||||
|
const checkLongStyle = () => {
|
||||||
|
if (self.clientWidth >= 120) {
|
||||||
|
longStyle = true;
|
||||||
|
} else {
|
||||||
|
longStyle = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
registerEventHandler((e) => {
|
||||||
|
if (e.name !== '--sidebar-width') return;
|
||||||
|
checkLongStyle();
|
||||||
|
})
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
checkLongStyle()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={style.sidebar}>
|
<div class={style.sidebar} bind:this={self}>
|
||||||
|
|
||||||
<button aria-label="back" class={style.button + ' ' + style.back} on:click={(_) => { back() }}>
|
<button aria-label="back" class={style.button + ' ' + style.back} on:click={(_) => { back() }}>
|
||||||
<Icon src={VscArrowLeft} color='#b2b2b2' size='17px' />
|
<Icon src={VscArrowLeft} color='#b2b2b2' size='17px' />
|
||||||
|
{#if longStyle}
|
||||||
|
Go Back
|
||||||
|
{/if }
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button class={style.button} on:click={() => {route('/')}}>
|
<button class={style.button} on:click={() => {route('/')}}>
|
||||||
<Icon src={VscHome} />
|
<Icon src={VscHome} />
|
||||||
|
{#if longStyle}
|
||||||
|
Home
|
||||||
|
{/if }
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class={style.bottom}>
|
<div class={style.bottom}>
|
||||||
<button class={style.button}>
|
<button class={style.button}>
|
||||||
<Icon src={BsGearFill} />
|
<Icon src={BsGearFill} />
|
||||||
|
{#if longStyle}
|
||||||
|
Settings
|
||||||
|
{/if }
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -20,11 +20,13 @@
|
||||||
.button {
|
.button {
|
||||||
transition: 650ms ease;
|
transition: 650ms ease;
|
||||||
width: calc(var(--sidebar-width) - (var(--sidebar-button-margin) * 2));
|
width: calc(var(--sidebar-width) - (var(--sidebar-button-margin) * 2));
|
||||||
height: calc(var(--sidebar-width) - (var(--sidebar-button-margin) * 2));
|
height: calc(var(--sidebar-button-size) - (var(--sidebar-button-margin) * 2));
|
||||||
margin: var(--sidebar-button-margin);
|
margin: var(--sidebar-button-margin);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
border: 3px solid #272222;
|
border: 3px solid #272222;
|
||||||
border-radius: 9px;
|
border-radius: 9px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: calc(var(--sidebar-button-size) / 3);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 3px solid #444;
|
border: 3px solid #444;
|
||||||
|
@ -39,9 +41,10 @@
|
||||||
&[active] {
|
&[active] {
|
||||||
border: 3px solid #777;
|
border: 3px solid #777;
|
||||||
}
|
}
|
||||||
|
font-size: var(--sidebar-button-font-size);
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
transform: translate(-1px, 1px);
|
transform: translate(-2px, 2px);
|
||||||
height: var(--sidebar-button-icon-size);
|
height: var(--sidebar-button-icon-size);
|
||||||
width: var(--sidebar-button-icon-size);
|
width: var(--sidebar-button-icon-size);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -50,16 +53,12 @@
|
||||||
.back {
|
.back {
|
||||||
height: fit-content !important;
|
height: fit-content !important;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
padding: calc(var(--sidebar-button-margin) / 2);
|
padding: calc(var(--sidebar-button-margin) * .6) calc(var(--sidebar-button-margin) * 1.5);
|
||||||
|
|
||||||
margin-top: calc(var(--sidebar-button-margin) + 4px);
|
margin-top: calc(var(--sidebar-button-margin) + 4px);
|
||||||
&:hover, &:active {
|
&:hover, &:active {
|
||||||
margin-top: var(--sidebar-button-margin);
|
margin-top: var(--sidebar-button-margin);
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
|
||||||
transform: translate(0, 1px);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.bottom {
|
.bottom {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
Loading…
Reference in New Issue