mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-04 15:04:43 +00:00
Code Activity

fix: improve accent color picker disabled state

Browse Source
This commit is contained in:
Elias Schneider
2025-06-27 22:38:21 +02:00
parent 052ac008c3
commit d976bf5965
2 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/routes/settings/admin/application-configuration/forms/accent-color-picker.svelte
View File

@@ -7,8 +7,9 @@
let { let {
selectedColor = $bindable(), selectedColor = $bindable(),
previousColor previousColor,
}: { selectedColor: string; previousColor: string } = $props(); disabled = false
}: { selectedColor: string; previousColor: string; disabled?: boolean } = $props();
let showCustomColorDialog = $state(false); let showCustomColorDialog = $state(false);
const accentColors = [ const accentColors = [
@@ -30,10 +31,6 @@
selectedColor = accentValue; selectedColor = accentValue;
applyAccentColor(accentValue); applyAccentColor(accentValue);
} }
function handleCustomColorApply(color: string) {
handleAccentColorChange(color);
}
</script> </script>
<RadioGroup.Root <RadioGroup.Root
@@ -54,7 +51,7 @@
{@render colorOption('Custom', 'custom', false, true)} {@render colorOption('Custom', 'custom', false, true)}
</RadioGroup.Root> </RadioGroup.Root>
<CustomColorDialog bind:open={showCustomColorDialog} onApply={handleCustomColorApply} /> <CustomColorDialog bind:open={showCustomColorDialog} onApply={handleAccentColorChange} />
{#snippet colorOption( {#snippet colorOption(
label: string, label: string,
@@ -66,9 +63,13 @@
<RadioGroup.Item id={color} value={color} class="sr-only" /> <RadioGroup.Item id={color} value={color} class="sr-only" />
<Label <Label
for={color} for={color}
class="cursor-pointer {isCustomColorSelection ? 'group' : ''}" class={{
'cursor-pointer': !disabled,
'cursor-not-allowed': disabled,
group: isCustomColorSelection
}}
onclick={() => { onclick={() => {
if (isCustomColorSelection) { if (isCustomColorSelection && !disabled) {
showCustomColorDialog = true; showCustomColorDialog = true;
} }
}} }}

1
frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
View File

@@ -161,6 +161,7 @@
<AccentColorPicker <AccentColorPicker
previousColor={appConfig.accentColor} previousColor={appConfig.accentColor}
bind:selectedColor={$inputs.accentColor.value} bind:selectedColor={$inputs.accentColor.value}
disabled={$appConfigStore.uiConfigDisabled}
/> />
</div> </div>
</div> </div>