diff --git a/src/components/menus/MenuHeader.svelte b/src/components/menus/MenuHeader.svelte index 1397bba5f7..40b4817c7f 100644 --- a/src/components/menus/MenuHeader.svelte +++ b/src/components/menus/MenuHeader.svelte @@ -4,12 +4,16 @@
-
-
- {title} + {#if title || $$slots.left} +
+ {#if title} +
+ {title} +
+ {/if} +
- -
+ {/if}
@@ -18,8 +22,7 @@ align-items: center; color: var(--st-gray-40); cursor: auto; - display: grid; - grid-template-columns: auto auto; + display: flex; justify-content: space-between; padding: 8px; } diff --git a/src/components/menus/MenuItem.svelte b/src/components/menus/MenuItem.svelte index 8007d9a98d..5baf97055d 100644 --- a/src/components/menus/MenuItem.svelte +++ b/src/components/menus/MenuItem.svelte @@ -7,6 +7,7 @@ export let use: ActionArray = []; export let disabled: boolean = false; + export let selectable: boolean = true; export let selected: boolean = false; const dispatch = createEventDispatcher<{ @@ -35,6 +36,7 @@ class="menu-item" class:disabled class:selected + class:selectable role="menuitem" use:useActions={use} on:mouseup={onClick} @@ -61,7 +63,11 @@ width: 100%; } - .menu-item:hover { + .menu-item:not(.selectable) { + cursor: auto; + } + + .menu-item.selectable:hover { background: var(--st-gray-20); } diff --git a/src/components/timeline/form/TimelineEditor/ActivityFilterBuilder.svelte b/src/components/timeline/form/TimelineEditor/ActivityFilterBuilder.svelte index b11fa8ca7e..17558970b9 100644 --- a/src/components/timeline/form/TimelineEditor/ActivityFilterBuilder.svelte +++ b/src/components/timeline/form/TimelineEditor/ActivityFilterBuilder.svelte @@ -468,7 +468,6 @@ does_not_include: { type: 'tag', values: $subsystemTags }, includes: { type: 'tag', values: $subsystemTags }, }, - // TODO make this a searchable dropdown, same for parameter variants? Type: { does_not_equal: { type: 'variant', values: $activityTypes.map(type => type.name) }, does_not_include: { type: 'string' }, diff --git a/src/components/ui/EditableDropdown.svelte b/src/components/ui/EditableDropdown.svelte index 9035df0c8a..fed08b4fb0 100644 --- a/src/components/ui/EditableDropdown.svelte +++ b/src/components/ui/EditableDropdown.svelte @@ -220,8 +220,7 @@ } .dropdown-header { - column-gap: 6px; - display: grid; - grid-template-columns: auto repeat(3, 16px); + display: flex; + flex: 1; } diff --git a/src/components/ui/SearchableDropdown.svelte b/src/components/ui/SearchableDropdown.svelte index 4423ab404c..d09d10f7ae 100644 --- a/src/components/ui/SearchableDropdown.svelte +++ b/src/components/ui/SearchableDropdown.svelte @@ -34,6 +34,8 @@ export let disabled: boolean = false; export let error: string | undefined = undefined; export let hasUpdatePermission: boolean = true; + export let iconTooltip: string = 'Set Selection'; + export let iconTooltipPlacement: string = 'top'; export let options: DropdownOptions = []; export let maxItems: number | undefined = undefined; export let maxListHeight: string = '300px'; @@ -45,8 +47,6 @@ export let selectedOptionValues: SelectedDropdownOptionValue[] = []; export let showPlaceholderOption: boolean = true; export let searchPlaceholder: string = 'Search Items'; - export let iconTooltip: string = 'Set Selection'; - export let iconTooltipPlacement: string = 'top'; export let selectTooltip: string = ''; export let selectTooltipPlacement: string = 'top'; @@ -76,6 +76,18 @@ let searchFilter: string = ''; let selectedOptions: DropdownOptions = []; let clientWidth: number = 0; + let maxOptionChars: number = 0; + + $: { + selectedOptions = []; + options.forEach(option => { + if (selectedOptionValues.find(value => value === option.value)) { + selectedOptions.push(option); + } + const optionCharacterLength = option.display.toString().length; + maxOptionChars = Math.max(maxOptionChars, optionCharacterLength); + }); + } $: selectedOptions = options.filter(option => { return !!selectedOptionValues.find(value => value === option.value); @@ -213,15 +225,18 @@ count={displayedOptions.length} overscan={100} maxHeight={maxListHeight} - minWidth="{clientWidth + 160}px" + minWidth="{Math.max(50, maxOptionChars * 7)}px" selectedIndex={selectedOptions.length ? displayedOptions.findIndex(o => o.value === selectedOptions[0].value) : undefined} let:index > {@const displayedOption = displayedOptions[index]} + {@const selected = + !!selectedOptions.find(o => o.value === displayedOption.value) || + (!!showPlaceholderOption && selectedOptions.length === 0 && index === 0)} o.value === displayedOption.value)} + {selected} use={[ [ permissionHandler, @@ -235,7 +250,7 @@ > + {#if displayedOptions.length < 1} + +