From 464ba6086116b5bbe37847b8a3765400e16cf837 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Krysiewicz?= Date: Mon, 4 Dec 2023 10:42:19 +0100 Subject: [PATCH 1/7] Settings popup --- gui/next/src/lib/ui/Icon.svelte | 5 +- gui/next/src/lib/ui/Settings.svelte | 103 ++++++++++++++++++++++++ gui/next/src/lib/ui/forms/Number.svelte | 2 +- gui/next/src/routes/+page.svelte | 20 ++++- 4 files changed, 127 insertions(+), 3 deletions(-) create mode 100644 gui/next/src/lib/ui/Settings.svelte diff --git a/gui/next/src/lib/ui/Icon.svelte b/gui/next/src/lib/ui/Icon.svelte index 02a8729a..90b72170 100644 --- a/gui/next/src/lib/ui/Icon.svelte +++ b/gui/next/src/lib/ui/Icon.svelte @@ -37,7 +37,10 @@ resizeHorizontal: 'M5.2 2.3c0-.4.3-.8.8-.8s.8.3.8.8v19.5c0 .4-.3.8-.8.8s-.8-.3-.8-.8V2.3zm6 0c0-.4.3-.8.8-.8s.8.3.8.8v19.5c0 .4-.3.8-.8.8s-.8-.3-.8-.8V2.3zm6 0c0-.4.3-.8.8-.8s.8.3.8.8v19.5c0 .4-.3.8-.8.8s-.8-.3-.8-.8V2.3z', info: 'M14.6 23.5c-2.4 0-4.3-1.9-4.3-4.3v-8.5H8.2c-.6 0-1.1-.5-1.1-1.1s.5-1.1 1.1-1.1h1.6c1.5 0 2.7 1.2 2.7 2.7v8c0 1.2.9 2.1 2.1 2.1h1.6c.6 0 1.1.5 1.1 1.1s-.5 1.1-1.1 1.1h-1.6zm-4-19.2c-1 0-1.9-.9-1.9-1.9S9.6.5 10.6.5s1.9.9 1.9 1.9-.9 1.9-1.9 1.9z', sortAZ: 'M8.8 0h-7C.8 0 0 .8 0 1.8v9h1.5v-4H9v3.9h1.5v-9C10.5.8 9.7 0 8.8 0zM1.5 5.4V1.8c0-.1.1-.2.2-.2h7c.2-.1.3 0 .3.2v3.6H1.5zm8.8 17.1V24H1.6c-.4 0-.9-.1-1.1-.4-.3-.3-.5-1 0-1.6l7.2-7.3H0v-1.5h8.5c.4 0 .8.2 1.1.4.5.4.5 1-.1 1.6l-7.2 7.3h8zm8.4-1.3h-.1c-.4 0-.7-.2-.9-.4l-4-4.3c-.1-.1-.2-.3-.2-.5s.1-.4.2-.5c.1-.1.3-.2.5-.2s.4.1.5.2l3.2 3.5V4c0-.4.3-.8.8-.8s.8.3.8.8v14.9l3.2-3.4c.1-.2.3-.2.5-.2s.4.1.5.2c.1.1.2.3.2.5s-.1.4-.2.5l-4 4.3c-.3.3-.6.4-.9.4h-.1z', - sortZA: 'M8.8 13.2h-7C.8 13.2 0 14 0 15v9h1.5v-3.9H9V24h1.5v-9c0-1-.8-1.8-1.7-1.8zm-7.3 5.4V15c0-.1.1-.2.2-.2h7c.2 0 .3.1.3.2v3.6H1.5zm8.8-9.4v1.5H1.6c-.4 0-.9-.1-1.1-.4-.3-.2-.5-.9 0-1.5l7.2-7.3H0V0h8.5c.4 0 .8.2 1.1.4.5.4.5 1-.1 1.6L2.4 9.2h7.9zm8.4 12h-.1c-.4 0-.7-.2-.9-.4l-4-4.3c-.1-.1-.2-.3-.2-.5s.1-.4.2-.5c.1-.1.3-.2.5-.2s.4.1.5.2l3.2 3.5V4c0-.4.3-.8.8-.8s.8.3.8.8v14.9l3.2-3.4c.1-.2.3-.2.5-.2s.4.1.5.2c.1.1.2.3.2.5s-.1.4-.2.5l-4 4.3c-.3.3-.6.4-.9.4h-.1z' + sortZA: 'M8.8 13.2h-7C.8 13.2 0 14 0 15v9h1.5v-3.9H9V24h1.5v-9c0-1-.8-1.8-1.7-1.8zm-7.3 5.4V15c0-.1.1-.2.2-.2h7c.2 0 .3.1.3.2v3.6H1.5zm8.8-9.4v1.5H1.6c-.4 0-.9-.1-1.1-.4-.3-.2-.5-.9 0-1.5l7.2-7.3H0V0h8.5c.4 0 .8.2 1.1.4.5.4.5 1-.1 1.6L2.4 9.2h7.9zm8.4 12h-.1c-.4 0-.7-.2-.9-.4l-4-4.3c-.1-.1-.2-.3-.2-.5s.1-.4.2-.5c.1-.1.3-.2.5-.2s.4.1.5.2l3.2 3.5V4c0-.4.3-.8.8-.8s.8.3.8.8v14.9l3.2-3.4c.1-.2.3-.2.5-.2s.4.1.5.2c.1.1.2.3.2.5s-.1.4-.2.5l-4 4.3c-.3.3-.6.4-.9.4h-.1z', + settings: 'M8.2 24c-.7 0-1.3-.2-1.8-.7-.6-.5-.9-1.3-.9-2.1l.1-1.4c0-.7-.5-1.2-1.1-1.3h-.2l-1.4.1h-.1c-.7 0-1.3-.2-1.8-.7-.6-.5-1-1.2-1-1.9 0-.8.3-1.6.9-2.1l1-.9c.2-.2.4-.5.4-.8 0-.3-.1-.6-.3-.9l-.1-.1-1-.9C.4 9.7 0 9 0 8.3s.2-1.4.7-2c.5-.6 1.2-.9 2-.9h.1l1.4.1h.1c.7 0 1.2-.5 1.2-1.1V2.8C5.4 1.4 6.5.1 8 0h.1c.8 0 1.5.3 2 .9l.9 1c.2.2.5.4.8.4h.1c.3 0 .6-.1.8-.3l.1-.1.9-1c.6-.5 1.3-.9 2-.9h.1c.7 0 1.3.2 1.8.7.6.5.9 1.3.9 2.1l-.1 1.4c0 .7.5 1.2 1.1 1.3h.2l1.4-.1h.1c.7 0 1.3.2 1.8.7.6.5 1 1.2 1 1.9 0 .8-.3 1.6-.9 2.1l-1 .9c-.2.2-.4.5-.4.8 0 .3.1.6.3.9l.1.1 1 .9c.5.5.9 1.1.9 1.9 0 .7-.2 1.4-.7 2-.5.6-1.2.9-2 .9h-.1l-1.4-.1h-.1c-.3 0-.6.1-.8.3-.2.2-.4.5-.4.8v.1l.1 1.4c0 .7-.2 1.4-.7 2s-1.2 1-1.9 1h-.1c-.8 0-1.5-.3-2-.9l-.9-1c-.2-.3-.6-.4-.9-.4-.3 0-.6.1-.8.3l-.1.1-.9 1c-.7.6-1.4.9-2.1.9zm-3.9-7h.1c1.5.1 2.6 1.4 2.6 2.8l-.1 1.4c0 .4.1.7.4.9.2.2.5.3.8.3h.1c.3 0 .6-.2.8-.4l.9-1 .2-.2c.5-.5 1.1-.7 1.8-.7.8 0 1.5.3 2 .9l.9 1c.2.2.6.4.9.4.7 0 1.2-.6 1.2-1.3l.1-1.3v-.3c0-.7.4-1.4.9-1.9s1.1-.7 1.8-.7h.1l1.4.1h.1c.3 0 .7-.1.9-.4.2-.2.3-.5.3-.9 0-.3-.2-.6-.4-.8l-1-.9-.2-.2c-1-1.1-.9-2.8.2-3.8l1-.9c.3-.2.4-.6.4-1 0-.3-.2-.6-.4-.8-.2-.2-.5-.3-.8-.3H19.6C18.1 6.9 17 5.7 17 4.2l.1-1.4c0-.4-.1-.7-.4-1-.2-.2-.5-.3-.8-.3h-.1c-.3 0-.6.2-.8.4l-.9 1-.2.2c-.5.4-1.1.7-1.8.7H12c-.7 0-1.4-.4-1.9-.9l-.9-1c-.4-.2-.7-.4-1-.4h-.1c-.7 0-1.2.6-1.2 1.3L7 4.2v.3C6.9 5.9 5.8 7 4.3 7h-.1l-1.4-.1h-.1c-.3 0-.7.2-.9.4-.2.3-.3.6-.3.9 0 .3.2.6.4.8l1 .9.2.2c1 1.1.9 2.8-.2 3.8l-1 .9c-.3.2-.4.6-.4 1 0 .3.2.6.4.8.2.2.5.3.8.3h.1l1.4.1h.1zm7.7.2c-2.9 0-5.2-2.4-5.2-5.2S9.1 6.8 12 6.8s5.2 2.4 5.2 5.2-2.3 5.2-5.2 5.2zm0-9c-2.1 0-3.8 1.7-3.8 3.8s1.7 3.8 3.8 3.8 3.8-1.7 3.8-3.8-1.7-3.8-3.8-3.8z', + layoutHeadline: 'M2.2 6C1 6 0 5 0 3.7V2.2C0 1 1 0 2.2 0h19.5C23 0 24 1 24 2.2v1.5C24 5 23 6 21.8 6H2.2zm0-4.5c-.4 0-.8.3-.8.8v1.5c0 .4.3.7.8.7h19.5c.4 0 .8-.3.8-.8V2.2c0-.4-.3-.8-.8-.8.1.1-19.5.1-19.5.1zm0 13.5C1 15 0 14 0 12.7v-1.5C0 10 1 9 2.2 9h19.5C23 9 24 10 24 11.2v1.5c0 1.2-1 2.2-2.2 2.2H2.2zm0-4.5c-.4 0-.8.3-.8.8v1.5c0 .4.3.8.8.8h19.5c.4 0 .8-.3.8-.8v-1.5c0-.4-.3-.8-.8-.8H2.2zm0 13.5C1 24 0 23 0 21.7v-1.5C0 19 1 18 2.2 18h19.5c1.2 0 2.2 1 2.2 2.2v1.5c0 1.2-1 2.2-2.2 2.2H2.2zm0-4.5c-.4 0-.8.3-.8.8v1.5c0 .4.3.8.8.8h19.5c.4 0 .8-.3.8-.8v-1.5c0-.4-.3-.8-.8-.8H2.2z', + navigationMenu: 'M2.2 18.8c-.4 0-.8-.3-.8-.8s.3-.8.8-.8h19.5c.4 0 .8.3.8.8s-.3.8-.8.8H2.2zm0-6c-.4 0-.8-.3-.8-.8s.3-.8.8-.8h19.5c.4 0 .8.3.8.8s-.3.8-.8.8H2.2zm0-6c-.4 0-.7-.4-.7-.8s.3-.8.8-.8h19.5c.4 0 .8.3.8.8s-.3.8-.8.8H2.2z' }; $: d = icons[icon]; diff --git a/gui/next/src/lib/ui/Settings.svelte b/gui/next/src/lib/ui/Settings.svelte new file mode 100644 index 00000000..7b523558 --- /dev/null +++ b/gui/next/src/lib/ui/Settings.svelte @@ -0,0 +1,103 @@ + + + + + + + + + + +
+ +
diff --git a/gui/next/src/lib/ui/forms/Number.svelte b/gui/next/src/lib/ui/forms/Number.svelte index b2bc5fc0..6dc04a81 100644 --- a/gui/next/src/lib/ui/forms/Number.svelte +++ b/gui/next/src/lib/ui/forms/Number.svelte @@ -133,7 +133,7 @@ const dispatch = createEventDispatcher(); aria-hidden={value >= max} > {increaseLabel} - + diff --git a/gui/next/src/routes/+page.svelte b/gui/next/src/routes/+page.svelte index 407e07af..342a4bd0 100644 --- a/gui/next/src/routes/+page.svelte +++ b/gui/next/src/routes/+page.svelte @@ -4,7 +4,9 @@ // imports // ------------------------------------------------------------------------ import Icon from '$lib/ui/Icon.svelte'; +import Settings from '$lib/ui/Settings.svelte'; +import { page } from '$app/stores'; import { state } from '$lib/state'; import { table } from '$lib/api/table'; @@ -191,7 +193,7 @@ h2 { .links { margin-block-start: 4rem; - padding-block-start: 3.5rem; + padding-block: 3.5rem; display: flex; align-items: center; justify-content: end; @@ -200,6 +202,14 @@ h2 { border-block-start: 1px solid var(--color-frame); } + .links li { + position: relative; + } + + .links li:first-child { + margin-inline-end: auto; + } + @@ -434,6 +444,14 @@ h2 {