web/settings: navigation draft
also unified "active" class/state across all components & added more colors
This commit is contained in:
parent
0372e8df47
commit
a12655a834
12 changed files with 195 additions and 34 deletions
|
@ -14,13 +14,13 @@
|
|||
export let settingValue: Value;
|
||||
|
||||
$: setting = $settings[settingContext][settingId];
|
||||
$: isSelected = setting === settingValue;
|
||||
$: isActive = setting === settingValue;
|
||||
</script>
|
||||
|
||||
<button
|
||||
id="setting-button-{settingContext}-{String(settingId)}-{settingValue}"
|
||||
class="button"
|
||||
class:selected={isSelected}
|
||||
class:active={isActive}
|
||||
on:click={() =>
|
||||
updateSetting({
|
||||
[settingContext]: {
|
||||
|
|
55
web/src/components/settings/SettingsCategory.svelte
Normal file
55
web/src/components/settings/SettingsCategory.svelte
Normal file
|
@ -0,0 +1,55 @@
|
|||
<script lang="ts">
|
||||
import { page } from "$app/stores";
|
||||
|
||||
export let categoryName: string;
|
||||
export let categoryLink: string;
|
||||
export let iconColor: "gray" | "blue" | "green" = "gray";
|
||||
|
||||
$: isActive = $page.url.pathname === `/settings/${categoryLink}`;
|
||||
</script>
|
||||
|
||||
<a
|
||||
id="settings-category"
|
||||
href="/settings/{categoryLink}"
|
||||
class:active={isActive}
|
||||
>
|
||||
<div id="category-icon" style="background: var(--{iconColor})">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<span>{categoryName}</span>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
#settings-category {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
font-weight: 500;
|
||||
background: var(--primary);
|
||||
color: var(--button-text);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
#settings-category:hover {
|
||||
background: var(--button-hover-transparent);
|
||||
}
|
||||
|
||||
#settings-category span {
|
||||
font-size: 14.5px;
|
||||
}
|
||||
|
||||
#category-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#settings-category.active {
|
||||
background: var(--secondary);
|
||||
color: var(--primary);
|
||||
}
|
||||
</style>
|
28
web/src/components/settings/SettingsSection.svelte
Normal file
28
web/src/components/settings/SettingsSection.svelte
Normal file
|
@ -0,0 +1,28 @@
|
|||
<script lang="ts">
|
||||
export let sectionTitle: string;
|
||||
</script>
|
||||
|
||||
<div id="settings-section">
|
||||
<div id="settings-section-title">{sectionTitle}</div>
|
||||
<div id="settings-section-categories">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#settings-section,
|
||||
#settings-section-categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#settings-section {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#settings-section-title {
|
||||
font-size: 12px;
|
||||
color: var(--gray);
|
||||
padding-left: 8px;
|
||||
}
|
||||
</style>
|
|
@ -57,7 +57,6 @@
|
|||
opacity: 0.8;
|
||||
height: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.sidebar-tab.active {
|
||||
|
|
|
@ -15,12 +15,14 @@
|
|||
:global(:root) {
|
||||
--primary: #ffffff;
|
||||
--secondary: #000000;
|
||||
|
||||
--gray: #8d8d95;
|
||||
--blue: #2f8af9;
|
||||
--green: #51cf5e;
|
||||
|
||||
--button: #eeeeee;
|
||||
--button: #f4f4f4;
|
||||
--button-hover: #e8e8e8;
|
||||
--button-hover-transparent: rgba(0, 0, 0, 0.03);
|
||||
--button-hover-transparent: rgba(0, 0, 0, 0.06);
|
||||
--button-stroke: rgba(0, 0, 0, 0.08);
|
||||
--button-text: #282828;
|
||||
|
||||
|
@ -100,6 +102,7 @@
|
|||
:global(a) {
|
||||
text-decoration: none;
|
||||
text-decoration-line: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
:global(svg),
|
||||
|
@ -133,7 +136,7 @@
|
|||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
:global(.button.selected) {
|
||||
:global(.button.active) {
|
||||
background: var(--secondary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
|
99
web/src/routes/settings/+layout.svelte
Normal file
99
web/src/routes/settings/+layout.svelte
Normal file
|
@ -0,0 +1,99 @@
|
|||
<script>
|
||||
import SettingsCategory from "../../components/settings/SettingsCategory.svelte";
|
||||
import SettingsSection from "../../components/settings/SettingsSection.svelte";
|
||||
|
||||
import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
|
||||
import IconAccessible from "@tabler/icons-svelte/IconAccessible.svelte";
|
||||
|
||||
import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
|
||||
import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
|
||||
import IconFileSettings from "@tabler/icons-svelte/IconFileSettings.svelte";
|
||||
|
||||
const iconSize = 18;
|
||||
const iconStroke = 1.5;
|
||||
</script>
|
||||
|
||||
<div id="settings-page">
|
||||
<div id="settings-sidebar">
|
||||
<div class="page-title">settings</div>
|
||||
<nav id="settings-navigation">
|
||||
<SettingsSection sectionTitle="general">
|
||||
<SettingsCategory
|
||||
categoryName="appearance"
|
||||
categoryLink="general/appearance"
|
||||
iconColor="blue"
|
||||
>
|
||||
<IconSunHigh size={iconSize} stroke={iconStroke} color="var(--primary)" />
|
||||
</SettingsCategory>
|
||||
<SettingsCategory
|
||||
categoryName="accessibility"
|
||||
categoryLink="general/accessibility"
|
||||
iconColor="blue"
|
||||
>
|
||||
<IconAccessible size={iconSize} stroke={iconStroke} color="var(--primary)"/>
|
||||
</SettingsCategory>
|
||||
</SettingsSection>
|
||||
<SettingsSection sectionTitle="save">
|
||||
<SettingsCategory
|
||||
categoryName="video"
|
||||
categoryLink="save/video"
|
||||
iconColor="green"
|
||||
>
|
||||
<IconMovie size={iconSize} stroke={iconStroke} color="var(--primary)" />
|
||||
</SettingsCategory>
|
||||
<SettingsCategory
|
||||
categoryName="audio"
|
||||
categoryLink="save/audio"
|
||||
iconColor="green"
|
||||
>
|
||||
<IconMusic size={iconSize} stroke={iconStroke} color="var(--primary)"/>
|
||||
</SettingsCategory>
|
||||
<SettingsCategory
|
||||
categoryName="metadata"
|
||||
categoryLink="save/metadata"
|
||||
iconColor="green"
|
||||
>
|
||||
<IconFileSettings size={iconSize} stroke={iconStroke} color="var(--primary)"/>
|
||||
</SettingsCategory>
|
||||
</SettingsSection>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<slot></slot>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#settings-sidebar,
|
||||
#settings-navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#settings-sidebar {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#settings-page {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
overflow: hidden;
|
||||
padding-left: calc(60px - var(--padding));
|
||||
padding-top: calc(60px - var(--padding));
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
#settings-sidebar {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
#settings-navigation {
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
|
@ -10,32 +10,4 @@
|
|||
</script>
|
||||
|
||||
<div>
|
||||
<div>settings (placeholder)</div>
|
||||
<br>
|
||||
{#each Object.entries(switchers) as [context, settingIdParent]}
|
||||
<div>
|
||||
<div>{context} context:</div>
|
||||
<br>
|
||||
</div>
|
||||
{#each Object.entries(settingIdParent) as [settingId, settingValue]}
|
||||
{#if settingValue instanceof Array}
|
||||
<div>{settingId}</div>
|
||||
<Switcher>
|
||||
{#each settingValue as value}
|
||||
<SettingsButton settingContext="{context}" settingId="{settingId}" settingValue="{value}">
|
||||
{value}
|
||||
</SettingsButton>
|
||||
{/each}
|
||||
</Switcher>
|
||||
<br>
|
||||
{/if}
|
||||
|
||||
{#if typeof settingValue === "boolean"}
|
||||
<SettingsCheckbox settingContext={context} settingId="{settingId}">
|
||||
{settingId}
|
||||
</SettingsCheckbox>
|
||||
<br>
|
||||
{/if}
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
<div>accessibility settings</div>
|
1
web/src/routes/settings/general/appearance/+page.svelte
Normal file
1
web/src/routes/settings/general/appearance/+page.svelte
Normal file
|
@ -0,0 +1 @@
|
|||
<div>appearance settings</div>
|
1
web/src/routes/settings/save/audio/+page.svelte
Normal file
1
web/src/routes/settings/save/audio/+page.svelte
Normal file
|
@ -0,0 +1 @@
|
|||
<div>audio settings</div>
|
1
web/src/routes/settings/save/metadata/+page.svelte
Normal file
1
web/src/routes/settings/save/metadata/+page.svelte
Normal file
|
@ -0,0 +1 @@
|
|||
<div>metadata settings</div>
|
1
web/src/routes/settings/save/video/+page.svelte
Normal file
1
web/src/routes/settings/save/video/+page.svelte
Normal file
|
@ -0,0 +1 @@
|
|||
<div>video settings</div>
|
Loading…
Reference in a new issue