80 lines
2.0 KiB
Svelte
80 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import QuickSetting from "./QuickSetting.svelte";
|
|
import { globalMode, themes, theme, type Theme } from "./settings";
|
|
import { faEarthEurope, faPaintRoller, faChevronRight } from '@fortawesome/free-solid-svg-icons';
|
|
import type { ComponentProps } from "svelte";
|
|
import { writable } from "svelte/store";
|
|
|
|
export let rows = 2;
|
|
export let cols = 2;
|
|
|
|
let showMenus = writable(Array.from(Array(rows*cols).keys()).map(() => false));
|
|
|
|
// TODO: figure out how deep object reactivity works, this doesn't feel clean
|
|
let settings: (ComponentProps<QuickSetting> & Record<string, any>)[];
|
|
$: {
|
|
settings = [
|
|
{
|
|
title: "Global Mode",
|
|
subtitle: $globalMode ? 'Enabled' : 'Disabled',
|
|
enabled: $globalMode,
|
|
icon: faEarthEurope,
|
|
click: () => $globalMode = !$globalMode,
|
|
},
|
|
{
|
|
title: "Theme",
|
|
subtitle: $theme,
|
|
enabled: true,
|
|
icon: faPaintRoller,
|
|
chevron: faChevronRight,
|
|
showMenu: $showMenus[1],
|
|
click: () => $showMenus[1] = !$showMenus[1],
|
|
menu: {
|
|
title: "Theme",
|
|
items: themes.map(t => ({
|
|
value: t,
|
|
enabled: $theme === t,
|
|
}))
|
|
},
|
|
menuClick: (theme: CustomEvent<Theme>) => $theme = theme.detail
|
|
},
|
|
{
|
|
title: "",
|
|
subtitle: '',
|
|
},
|
|
{
|
|
title: "",
|
|
subtitle: '',
|
|
}
|
|
];
|
|
}
|
|
|
|
</script>
|
|
|
|
<div class="quick-settings h-100 w-100"
|
|
style:--rows="{rows}"
|
|
style:--cols="{cols}">
|
|
{#each settings as setting, i}
|
|
<QuickSetting
|
|
row="{Math.floor(i / rows) + 1}"
|
|
column="{(i % rows) + 1}"
|
|
enabled="{setting.enabled}"
|
|
icon="{setting.icon}"
|
|
chevron="{setting.chevron}"
|
|
title="{setting.title}"
|
|
bind:showMenu="{$showMenus[i]}"
|
|
menu="{setting.menu}"
|
|
subtitle="{setting.subtitle}"
|
|
on:click="{setting.click}"
|
|
on:menu:click="{setting.menuClick}" />
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.quick-settings {
|
|
display: grid;
|
|
grid-template-rows: repeat(var(--rows), calc(100% / var(--rows)));
|
|
grid-template-columns: repeat(var(--cols), calc(100% / var(--cols)));
|
|
}
|
|
</style>
|