web/settings: move sub navigation into its own component
This commit is contained in:
wukko
@@ -1,17 +1,17 @@
|
||||
<script lang="ts">
|
||||
import { page } from "$app/stores";
|
||||
import { browser } from "$app/environment";
|
||||
|
||||
import settings from "$lib/state/settings";
|
||||
|
||||
import { version } from "$lib/version";
|
||||
|
||||
import { t } from "$lib/i18n/translations";
|
||||
import { defaultSettingsPage } from "$lib/subnav";
|
||||
|
||||
import SettingsNavTab from "$components/settings/SettingsNavTab.svelte";
|
||||
import SettingsNavSection from "$components/settings/SettingsNavSection.svelte";
|
||||
import PageNav from "$components/subnav/PageNav.svelte";
|
||||
|
||||
import PageNavTab from "$components/subnav/PageNavTab.svelte";
|
||||
import PageNavSection from "$components/subnav/PageNavSection.svelte";
|
||||
|
||||
import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
|
||||
import IconLock from "@tabler/icons-svelte/IconLock.svelte";
|
||||
import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
|
||||
|
||||
import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
|
||||
import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
|
||||
@@ -21,293 +21,84 @@
|
||||
import IconWorld from "@tabler/icons-svelte/IconWorld.svelte";
|
||||
import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";
|
||||
|
||||
import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
|
||||
|
||||
import { goto } from "$app/navigation";
|
||||
import { defaultSettingsPage } from "$lib/settings/defaults";
|
||||
|
||||
let screenWidth: number;
|
||||
|
||||
$: versionText = $version ? `v${$version.version}-${$version.commit.slice(0, 8)}` : '\xa0';
|
||||
|
||||
$: currentPageTitle = $page.url.pathname.split("/").at(-1);
|
||||
$: stringPageTitle =
|
||||
currentPageTitle !== "settings"
|
||||
? ` / ${$t(`settings.page.${currentPageTitle}`)}`
|
||||
: "";
|
||||
|
||||
$: isMobile = screenWidth <= 750;
|
||||
$: isHome = $page.url.pathname === "/settings";
|
||||
$: {
|
||||
if (browser && !isMobile && isHome) {
|
||||
goto(defaultSettingsPage(), { replaceState: true });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
{$t("tabs.settings")}{stringPageTitle} ~ {$t("general.cobalt")}
|
||||
</title>
|
||||
</svelte:head>
|
||||
<PageNav
|
||||
pageName="settings"
|
||||
pageSubtitle={versionText}
|
||||
homeDesktopPath={defaultSettingsPage()}
|
||||
homeNavPath="/settings"
|
||||
homeTitle={$t("tabs.settings")}
|
||||
>
|
||||
<svelte:fragment slot="navigation">
|
||||
<PageNavSection>
|
||||
<PageNavTab
|
||||
tabPath="/settings/appearance"
|
||||
tabTitle={$t("settings.page.appearance")}
|
||||
iconColor="blue"
|
||||
>
|
||||
<IconSunHigh />
|
||||
</PageNavTab>
|
||||
<PageNavTab
|
||||
tabPath="/settings/privacy"
|
||||
tabTitle={$t("settings.page.privacy")}
|
||||
iconColor="blue"
|
||||
>
|
||||
<IconLock />
|
||||
</PageNavTab>
|
||||
</PageNavSection>
|
||||
|
||||
<svelte:window bind:innerWidth={screenWidth} />
|
||||
<PageNavSection>
|
||||
<PageNavTab
|
||||
tabPath="/settings/video"
|
||||
tabTitle={$t("settings.page.video")}
|
||||
iconColor="green"
|
||||
>
|
||||
<IconMovie />
|
||||
</PageNavTab>
|
||||
<PageNavTab
|
||||
tabPath="/settings/audio"
|
||||
tabTitle={$t("settings.page.audio")}
|
||||
iconColor="green"
|
||||
>
|
||||
<IconMusic />
|
||||
</PageNavTab>
|
||||
<PageNavTab
|
||||
tabPath="/settings/download"
|
||||
tabTitle={$t("settings.page.download")}
|
||||
iconColor="green"
|
||||
>
|
||||
<IconFileDownload />
|
||||
</PageNavTab>
|
||||
</PageNavSection>
|
||||
|
||||
<div id="settings-page">
|
||||
<div id="settings-sidebar" class:back-visible={!isHome && isMobile}>
|
||||
<div id="settings-header">
|
||||
{#if isMobile}
|
||||
{#if !isHome}
|
||||
<a
|
||||
class="back-button"
|
||||
href="/settings"
|
||||
role="button"
|
||||
aria-label={$t("a11y.general.back")}
|
||||
>
|
||||
<IconArrowLeft />
|
||||
</a>
|
||||
{/if}
|
||||
<h3
|
||||
id="settings-page-title"
|
||||
aria-level="1"
|
||||
tabindex="-1"
|
||||
data-first-focus
|
||||
data-focus-ring-hidden
|
||||
>
|
||||
{#if !isHome}
|
||||
{$t(`settings.page.${currentPageTitle}`)}
|
||||
{:else}
|
||||
{$t("tabs.settings")}
|
||||
{/if}
|
||||
</h3>
|
||||
{:else}
|
||||
<div class="subtext settings-version">
|
||||
{versionText}
|
||||
</div>
|
||||
<h2 id="settings-page-title" aria-level="1">
|
||||
{$t("tabs.settings")}
|
||||
</h2>
|
||||
{/if}
|
||||
</div>
|
||||
<nav id="settings-navigation" class:visible-mobile={isMobile && isHome}>
|
||||
<SettingsNavSection>
|
||||
<SettingsNavTab
|
||||
tabName="appearance"
|
||||
tabLink="appearance"
|
||||
iconColor="blue"
|
||||
>
|
||||
<IconSunHigh />
|
||||
</SettingsNavTab>
|
||||
<SettingsNavTab
|
||||
tabName="privacy"
|
||||
tabLink="privacy"
|
||||
iconColor="blue"
|
||||
>
|
||||
<IconLock />
|
||||
</SettingsNavTab>
|
||||
</SettingsNavSection>
|
||||
|
||||
<SettingsNavSection>
|
||||
<SettingsNavTab
|
||||
tabName="video"
|
||||
tabLink="video"
|
||||
iconColor="green"
|
||||
>
|
||||
<IconMovie />
|
||||
</SettingsNavTab>
|
||||
<SettingsNavTab
|
||||
tabName="audio"
|
||||
tabLink="audio"
|
||||
iconColor="green"
|
||||
>
|
||||
<IconMusic />
|
||||
</SettingsNavTab>
|
||||
<SettingsNavTab
|
||||
tabName="download"
|
||||
tabLink="download"
|
||||
iconColor="green"
|
||||
>
|
||||
<IconFileDownload />
|
||||
</SettingsNavTab>
|
||||
</SettingsNavSection>
|
||||
|
||||
<SettingsNavSection>
|
||||
<SettingsNavTab
|
||||
tabName="instances"
|
||||
tabLink="instances"
|
||||
<PageNavSection>
|
||||
<PageNavTab
|
||||
tabPath="/settings/instances"
|
||||
tabTitle={$t("settings.page.instances")}
|
||||
iconColor="gray"
|
||||
>
|
||||
<IconWorld />
|
||||
</PageNavTab>
|
||||
<PageNavTab
|
||||
tabPath="/settings/advanced"
|
||||
tabTitle={$t("settings.page.advanced")}
|
||||
iconColor="gray"
|
||||
>
|
||||
<IconSettingsBolt />
|
||||
</PageNavTab>
|
||||
{#if $settings.advanced.debug}
|
||||
<PageNavTab
|
||||
tabPath="/settings/debug"
|
||||
tabTitle={$t("settings.page.debug")}
|
||||
iconColor="gray"
|
||||
>
|
||||
<IconWorld />
|
||||
</SettingsNavTab>
|
||||
<SettingsNavTab
|
||||
tabName="advanced"
|
||||
tabLink="advanced"
|
||||
iconColor="gray"
|
||||
>
|
||||
<IconSettingsBolt />
|
||||
</SettingsNavTab>
|
||||
{#if $settings.advanced.debug}
|
||||
<SettingsNavTab
|
||||
tabName="debug"
|
||||
tabLink="debug"
|
||||
iconColor="gray"
|
||||
>
|
||||
<IconBug />
|
||||
</SettingsNavTab>
|
||||
{/if}
|
||||
</SettingsNavSection>
|
||||
|
||||
{#if isMobile && isHome}
|
||||
<div class="subtext settings-version center">
|
||||
{versionText}
|
||||
</div>
|
||||
<IconBug />
|
||||
</PageNavTab>
|
||||
{/if}
|
||||
</nav>
|
||||
</div>
|
||||
</PageNavSection>
|
||||
</svelte:fragment>
|
||||
|
||||
{#if !isMobile || !isHome}
|
||||
<main
|
||||
id="settings-page-content"
|
||||
tabindex="-1"
|
||||
data-first-focus
|
||||
data-focus-ring-hidden
|
||||
>
|
||||
<slot></slot>
|
||||
</main>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#settings-page {
|
||||
--settings-nav-width: 250px;
|
||||
--settings-padding: 30px;
|
||||
--settings-padding-small: calc(
|
||||
var(--settings-padding) - var(--padding)
|
||||
);
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: var(--settings-nav-width) 1fr;
|
||||
overflow: hidden;
|
||||
padding-left: var(--settings-padding);
|
||||
}
|
||||
|
||||
#settings-page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 600px;
|
||||
padding: calc(var(--settings-padding) / 2);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#settings-sidebar,
|
||||
#settings-navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#settings-sidebar {
|
||||
width: var(--settings-nav-width);
|
||||
padding-top: var(--settings-padding);
|
||||
}
|
||||
|
||||
#settings-sidebar.back-visible {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#settings-sidebar {
|
||||
gap: var(--padding);
|
||||
}
|
||||
|
||||
#settings-navigation {
|
||||
gap: var(--padding);
|
||||
padding-bottom: var(--padding);
|
||||
}
|
||||
|
||||
#settings-header {
|
||||
--back-padding: calc(var(--padding) / 2);
|
||||
}
|
||||
|
||||
.settings-version {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.settings-version.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--secondary);
|
||||
gap: var(--back-padding);
|
||||
padding: var(--back-padding);
|
||||
|
||||
position: absolute;
|
||||
left: var(--back-padding);
|
||||
}
|
||||
|
||||
.back-button:active {
|
||||
background: var(--button-hover-transparent);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.back-button :global(svg) {
|
||||
stroke-width: 1.8px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
#settings-page {
|
||||
--settings-nav-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#settings-navigation {
|
||||
padding: var(--padding);
|
||||
padding-bottom: calc(var(--padding) * 2);
|
||||
}
|
||||
|
||||
#settings-page-content {
|
||||
padding: var(--padding) 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#settings-page-content {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
#settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
padding: var(--padding);
|
||||
gap: 4px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#settings-sidebar {
|
||||
gap: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#settings-page-title {
|
||||
text-align: center;
|
||||
letter-spacing: -0.3px;
|
||||
font-size: 16.5px;
|
||||
}
|
||||
|
||||
#settings-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#settings-navigation.visible-mobile {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<slot slot="content"></slot>
|
||||
</PageNav>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
import { onMount } from "svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
import { device, app } from "$lib/device";
|
||||
import { version } from "$lib/version";
|
||||
import { device, app } from "$lib/device";
|
||||
import { defaultSettingsPage } from "$lib/subnav";
|
||||
import settings, { storedSettings } from "$lib/state/settings";
|
||||
import { defaultSettingsPage } from "$lib/settings/defaults";
|
||||
|
||||
onMount(() => {
|
||||
if (!$settings.advanced.debug) {
|
||||
|
||||
Reference in New Issue
Block a user