mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2024-12-28 18:46:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

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

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