diff --git a/packages/web/src/modals/DropDownMenu.svelte b/packages/web/src/modals/DropDownMenu.svelte index 5633fcf14..49b1b7bc5 100644 --- a/packages/web/src/modals/DropDownMenu.svelte +++ b/packages/web/src/modals/DropDownMenu.svelte @@ -59,6 +59,19 @@ let submenuOffset; const dispatch = createEventDispatcher(); + let closeHandlers = []; + + function dispatchClose() { + dispatch('close'); + for (const handler of closeHandlers) { + handler(); + } + closeHandlers = []; + } + + function registerCloseHandler(handler) { + closeHandlers.push(handler); + } function handleClick(e, item) { if (item.disabled) return; @@ -70,7 +83,7 @@ submenuOffset = hoverOffset; return; } - dispatch('close'); + dispatchClose(); if (onCloseParent) onCloseParent(); if (item.onClick) item.onClick(); } @@ -84,13 +97,13 @@ submenuOffset = hoverOffset; }, 500); - $: preparedItems = prepareMenuItems(items, { targetElement }, $commandsCustomized); + $: preparedItems = prepareMenuItems(items, { targetElement, registerCloseHandler }, $commandsCustomized); const handleClickOutside = event => { // if (element && !element.contains(event.target) && !event.defaultPrevented) { if (event.target.closest('ul.dropDownMenuMarker')) return; - dispatch('close'); + dispatchClose(); }; onMount(() => { @@ -134,7 +147,7 @@ {...submenuOffset} onCloseParent={() => { if (onCloseParent) onCloseParent(); - dispatch('close'); + dispatchClose(); }} /> {/if} diff --git a/packages/web/src/perspectives/PerspectiveCell.svelte b/packages/web/src/perspectives/PerspectiveCell.svelte index 8bde09d23..01ca6aa42 100644 --- a/packages/web/src/perspectives/PerspectiveCell.svelte +++ b/packages/web/src/perspectives/PerspectiveCell.svelte @@ -25,4 +25,8 @@ border-bottom: 1px solid var(--theme-border); border-right: 1px solid var(--theme-border); } + td:global(.highlight) { + border: 3px solid var(--theme-icon-blue); + padding: 0px; + } diff --git a/packages/web/src/perspectives/PerspectiveHeaderControl.svelte b/packages/web/src/perspectives/PerspectiveHeaderControl.svelte index fae412f8f..773964fa2 100644 --- a/packages/web/src/perspectives/PerspectiveHeaderControl.svelte +++ b/packages/web/src/perspectives/PerspectiveHeaderControl.svelte @@ -179,4 +179,9 @@ th.columnHeader { position: relative; } + + th:global(.highlight) { + border: 3px solid var(--theme-icon-blue); + padding: 0px; + } diff --git a/packages/web/src/perspectives/PerspectiveTable.svelte b/packages/web/src/perspectives/PerspectiveTable.svelte index 576df50f6..6a0c1885e 100644 --- a/packages/web/src/perspectives/PerspectiveTable.svelte +++ b/packages/web/src/perspectives/PerspectiveTable.svelte @@ -154,7 +154,7 @@ checkLoadAdditionalData(); } - function buildMenu({ targetElement }) { + function buildMenu({ targetElement, registerCloseHandler }) { const res = []; const td = targetElement.closest('td') || targetElement.closest('th'); @@ -172,6 +172,10 @@ setConfig, }) ); + td.classList.add('highlight'); + registerCloseHandler(() => { + td.classList.remove('highlight'); + }); } res.push([