mirror of
https://github.com/imputnet/cobalt.git
synced 2025-06-29 18:08:28 +00:00
5c1c401470
- equal font size & padding for all subtexts in settings - equal padding & border radius for all settings components it just looks way better now
73 lines
1.8 KiB
Svelte
73 lines
1.8 KiB
Svelte
<script
|
|
lang="ts"
|
|
generics="
|
|
Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>,
|
|
Id extends keyof CobaltSettings[Context]
|
|
"
|
|
>
|
|
import settings, { updateSetting } from "$lib/settings";
|
|
import type { CobaltSettings } from "$lib/types/settings";
|
|
|
|
import Toggle from "$components/misc/Toggle.svelte";
|
|
|
|
export let settingContext: Context;
|
|
export let settingId: Id;
|
|
|
|
export let title: string;
|
|
export let description: string = "";
|
|
|
|
$: setting = $settings[settingContext][settingId];
|
|
$: isEnabled = !!setting;
|
|
</script>
|
|
|
|
<div id="setting-toggle-{settingContext}-{String(settingId)}" class="toggle-parent">
|
|
<button
|
|
class="toggle-container"
|
|
on:click={() =>
|
|
updateSetting({
|
|
[settingContext]: {
|
|
[settingId]: !isEnabled,
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<div class="toggle-text">
|
|
<h4 class="toggle-title">{title}</h4>
|
|
</div>
|
|
<Toggle enabled={isEnabled} />
|
|
</button>
|
|
<!--
|
|
description is repeated here because there may be several toggles per settings category,
|
|
and each of them needs its own description. this is intended. don't "clean it up".
|
|
-->
|
|
{#if description}
|
|
<div class="subtext toggle-description">{description}</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.toggle-parent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.toggle-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: var(--padding);
|
|
justify-content: space-between;
|
|
text-align: left;
|
|
transform: none;
|
|
padding: 8px 16px;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.toggle-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|