Improve auto width sizing of SearchableDropdown

NASA-AMMOS · Dec 19, 2024 · cdfe150 · cdfe150
1 parent b6b8479
commit cdfe150
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 17 deletions.
diff --git a/src/components/menus/MenuHeader.svelte b/src/components/menus/MenuHeader.svelte
@@ -4,12 +4,16 @@
 </script>
 
 <div class="header" class:menu-border-bottom={showBorder}>
-  <div class="left">
-    <div class="title st-typography-small-caps">
-      {title}
+  {#if title || $$slots.left}
+    <div class="left">
+      {#if title}
+        <div class="title st-typography-small-caps">
+          {title}
+        </div>
+      {/if}
+      <slot name="left" />
     </div>
-    <slot name="left" />
-  </div>
+  {/if}
   <slot />
 </div>
 
@@ -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
@@ -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
@@ -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
@@ -220,8 +220,7 @@
   }
 
   .dropdown-header {
-    column-gap: 6px;
-    display: grid;
-    grid-template-columns: auto repeat(3, 16px);
+    display: flex;
+    flex: 1;
   }
 </style>
diff --git 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)}
         <MenuItem
-          selected={!!selectedOptions.find(o => o.value === displayedOption.value)}
+          {selected}
           use={[
             [
               permissionHandler,
@@ -235,7 +250,7 @@
         >
           <div class="dropdown-item">
             <div class="dropdown-item-icon">
-              {#if selectedOptions.find(o => o.value === displayedOption.value)}
+              {#if selected}
                 <CheckIcon />
               {/if}
             </div>
@@ -244,6 +259,14 @@
           </div>
         </MenuItem>
       </RowVirtualizerFixed>
+      {#if displayedOptions.length < 1}
+        <MenuItem selectable={false}>
+          <div class="dropdown-item">
+            <div class="dropdown-item-icon" />
+            <span class="dropdown-item-text st-typography-label">No results found</span>
+          </div>
+        </MenuItem>
+      {/if}
     </div>
   </Menu>
 </div>