mirror of
https://github.com/wukko/cobalt.git
synced 2024-11-15 12:50:01 +00:00
web/settings: add section ids
This commit is contained in:
parent
9b3f289b0e
commit
430bfaca43
6 changed files with 41 additions and 16 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue