UBER-459: remove whereSelected line in dropdowns. (#3417)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/presentation/src/components/DocPopup.svelte

@@ -24,7 +24,6 @@
     IconCheck,
     IconSearch,
     ListView,
-    closeTooltip,
     createFocusManager,
     deviceOptionsStore,
     resizeObserver,
@@ -142,43 +141,6 @@
     return obj
   }
 
-  let selectedDiv: HTMLElement | undefined
-  let scrollDiv: HTMLElement | undefined
-  let cHeight = 0
-  let timer: any = null
-
-  const updateLocation = (scrollDiv?: HTMLElement, selectedDiv?: HTMLElement, objects?: Doc[], selected?: Ref<Doc>) => {
-    const objIt = objects?.find((it) => it._id === selected)
-    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
-          }
-        }
-      }
-    }
-    if (!timer) {
-      timer = setTimeout(() => {
-        closeTooltip()
-        clearTimeout(timer)
-        timer = null
-      }, 50)
-    }
-  }
-
-  $: updateLocation(scrollDiv, selectedDiv, objects, selected)
-
   const forbiddenDeselectItemIds = new Set(disallowDeselect)
 
   function getGroup (doc: Doc, groupBy: any): any {
@@ -226,10 +188,7 @@
       </div>
     {/if}
   </div>
-  {#if cHeight === 1}
+  <div class="scroll">
-    <div class="whereSelected" />
-  {/if}
-  <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>
@@ -260,7 +219,7 @@
             {#if (allowDeselect && selected) || multiSelect || selected}
               <div class="check" class:disabled={readonly}>
                 {#if obj._id === selected || selectedElements.has(obj._id)}
-                  <div bind:this={selectedDiv} use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
+                  <div use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
                     <Icon icon={IconCheck} size={'small'} />
                   </div>
                 {/if}
@@ -271,9 +230,6 @@
       </ListView>
     </div>
   </div>
-  {#if cHeight === -1}
-    <div class="whereSelected" />
-  {/if}
   <div class="menu-space" />
 </div>
 

packages/theme/styles/popups.scss

@@ -194,10 +194,6 @@
       &.show + .menu-group { height: auto; }
     }
   }
-  .whereSelected {
-    height: 2px;
-    background-color: var(--theme-caret-color);
-  }
   .menu-space {
     flex-shrink: 0;
     height: .5rem;

packages/ui/src/components/SelectPopup.svelte

@@ -82,35 +82,6 @@
   $: 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} />
@@ -140,10 +111,7 @@
   {:else}
     <div class="menu-space" />
   {/if}
-  {#if cHeight === 1}
+  <div class="scroll">
-    <div class="whereSelected" />
-  {/if}
-  <div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, filteredObjects)} bind:this={scrollDiv}>
     <div class="box">
       <ListView
         bind:this={list}
@@ -174,9 +142,7 @@
               {#if hasSelected}
                 <div class="check">
                   {#if item.isSelected}
-                    <div bind:this={selectedDiv}>
+                    <Icon icon={IconCheck} size={'small'} />
-                      <Icon icon={IconCheck} size={'small'} />
-                    </div>
                   {/if}
                 </div>
               {/if}
@@ -202,8 +168,5 @@
       </ListView>
     </div>
   </div>
-  {#if cHeight === -1}
-    <div class="whereSelected" />
-  {/if}
   <div class="menu-space" />
 </div>

plugins/contact-resources/src/components/AssigneePopup.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import contact, { Contact, Employee, EmployeeAccount, Person } from '@hcengineering/contact'
-  import { Doc, DocumentQuery, FindOptions, getCurrentAccount, Ref } from '@hcengineering/core'
+  import { DocumentQuery, FindOptions, getCurrentAccount, Ref } from '@hcengineering/core'
   import type { Asset, IntlString } from '@hcengineering/platform'
   import {
     createFocusManager,
@@ -144,36 +144,6 @@
   function toAny (obj: any): any {
     return obj
   }
-
-  let selectedDiv: HTMLElement | undefined
-  let scrollDiv: HTMLElement | undefined
-  let cHeight = 0
-
-  const updateLocation = (scrollDiv?: HTMLElement, selectedDiv?: HTMLElement, objects?: Doc[], selected?: Ref<Doc>) => {
-    const objIt = objects?.find((it) => it._id === selected)
-    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, contacts, selected)
 </script>
 
 <FocusHandler {manager} />
@@ -200,14 +170,7 @@
       on:change
     />
   </div>
-  {#if cHeight === 1}
+  <div class="scroll">
-    <div class="whereSelected" />
-  {/if}
-  <div
-    class="scroll"
-    on:scroll={() => updateLocation(scrollDiv, selectedDiv, contacts, selected)}
-    bind:this={scrollDiv}
-  >
     <div class="box">
       <ListView bind:this={list} count={contacts.length} bind:selection>
         <svelte:fragment slot="category" let:item>
@@ -244,7 +207,7 @@
             {#if allowDeselect && selected}
               <div class="check">
                 {#if obj._id === selected}
-                  <div bind:this={selectedDiv} use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
+                  <div use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
                     <Icon icon={IconCheck} size={'small'} />
                   </div>
                 {/if}
@@ -255,9 +218,6 @@
       </ListView>
     </div>
   </div>
-  {#if cHeight === -1}
-    <div class="whereSelected" />
-  {/if}
   <div class="menu-space" />
 </div>