web/settings: add section ids

This commit is contained in:
wukko 2024-07-07 19:14:49 +06:00
parent 9b3f289b0e
commit 430bfaca43
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
6 changed files with 41 additions and 16 deletions

View file

@ -1,16 +1,17 @@
<script lang="ts"> <script lang="ts">
export let sectionId: string;
export let title: string; export let title: string;
export let description: string = ""; export let description: string = "";
</script> </script>
<div class="settings-content"> <section id={sectionId} class="settings-content">
<h3 class="settings-content-title">{title}</h3> <h3 class="settings-content-title">{title}</h3>
<slot></slot> <slot></slot>
{#if description.length > 0} {#if description.length > 0}
<div class="settings-content-description subtext">{description}</div> <div class="settings-content-description subtext">{description}</div>
{/if} {/if}
</div> </section>
<style> <style>
.settings-content { .settings-content {

View file

@ -4,12 +4,12 @@
export let sectionTitle: string; export let sectionTitle: string;
</script> </script>
<section id="settings-section"> <div id="settings-section">
<div id="settings-section-title">{$t(`settings.section.${sectionTitle}`)}</div> <div id="settings-section-title">{$t(`settings.section.${sectionTitle}`)}</div>
<div id="settings-section-categories"> <div id="settings-section-categories">
<slot></slot> <slot></slot>
</div> </div>
</section> </div>
<style> <style>
#settings-section, #settings-section,

View file

@ -12,6 +12,7 @@
</script> </script>
<SettingsCategory <SettingsCategory
sectionId="theme"
title={$t("settings.theme")} title={$t("settings.theme")}
description={$t("settings.theme.description")} description={$t("settings.theme.description")}
> >
@ -28,7 +29,10 @@
</Switcher> </Switcher>
</SettingsCategory> </SettingsCategory>
<SettingsCategory title={$t("settings.accessibility")}> <SettingsCategory
sectionId="accessibility"
title={$t("settings.accessibility")}
>
<SettingsToggle <SettingsToggle
settingContext="accessibility" settingContext="accessibility"
settingId="reduceTransparency" settingId="reduceTransparency"
@ -43,7 +47,7 @@
/> />
</SettingsCategory> </SettingsCategory>
<SettingsCategory title={$t("settings.language")}> <SettingsCategory sectionId="language" title={$t("settings.language")}>
<LanguageDropdown /> <LanguageDropdown />
<SettingsToggle <SettingsToggle
settingContext="appearance" settingContext="appearance"

View file

@ -10,20 +10,24 @@
</script> </script>
<SettingsCategory <SettingsCategory
sectionId="audio-format"
title={$t("settings.audio.format")} title={$t("settings.audio.format")}
description={$t("settings.audio.format.description")} description={$t("settings.audio.format.description")}
> >
<Switcher big={true}> <Switcher big={true}>
{#each audioFormatOptions as value} {#each audioFormatOptions as value}
<SettingsButton settingContext="save" settingId="audioFormat" settingValue={value}> <SettingsButton
settingContext="save"
settingId="audioFormat"
settingValue={value}
>
{$t(`settings.audio.format.${value}`)} {$t(`settings.audio.format.${value}`)}
</SettingsButton> </SettingsButton>
{/each} {/each}
</Switcher> </Switcher>
</SettingsCategory> </SettingsCategory>
<SettingsCategory title={$t("settings.audio.youtube.dub")}> <SettingsCategory sectionId="youtube" title={$t("settings.audio.youtube.dub")}>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="youtubeDubBrowserLang" settingId="youtubeDubBrowserLang"
@ -32,7 +36,10 @@
/> />
</SettingsCategory> </SettingsCategory>
<SettingsCategory title={$t("settings.audio.tiktok.original")}> <SettingsCategory
sectionId="tiktok"
title={$t("settings.audio.tiktok.original")}
>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="tiktokFullAudio" settingId="tiktokFullAudio"

View file

@ -10,20 +10,27 @@
</script> </script>
<SettingsCategory <SettingsCategory
sectionId="filename"
title={$t("settings.metadata.filename")} title={$t("settings.metadata.filename")}
description={$t("settings.metadata.filename.description")} description={$t("settings.metadata.filename.description")}
> >
<Switcher big={true}> <Switcher big={true}>
{#each filenameStyleOptions as value} {#each filenameStyleOptions as value}
<SettingsButton settingContext="save" settingId="filenameStyle" settingValue={value}> <SettingsButton
settingContext="save"
settingId="filenameStyle"
settingValue={value}
>
{$t(`settings.metadata.filename.${value}`)} {$t(`settings.metadata.filename.${value}`)}
</SettingsButton> </SettingsButton>
{/each} {/each}
</Switcher> </Switcher>
</SettingsCategory> </SettingsCategory>
<SettingsCategory title={$t("settings.metadata.file")}> <SettingsCategory
sectionId="disable-metadata"
title={$t("settings.metadata.file")}
>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="disableMetadata" settingId="disableMetadata"
@ -32,7 +39,7 @@
/> />
</SettingsCategory> </SettingsCategory>
<SettingsCategory title={$t("settings.saving.method")}> <SettingsCategory sectionId="saving" title={$t("settings.saving.method")}>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="downloadPopup" settingId="downloadPopup"

View file

@ -11,6 +11,7 @@
</script> </script>
<SettingsCategory <SettingsCategory
sectionId="video-quality"
title={$t("settings.video.quality")} title={$t("settings.video.quality")}
description={$t("settings.video.quality.description")} description={$t("settings.video.quality.description")}
> >
@ -25,6 +26,7 @@
</SettingsCategory> </SettingsCategory>
<SettingsCategory <SettingsCategory
sectionId="youtube-codec"
title={$t("settings.video.youtube.codec")} title={$t("settings.video.youtube.codec")}
description={$t("settings.video.youtube.codec.description")} description={$t("settings.video.youtube.codec.description")}
> >
@ -38,7 +40,9 @@
</SettingsCategory> </SettingsCategory>
<SettingsCategory title={$t("settings.video.twitter.gif")}> <SettingsCategory
sectionId="twitter"
title={$t("settings.video.twitter.gif")}>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="twitterGif" settingId="twitterGif"
@ -47,7 +51,9 @@
/> />
</SettingsCategory> </SettingsCategory>
<SettingsCategory title={$t("settings.video.tiktok.h265")}> <SettingsCategory
sectionId="tiktok"
title={$t("settings.video.tiktok.h265")}>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="tiktokH265" settingId="tiktokH265"