admin/cobalt
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

web/settings: replace checkbox with toggle

Browse Source 
- equal font size & padding for all subtexts in settings
- equal padding & border radius for all settings components

it just looks way better now
This commit is contained in:
wukko
2024-06-29 22:51:24 +06:00
parent c7befcb100
commit ad6539e3bd
9 changed files with 139 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
web/src/components/buttons/SettingsCheckbox.svelte
View File

@@ -1,100 +0,0 @@
<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 IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
export let settingContext: Context;
export let settingId: Id;
export let title: string;
export let description: string = "";
$: setting = $settings[settingContext][settingId];
$: isChecked = !!setting;
</script>
<button
id="setting-button-{settingContext}-{String(settingId)}"
class="checkbox-container"
on:click={() =>
updateSetting({
[settingContext]: {
[settingId]: !isChecked,
},
})
}
>
<div class="checkbox" class:checked={isChecked}>
<div class="checkbox-icon">
<IconCheck />
</div>
</div>
<div class="checkbox-text">
<h4 class="checkbox-title">{title}</h4>
{#if description.length > 0}
<div class="subtext checkbox-description">{description}</div>
{/if}
</div>
</button>
<style>
.checkbox-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
justify-content: start;
text-align: left;
transform: none;
padding: 6px 12px;
}
.checkbox-text {
display: flex;
flex-direction: column;
}
.checkbox {
display: flex;
justify-content: center;
align-items: center;
padding: 1px;
aspect-ratio: 1/1;
border-radius: 5px;
box-shadow: 0 0 0 2px var(--secondary);
}
.checkbox-icon {
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
.checkbox-icon :global(svg) {
height: 18px;
width: 18px;
stroke: var(--primary);
stroke-width: 2px;
}
.checkbox.checked {
background: var(--secondary);
}
.checkbox.checked .checkbox-icon {
opacity: 1;
}
.checkbox-description {
font-size: 12px;
}
</style>

72
web/src/components/buttons/SettingsToggle.svelte Normal file
View File

@@ -0,0 +1,72 @@
<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>

7
web/src/components/buttons/Switcher.svelte
View File

@@ -28,16 +28,15 @@
}
.switcher.big {
--switcher-inner-padding: 4px;
border-radius: calc(var(--border-radius) + var(--switcher-inner-padding));
background: var(--button);
box-shadow: var(--button-box-shadow);
padding: var(--switcher-inner-padding);
padding: var(--sidebar-inner-padding);
}
.switcher.big :global(.button) {
width: 100%;
height: calc(40px - var(--switcher-inner-padding));
height: calc(40px - var(--sidebar-inner-padding));
border-radius: calc(var(--border-radius) - var(--sidebar-inner-padding));;
}
.switcher.big :global(.button:not(:focus-visible)) {

42
web/src/components/misc/Toggle.svelte Normal file
View File

@@ -0,0 +1,42 @@
<script lang="ts">
export let enabled;
</script>
<div class="toggle" class:enabled={enabled}>
<div class="toggle-switcher"></div>
</div>
<style>
.toggle {
--base-size: 20px;
--ratio-factor: 0.9;
display: flex;
justify-content: start;
align-items: center;
min-width: calc(var(--base-size) * (1 + var(--ratio-factor)));
padding: 2px;
aspect-ratio: 2/1;
border-radius: 5px;
border-radius: 100px;
background: var(--toggle-bg);
transition: background 0.2s;
}
.toggle-switcher {
height: var(--base-size);
width: var(--base-size);
background: var(--white);
border-radius: 100px;
transform: translateX(0%);
transition: transform 0.2s;
}
.toggle.enabled {
background: var(--toggle-bg-enabled);
}
.toggle.enabled .toggle-switcher {
transform: translateX(calc(100% * var(--ratio-factor)));
}
</style>