diff --git a/frontend/src/components/DeletePaletteEntryModal.svelte b/frontend/src/components/DeletePaletteEntryModal.svelte new file mode 100644 index 0000000..32e66ec --- /dev/null +++ b/frontend/src/components/DeletePaletteEntryModal.svelte @@ -0,0 +1,33 @@ + + + open = false} + on:click:button--secondary={() => open = false} + on:submit={() => { + open = false + // TODO + //file.push(new RemoveSwatchUndoable(paletteIndex, replaceWithSwatch ? replaceIndex : -1)) + }} +> + + {#if replaceWithSwatch} + + + {/if} + \ No newline at end of file diff --git a/frontend/src/sections/Palette.svelte b/frontend/src/sections/Palette.svelte index 2ec39ef..df29239 100644 --- a/frontend/src/sections/Palette.svelte +++ b/frontend/src/sections/Palette.svelte @@ -3,6 +3,8 @@ import { ReplaceSwatchUndoable, type LoadedFile, AddSwatchUndoable, MoveSwatchUndoable } from '../types/file' import { createEventDispatcher } from 'svelte' import type { Undoable } from '../types/undo' + import { ContextMenu, ContextMenuOption, OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte'; + import DeletePaletteEntryModal from '../components/DeletePaletteEntryModal.svelte' export let file: LoadedFile let lastFile: LoadedFile @@ -47,6 +49,9 @@ } function paletteClick(event: MouseEvent) { + if (event.button === 2) { + return + } const target = event.target as HTMLSpanElement const index = parseInt(target.getAttribute('x-index') || '0') if (event.shiftKey) { @@ -124,6 +129,19 @@ } } } + + let showDeleteDialog: boolean = false + let targetIndex: number = -1 + function onContextMenu(e: CustomEvent) { + targetIndex = parseInt((e.detail as HTMLSpanElement).getAttribute('x-index') || '-1') + } + function showDeleteSwatchDialog(e: CustomEvent) { + showDeleteDialog = true + } + + // These are entry refs for sharing the ContextMenu. + let _refs = [] + $: refs = _refs.filter(Boolean)
@@ -136,13 +154,17 @@ {/if} {#if swatchIndex !== draggingIndex} - + {swatchIndex} {/if} {/each} + + + +