UBER-177: fixed Filter pop-ups (#3225)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
hcengineering · May 21, 2023 · 78034e6 · 78034e6
1 parent c0bb68b
commit 78034e6
Show file tree

Hide file tree

Showing 16 changed files with 204 additions and 207 deletions.
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
@@ -745,7 +745,7 @@
 .list-container .datetime-button,
 .list-container .datetime-button:hover {
   background-color: var(--theme-list-button-color) !important;
-  .icon {
+  .icon, .btn-icon {
     margin-right: .5rem;
     color: var(--theme-halfcontent-color) !important;
   }

diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
@@ -48,11 +48,12 @@
     max-width: 40rem !important;
   }
   .header {
-    margin-bottom: .5rem;
     padding: .5rem;
-    border-bottom: 1px solid var(--theme-popup-divider);
-
-    &.no-border { border-bottom-color: transparent; }
+
+    &:not(.no-border) {
+      margin-bottom: .5rem;
+      border-bottom: 1px solid var(--theme-popup-divider);
+    }
     .clear-btn {
       display: flex;
       justify-content: center;
@@ -345,11 +346,13 @@
   align-items: center;
   flex-shrink: 0;
   justify-content: flex-start;
+  margin: 0 .5rem;
   padding: .25rem .5rem;
   min-width: 0;
   min-height: 2.25rem;
   text-align: left;
   color: var(--theme-caption-color);
+  border-radius: .25rem;
   outline: none;
   cursor: pointer;
 

diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte
@@ -153,11 +153,7 @@
       >
         <svelte:fragment slot="item" let:item={itemId}>
           {@const item = filteredObjects[itemId]}
-          <button
-            class="menu-item withList w-full"
-            class:selected={item.isSelected}
-            on:click={() => dispatch('close', item.id)}
-          >
+          <button class="menu-item withList w-full" on:click={() => dispatch('close', item.id)}>
             <div class="flex-row-center flex-grow pointer-events-none">
               {#if item.component}
                 <div class="flex-grow clear-mins"><svelte:component this={item.component} {...item.props} /></div>

diff --git a/plugins/chunter-assets/lang/en.json b/plugins/chunter-assets/lang/en.json
@@ -70,6 +70,7 @@
     "DM": "Direct message",
     "DMNotification": "Sent you a message",
     "ConfigLabel": "Chat",
-    "ConfigDescription": "Extension to perform text communications"
+    "ConfigDescription": "Extension to perform text communications",
+    "LastMessage": "Last message"
   }
 }
diff --git a/plugins/chunter-assets/lang/ru.json b/plugins/chunter-assets/lang/ru.json
@@ -70,6 +70,7 @@
     "DM": "Личное сообщение",
     "DMNotification": "Отправил сообщение",
     "ConfigLabel": "Чат",
-    "ConfigDescription": "Расширение для текстовых переписок"
+    "ConfigDescription": "Расширение для текстовых переписок",
+    "LastMessage": "Последнее сообщение"
   }
 }
diff --git a/plugins/contact-resources/src/components/ChannelFilter.svelte b/plugins/contact-resources/src/components/ChannelFilter.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { ChannelProvider } from '@hcengineering/contact'
   import { Ref } from '@hcengineering/core'
-  import { CheckBox, Icon, Label, resizeObserver } from '@hcengineering/ui'
+  import { IconCheck, Icon, Label, resizeObserver } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { FILTER_DEBOUNCE_MS, FilterQuery, sortFilterValues } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
@@ -65,28 +65,28 @@
 </script>
 
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
+  <div class="menu-space" />
   <div class="scroll">
     <div class="box">
       {#each sortFilterValues($channelProviders, (v) => isSelected(v, selected)) as element}
         <button
-          class="menu-item"
+          class="menu-item no-focus flex-row-center content-pointer-events-none"
           on:click={() => {
             handleFilterToggle(element)
           }}
         >
-          <div class="flex-between w-full">
-            <div class="flex">
-              <div class="check pointer-events-none">
-                <CheckBox checked={isSelected(element, selected)} primary />
-              </div>
-              {#if element.icon}
-                <span class="mr-2"><Icon icon={element.icon} size="inline" /></span>
-              {/if}
-              <Label label={element.label} />
-            </div>
+          {#if element.icon}
+            <div class="icon"><Icon icon={element.icon} size={'small'} /></div>
+          {/if}
+          <span class="overflow-label label flex-grow"><Label label={element.label} /></span>
+          <div class="check">
+            {#if isSelected(element, selected)}
+              <Icon icon={IconCheck} size={'small'} />
+            {/if}
           </div>
         </button>
       {/each}
     </div>
   </div>
+  <div class="menu-space" />
 </div>
diff --git a/plugins/contact-resources/src/components/EmployeeFilter.svelte b/plugins/contact-resources/src/components/EmployeeFilter.svelte
@@ -17,11 +17,20 @@
   import core, { Doc, FindResult, getObjectValue, Ref, SortingOrder, Space } from '@hcengineering/core'
   import { translate } from '@hcengineering/platform'
   import presentation, { getClient } from '@hcengineering/presentation'
-  import ui, { addNotification, deviceOptionsStore, Icon, IconCheck, Loading, resizeObserver } from '@hcengineering/ui'
+  import ui, {
+    addNotification,
+    deviceOptionsStore,
+    Icon,
+    IconCheck,
+    Loading,
+    resizeObserver,
+    EditWithIcon,
+    IconSearch
+  } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { FILTER_DEBOUNCE_MS, FilterRemovedNotification, sortFilterValues } from '@hcengineering/view-resources'
   import view from '@hcengineering/view-resources/src/plugin'
-  import { createEventDispatcher, onMount } from 'svelte'
+  import { createEventDispatcher } from 'svelte'
   import EmployeePresenter from './EmployeePresenter.svelte'
 
   export let filter: Filter
@@ -113,30 +122,23 @@
   }
 
   let search: string = ''
-  let phTraslate: string = ''
-  let searchInput: HTMLInputElement
-  $: translate(presentation.string.Search, {}).then((res) => {
-    phTraslate = res
-  })
-
-  onMount(() => {
-    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
-  })
 
   const dispatch = createEventDispatcher()
   $: getValues(search)
 </script>
 
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="header">
-    <input
-      bind:this={searchInput}
-      type="text"
+    <EditWithIcon
+      icon={IconSearch}
+      size={'large'}
+      width={'100%'}
+      focus={!$deviceOptionsStore.isMobile}
       bind:value={search}
+      placeholder={presentation.string.Search}
       on:change={() => {
         getValues(search)
       }}
-      placeholder={phTraslate}
     />
   </div>
   <div class="scroll">
@@ -146,24 +148,23 @@
       {:else}
         {#each sortFilterValues(values, (v) => isSelected(v, filter.value)) as value}
           <button
-            class="menu-item no-focus"
+            class="menu-item no-focus flex-row-center"
             on:click={() => {
               handleFilterToggle(value)
             }}
           >
-            <div class="flex-between w-full">
-              <div class="flex-row-center">
-                <EmployeePresenter {value} shouldShowPlaceholder defaultName={ui.string.NotSelected} disabled />
-              </div>
-              <div class="pointer-events-none">
-                {#if isSelected(value, filter.value)}
-                  <Icon icon={IconCheck} size={'small'} />
-                {/if}
-              </div>
+            <div class="clear-mins flex-grow">
+              <EmployeePresenter {value} shouldShowPlaceholder defaultName={ui.string.NotSelected} disabled />
+            </div>
+            <div class="check pointer-events-none">
+              {#if isSelected(value, filter.value)}
+                <Icon icon={IconCheck} size={'small'} />
+              {/if}
             </div>
           </button>
         {/each}
       {/if}
     </div>
   </div>
+  <div class="menu-space" />
 </div>
diff --git a/plugins/recruit-resources/src/components/VacancyPresenter.svelte b/plugins/recruit-resources/src/components/VacancyPresenter.svelte
@@ -27,12 +27,12 @@
 </script>
 
 {#if value}
-  <DocNavLink {disabled} object={value} {inline} component={recruit.component.EditVacancy}>
+  <DocNavLink {disabled} object={value} {inline} noUnderline={disabled} component={recruit.component.EditVacancy}>
     <div class="flex-presenter" class:inline-presenter={inline} use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
       {#if !inline}
         <div class="icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
       {/if}
-      <span class="label">{value.name}</span>
+      <span class="label" class:no-underline={disabled}>{value.name}</span>
     </div>
   </DocNavLink>
 {/if}
diff --git a/plugins/tags-resources/src/components/TagsFilter.svelte b/plugins/tags-resources/src/components/TagsFilter.svelte
@@ -14,13 +14,14 @@
 -->
 <script lang="ts">
   import { Class, Doc, FindResult, Ref } from '@hcengineering/core'
-  import { translate } from '@hcengineering/platform'
   import presentation, { getClient } from '@hcengineering/presentation'
   import { TagCategory, TagElement } from '@hcengineering/tags'
   import {
     Button,
     Icon,
     IconCheck,
+    IconSearch,
+    EditWithIcon,
     Label,
     Loading,
     deviceOptionsStore,
@@ -31,7 +32,7 @@
   } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { FILTER_DEBOUNCE_MS, FilterQuery, sortFilterValues } from '@hcengineering/view-resources'
-  import { createEventDispatcher, onMount } from 'svelte'
+  import { createEventDispatcher } from 'svelte'
   import tags from '../plugin'
   import { tagLevel } from '../utils'
   import WeightPopup from './WeightPopup.svelte'
@@ -76,15 +77,6 @@
   }
 
   let search: string = ''
-  let phTraslate: string = ''
-  let searchInput: HTMLInputElement
-  $: translate(presentation.string.Search, {}).then((res) => {
-    phTraslate = res
-  })
-
-  onMount(() => {
-    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
-  })
 
   const toggleGroup = (ev: MouseEvent): void => {
     const el: HTMLElement = ev.currentTarget as HTMLElement
@@ -137,18 +129,20 @@
 
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="header">
-    <input
-      bind:this={searchInput}
-      type="text"
+    <EditWithIcon
+      icon={IconSearch}
+      size={'large'}
+      width={'100%'}
+      focus={!$deviceOptionsStore.isMobile}
       bind:value={search}
+      placeholder={presentation.string.Search}
       on:change={() => {
         getValues(search)
       }}
-      placeholder={phTraslate}
     />
     {#if schema !== '0'}
-      <div class="flex-row-center flex-between flex-grow p-1">
-        <Label label={tags.string.Weight} />
+      <div class="flex-between w-full mt-2">
+        <span class="overflow-label pl-2 mr-2"><Label label={tags.string.Weight} /></span>
         <Button
           label={tagLevelLabel}
           icon={tagLevelIcon}
@@ -170,9 +164,10 @@
       {#if objectsPromise}
         <Loading />
       {:else}
-        {#each categories as cat}
+        {#each categories as cat, i}
           {@const values = objects.filter((el) => el.category === cat._id)}
           {#if values.length > 0}
+            {#if i > 0}<div class="menu-separator" />{/if}
             <div class="sticky-wrapper">
               <button
                 class="menu-group__header"
@@ -198,21 +193,17 @@
               <div class="menu-group">
                 {#each sortFilterValues(values, isSelected) as element}
                   <button
-                    class="menu-item"
+                    class="menu-item no-focus flex-row-center"
                     on:click={() => {
                       handleFilterToggle(element)
                     }}
                   >
-                    <div class="flex-between w-full">
-                      <div class="flex">
-                        <div class="tag" style="background-color: {getPlatformColor(element.color)};" />
-                        {element.title}
-                      </div>
-                      <div class="pointer-events-none">
-                        {#if isSelected(element)}
-                          <Icon icon={IconCheck} size={'small'} />
-                        {/if}
-                      </div>
+                    <div class="tag" style="background-color: {getPlatformColor(element.color)};" />
+                    <span class="overflow-label label flex-grow">{element.title}</span>
+                    <div class="check pointer-events-none">
+                      {#if isSelected(element)}
+                        <Icon icon={IconCheck} size={'small'} />
+                      {/if}
                     </div>
                   </button>
                 {/each}
@@ -223,6 +214,7 @@
       {/if}
     </div>
   </div>
+  <div class="menu-space" />
 </div>
 
 <style>