diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte index 7c71aac9b8..37a803ebbf 100644 --- a/packages/ui/src/components/ActionIcon.svelte +++ b/packages/ui/src/components/ActionIcon.svelte @@ -28,6 +28,7 @@ export let size: 'x-small' | 'small' | 'medium' | 'large' export let action: (ev: MouseEvent) => Promise<void> | void = async () => {} export let invisible: boolean = false + export let disabled: boolean = false </script> <button @@ -35,6 +36,7 @@ use:tooltip={{ label, direction, props: labelProps }} tabindex="0" on:click|stopPropagation|preventDefault={action} + {disabled} > <div class="icon {size}" class:invisible> <Icon {icon} {size} {iconProps} /> @@ -53,7 +55,7 @@ opacity: 0; } } - &:hover .icon { + &:not(:disabled):hover .icon { color: var(--theme-caption-color); opacity: 1; } @@ -64,6 +66,9 @@ opacity: 1; } } + &:disabled { + cursor: default; + } } .small { width: 1rem; diff --git a/plugins/setting-resources/src/components/EnumValues.svelte b/plugins/setting-resources/src/components/EnumValues.svelte index 867c3f961b..586f7e4566 100644 --- a/plugins/setting-resources/src/components/EnumValues.svelte +++ b/plugins/setting-resources/src/components/EnumValues.svelte @@ -29,6 +29,7 @@ async function add () { if (newValue.trim().length === 0) return + if (value.enumValues.includes(newValue.trim())) return await client.update(value, { $push: { enumValues: newValue } }) @@ -123,7 +124,13 @@ bind:value={newValue} /> <div class="flex gap-2"> - <ActionIcon icon={IconAdd} label={setting.string.Add} action={add} size={'small'} /> + <ActionIcon + icon={IconAdd} + label={setting.string.Add} + action={add} + size={'small'} + disabled={value.enumValues.includes(newValue.trim())} + /> <ActionIcon icon={IconAttachment}