blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web/SettingsCheckbox: proper checkbox style

Browse source
This commit is contained in:
wukko 2024-06-25 19:34:28 +06:00
parent ba2d0bb67f
commit 1f88a211aa
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 58 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
web/src/components/buttons/SettingsCheckbox.svelte
View file

@ -8,6 +8,8 @@
import settings, { updateSetting } from "$lib/settings"; import settings, { updateSetting } from "$lib/settings";
import type { CobaltSettings } from "$lib/types/settings"; import type { CobaltSettings } from "$lib/types/settings";
import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
export let settingContext: Context; export let settingContext: Context;
export let settingId: Id; export let settingId: Id;
@ -18,18 +20,23 @@
$: isChecked = !!setting; $: isChecked = !!setting;
</script> </script>
<div class="checkbox-container"> <button
<input
type="checkbox"
id="setting-button-{settingContext}-{String(settingId)}" id="setting-button-{settingContext}-{String(settingId)}"
bind:checked={isChecked} class="checkbox-container"
on:change={() => on:click={() => {
updateSetting({ updateSetting({
[settingContext]: { [settingContext]: {
[settingId]: isChecked, [settingId]: !isChecked,
}, },
})} });
/> console.log("yass", !isChecked);
}}
>
<div class="checkbox" class:checked={isChecked}>
<div class="checkbox-icon">
<IconCheck />
</div>
</div>
<div class="checkbox-text"> <div class="checkbox-text">
<h4 class="checkbox-title">{title}</h4> <h4 class="checkbox-title">{title}</h4>
@ -37,14 +44,18 @@
<div class="subtext checkbox-description">{description}</div> <div class="subtext checkbox-description">{description}</div>
{/if} {/if}
</div> </div>
</div> </button>
<style> <style>
.checkbox-container { .checkbox-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 10px; gap: 12px;
justify-content: start;
text-align: left;
transform: none;
} }
.checkbox-text { .checkbox-text {
@ -52,6 +63,38 @@
flex-direction: column; 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 { .checkbox-description {
font-size: 12px; font-size: 12px;
} }