long sidebar style

This commit is contained in:
b1ek 2023-08-27 11:07:04 +10:00
parent 9a76383154
commit 9b84b4483e
Signed by: blek
GPG Key ID: 14546221E3595D0C
4 changed files with 81 additions and 9 deletions

View File

@ -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);
}

View File

@ -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] {

View File

@ -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>

View File

@ -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;