TSK-507: Assignee box Direction line is hidden to early (#2485)

Signed-off-by: Denis Maslennikov <denis.maslennikov@gmail.com>

packages/presentation/src/components/ObjectPopup.svelte

@@ -87,11 +87,11 @@
   $: showCategories =
     objects.map((it) => (it as any)[groupBy]).filter((it, index, arr) => arr.indexOf(it) === index).length > 1
 
-  const checkSelected = (person: Doc, objects: Doc[]): void => {
-    if (selectedElements.has(person._id)) {
-      selectedElements.delete(person._id)
+  const checkSelected = (item: Doc): void => {
+    if (selectedElements.has(item._id)) {
+      selectedElements.delete(item._id)
     } else {
-      selectedElements.add(person._id)
+      selectedElements.add(item._id)
     }
 
     selectedObjects = Array.from(selectedElements)
@@ -105,17 +105,17 @@
   let list: ListView
 
   async function handleSelection (evt: Event | undefined, objects: Doc[], selection: number): Promise<void> {
-    const person = objects[selection]
+    const item = objects[selection]
 
     if (!multiSelect) {
       if (allowDeselect) {
-        selected = person._id === selected ? undefined : person._id
+        selected = item._id === selected ? undefined : item._id
       } else {
-        selected = person._id
+        selected = item._id
       }
-      dispatch(closeAfterSelect ? 'close' : 'update', selected !== undefined ? person : undefined)
+      dispatch(closeAfterSelect ? 'close' : 'update', selected !== undefined ? item : undefined)
     } else {
-      checkSelected(person, objects)
+      checkSelected(item)
     }
   }
 
@@ -222,7 +222,7 @@
   {#if cHeight === 1}
     <div class="background-theme-content-accent" style:height={'2px'} />
   {/if}
-  <div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv)} bind:this={scrollDiv}>
+  <div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, objects, selected)} bind:this={scrollDiv}>
     <div class="box">
       <ListView bind:this={list} count={objects.length} bind:selection>
         <svelte:fragment slot="category" let:item>

packages/ui/src/components/SelectPopup.svelte

@@ -85,6 +85,35 @@
   $: filteredObjects = value.filter((el) => (el.label ?? el.text ?? '').toLowerCase().includes(search.toLowerCase()))
 
   $: huge = size === 'medium' || size === 'large'
+
+  let selectedDiv: HTMLElement | undefined
+  let scrollDiv: HTMLElement | undefined
+  let cHeight = 0
+
+  const updateLocation = (scrollDiv?: HTMLElement, selectedDiv?: HTMLElement, objects?: ValueType[]) => {
+    const objIt = objects?.find((it) => it.isSelected)
+    if (objIt === undefined) {
+      cHeight = 0
+      return
+    }
+    if (scrollDiv && selectedDiv) {
+      const r = selectedDiv.getBoundingClientRect()
+      const r2 = scrollDiv.getBoundingClientRect()
+      if (r && r2) {
+        if (r.top > r2.top && r.bottom < r2.bottom) {
+          cHeight = 0
+        } else {
+          if (r.bottom < r2.bottom) {
+            cHeight = 1
+          } else {
+            cHeight = -1
+          }
+        }
+      }
+    }
+  }
+
+  $: updateLocation(scrollDiv, selectedDiv, filteredObjects)
 </script>
 
 <FocusHandler {manager} />
@@ -111,7 +140,10 @@
       />
     </div>
   {/if}
-  <div class="scroll">
+  {#if cHeight === 1}
+    <div class="background-theme-content-accent" style:height={'2px'} />
+  {/if}
+  <div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, filteredObjects)} bind:this={scrollDiv}>
     <div class="box">
       <ListView
         bind:this={list}
@@ -131,7 +163,9 @@
               {#if hasSelected}
                 <div class="icon">
                   {#if item.isSelected}
-                    <Icon icon={IconCheck} {size} />
+                    <div bind:this={selectedDiv}>
+                      <Icon icon={IconCheck} {size} />
+                    </div>
                   {/if}
                 </div>
               {/if}
@@ -170,4 +204,7 @@
       </ListView>
     </div>
   </div>
+  {#if cHeight === -1}
+    <div class="background-theme-content-accent" style:height={'2px'} />
+  {/if}
 </div>

plugins/tracker-resources/src/components/ProjectSelector.svelte

@@ -75,11 +75,12 @@
     }
 
     const projectsInfo = [
-      { id: null, icon: tracker.icon.Projects, label: tracker.string.NoProject },
+      { id: null, icon: tracker.icon.Projects, label: tracker.string.NoProject, isSelected: !selectedProject },
       ...rawProjects.map((p) => ({
         id: p._id,
         icon: p.icon,
-        text: p.label
+        text: p.label,
+        isSelected: selectedProject ? p._id === selectedProject._id : false
       }))
     ]