From 415e545d00ebadb09d43f26436e9d76b34aa3122 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 29 Dec 2022 05:57:46 +0300
Subject: [PATCH] Fixed drop-down lists (#2483)

---
 .../src/components/UserBox.svelte             | 12 ++++---
 .../src/components/UserBoxList.svelte         |  1 +
 packages/theme/styles/_layouts.scss           |  7 ++++
 packages/theme/styles/components.scss         |  2 +-
 packages/ui/src/components/Button.svelte      | 11 ++++++
 .../ui/src/components/DropdownLabels.svelte   |  2 +-
 .../components/calendar/DatePresenter.svelte  |  9 ++++-
 .../calendar/DateRangePresenter.svelte        |  2 +-
 .../src/components/ChannelsDropdown.svelte    |  1 +
 .../src/components/CreateApplication.svelte   | 36 ++++++++++++++++---
 .../src/components/TagsDropdownEditor.svelte  |  7 ++--
 .../src/components/ProjectSelector.svelte     |  6 ++--
 .../issues/timereport/EstimationEditor.svelte |  1 +
 .../components/sprints/SprintSelector.svelte  |  4 ++-
 14 files changed, 81 insertions(+), 20 deletions(-)

diff --git a/packages/presentation/src/components/UserBox.svelte b/packages/presentation/src/components/UserBox.svelte
index 3fac2383c0..8ffc54ce36 100644
--- a/packages/presentation/src/components/UserBox.svelte
+++ b/packages/presentation/src/components/UserBox.svelte
@@ -124,17 +124,18 @@
     <div
       class="w-full h-full flex-streatch"
       on:click={_click}
+      class:content-color={selected === undefined}
       use:tooltip={selected !== undefined ? { label: getEmbeddedLabel(getName(selected)) } : undefined}
     >
       <slot name="content" />
     </div>
   {:else}
     <Button {focusIndex} width={width ?? 'min-content'} {size} {kind} {justify} {showTooltip} on:click={_click}>
-      <span
+      <div
         slot="content"
-        class="overflow-label flex-grow"
+        class="overflow-label flex-row-center"
         class:flex-between={showNavigate && selected}
-        class:dark-color={value == null}
+        class:content-color={value == null}
       >
         <div
           class="disabled"
@@ -150,7 +151,7 @@
               {getName(selected)}
             {/if}
           {:else}
-            <div class="flex-presenter">
+            <div class="flex-presenter not-selected">
               {#if icon}
                 <div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
                   <Icon {icon} size={kind === 'link' ? 'small' : size} />
@@ -163,6 +164,7 @@
           {/if}
         </div>
         {#if selected && showNavigate}
+          <div class="min-w-2" />
           <ActionIcon
             icon={IconOpen}
             size={'small'}
@@ -173,7 +175,7 @@
             }}
           />
         {/if}
-      </span>
+      </div>
     </Button>
   {/if}
 </div>
diff --git a/packages/presentation/src/components/UserBoxList.svelte b/packages/presentation/src/components/UserBoxList.svelte
index be4e6bdcb0..e0de782ad6 100644
--- a/packages/presentation/src/components/UserBoxList.svelte
+++ b/packages/presentation/src/components/UserBoxList.svelte
@@ -73,6 +73,7 @@
 <Button
   icon={persons.length === 0 ? Members : undefined}
   label={persons.length === 0 ? emptyLabel : undefined}
+  notSelected={persons.length === 0}
   width={width ?? 'min-content'}
   {kind}
   {size}
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 53dde57365..697beb5a4e 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -286,6 +286,13 @@ input.search {
     }
     .action { visibility: visible; }
   }
+  &.not-selected {
+    .label { color: var(--content-color); }
+    &:hover .label,
+    &:hover .icon {
+      color: var(--accent-color);
+    }
+  }
 }
 .flex-presenter {
   display: flex;
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index f94a3feb08..8fdf3e2f53 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -22,7 +22,7 @@
   .ac-header {
     padding: 0.5rem 1.5rem 0.5rem 2.25rem;
     // height: 3.5rem;
-    min-height: 2.5rem;
+    // min-height: 2.5rem;
 
     &.short {
       display: flex;
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index bba4e2bf0d..81f0d9f99f 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -35,6 +35,7 @@
   export let resetIconSize: boolean = false
   export let highlight: boolean = false
   export let selected: boolean = false
+  export let notSelected: boolean = false
   export let focus: boolean = false
   export let click: boolean = false
   export let title: string | undefined = undefined
@@ -90,6 +91,7 @@
   class:only-icon={iconOnly}
   class:highlight
   class:selected
+  class:notSelected
   disabled={disabled || loading}
   style:width
   {title}
@@ -364,6 +366,15 @@
       }
     }
 
+    &.notSelected {
+      color: var(--content-color);
+
+      &:hover,
+      &:hover .btn-icon {
+        color: var(--accent-color);
+      }
+    }
+
     &.dangerous {
       color: var(--white-color);
       background-color: var(--dangerous-bg-color);
diff --git a/packages/ui/src/components/DropdownLabels.svelte b/packages/ui/src/components/DropdownLabels.svelte
index 78e7d92e01..976e7a4dd2 100644
--- a/packages/ui/src/components/DropdownLabels.svelte
+++ b/packages/ui/src/components/DropdownLabels.svelte
@@ -77,7 +77,7 @@
       }
     }}
   >
-    <span slot="content" class="overflow-label disabled" class:content-accent-color={selectedItem === undefined}>
+    <span slot="content" class="overflow-label disabled" class:content-color={selectedItem === undefined}>
       {#if selectedItem}{selectedItem.label}{:else}<Label label={label ?? ui.string.NotSelected} />{/if}
     </span>
   </Button>
diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte
index 2a4d42f708..1871d38402 100644
--- a/packages/ui/src/components/calendar/DatePresenter.svelte
+++ b/packages/ui/src/components/calendar/DatePresenter.svelte
@@ -106,7 +106,7 @@
       {/if}
     {/if}
   {:else if shouldShowLabel}
-    <Label label={labelNull} />
+    <span class="not-selected"><Label label={labelNull} /></span>
   {/if}
 </button>
 
@@ -161,10 +161,17 @@
         color: var(--error-color);
       }
     }
+    .not-selected {
+      color: var(--content-color);
+    }
 
     &:hover {
       color: var(--caption-color);
       transition-duration: 0;
+
+      .not-selected {
+        color: var(--accent-color);
+      }
     }
     &.editable {
       cursor: pointer;
diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte
index 1e835ff6c6..bf6a312047 100644
--- a/packages/ui/src/components/calendar/DateRangePresenter.svelte
+++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte
@@ -390,7 +390,7 @@
         {/if}
       {/if}
     {:else}
-      <div class="dark-color">
+      <div class="content-color">
         <Label label={labelNull} />
       </div>
     {/if}
diff --git a/plugins/contact-resources/src/components/ChannelsDropdown.svelte b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
index f8f04cf209..cb74385260 100644
--- a/plugins/contact-resources/src/components/ChannelsDropdown.svelte
+++ b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
@@ -271,6 +271,7 @@
         bind:input={addBtn}
         icon={contact.icon.SocialEdit}
         label={presentation.string.AddSocialLinks}
+        notSelected
         {kind}
         {size}
         {shape}
diff --git a/plugins/recruit-resources/src/components/CreateApplication.svelte b/plugins/recruit-resources/src/components/CreateApplication.svelte
index 07a655066a..5b0fc81191 100644
--- a/plugins/recruit-resources/src/components/CreateApplication.svelte
+++ b/plugins/recruit-resources/src/components/CreateApplication.svelte
@@ -18,14 +18,20 @@
   import ExpandRightDouble from '@hcengineering/contact-resources/src/components/icons/ExpandRightDouble.svelte'
   import { Account, Class, Client, Doc, FindOptions, generateId, Ref, SortingOrder, Space } from '@hcengineering/core'
   import { getResource, OK, Resource, Severity, Status } from '@hcengineering/platform'
-  import { Card, createQuery, EmployeeBox, getClient, SpaceSelect, UserBox } from '@hcengineering/presentation'
+  import presentation, {
+    Card,
+    createQuery,
+    EmployeeBox,
+    getClient,
+    SpaceSelect,
+    UserBox
+  } from '@hcengineering/presentation'
   import type { Applicant, Candidate, Vacancy } from '@hcengineering/recruit'
   import task, { calcRank, SpaceWithStates, State } from '@hcengineering/task'
   import ui, {
     Button,
     ColorPopup,
     createFocusManager,
-    eventToHTMLElement,
     FocusHandler,
     getPlatformColor,
     Label,
@@ -249,6 +255,7 @@
   }
   let verticalContent: boolean = false
   $: verticalContent = $deviceInfo.isMobile && $deviceInfo.isPortrait
+  let btn: HTMLButtonElement
 </script>
 
 <FocusHandler {manager} />
@@ -333,11 +340,12 @@
           width="min-content"
           size="small"
           kind="no-border"
-          on:click={(ev) => {
+          bind:input={btn}
+          on:click={() => {
             showPopup(
               ColorPopup,
               { value: states, searchable: true, placeholder: ui.string.SearchDots },
-              eventToHTMLElement(ev),
+              btn,
               (result) => {
                 if (result && result.id) {
                   selectedState = { ...result, _id: result.id, title: result.label }
@@ -347,10 +355,13 @@
             )
           }}
         >
-          <div slot="content" class="flex-row-center pointer-events-none">
+          <div slot="content" class="flex-row-center" class:empty={!selectedState}>
             {#if selectedState}
               <div class="color" style="background-color: {getPlatformColor(selectedState.color)}" />
               <span class="label overflow-label">{selectedState.title}</span>
+            {:else}
+              <div class="color" />
+              <span class="label overflow-label"><Label label={presentation.string.NotSelected} /></span>
             {/if}
           </div>
         </Button>
@@ -382,4 +393,19 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
+
+  .empty {
+    .color {
+      border-color: var(--content-color);
+    }
+    .label {
+      color: var(--content-color);
+    }
+    &:hover .color {
+      border-color: var(--accent-color);
+    }
+    &:hover .label {
+      color: var(--accent-color);
+    }
+  }
 </style>
diff --git a/plugins/tags-resources/src/components/TagsDropdownEditor.svelte b/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
index f9fe9cab6e..d19276840b 100644
--- a/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
+++ b/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
@@ -73,12 +73,15 @@
   async function removeTag (id: Ref<TagReference>): Promise<void> {
     dispatch('delete', id)
   }
+  $: console.log('[!!!] items: ', items)
+  $: console.log('[!!!] items - count: ', items.length)
 </script>
 
 <Button
   {disabled}
   icon={key.attr.icon ?? tags.icon.Tags}
   label={items.length > 0 ? undefined : key.attr.label}
+  notSelected={items.length === 0}
   width={width ?? 'min-content'}
   {kind}
   {size}
@@ -88,11 +91,11 @@
 >
   <svelte:fragment slot="content">
     {#if items.length > 0}
-      <div class="flex-row-center flex-nowrap overflow-label disabled">
+      <span class="flex-row-center flex-nowrap overflow-label disabled">
         {#await translate(countLabel, { count: items.length }) then text}
           {text}
         {/await}
-      </div>
+      </span>
     {/if}
   </svelte:fragment>
 </Button>
diff --git a/plugins/tracker-resources/src/components/ProjectSelector.svelte b/plugins/tracker-resources/src/components/ProjectSelector.svelte
index 89b05bdcc7..b7f61799dd 100644
--- a/plugins/tracker-resources/src/components/ProjectSelector.svelte
+++ b/plugins/tracker-resources/src/components/ProjectSelector.svelte
@@ -117,9 +117,9 @@
     on:click={handleProjectEditorOpened}
     ><svelte:fragment slot="content">
       <span
-        class="{enlargedText
-          ? 'ml-1 text-base fs-bold'
-          : 'text-md'} overflow-label content-accent-color pointer-events-none"
+        class="{enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label {!value
+          ? 'content-color'
+          : 'content-accent-color'} pointer-events-none"
       >
         <Label label={getEmbeddedLabel(projectText)} />
       </span>
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
index acfeb58dc8..88b32cb357 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
@@ -79,6 +79,7 @@
     <Button
       showTooltip={isEditable ? { label: tracker.string.Estimation } : undefined}
       label={tracker.string.TimeSpendValue}
+      notSelected={value.estimation === 0}
       labelParams={{ value: value.estimation }}
       icon={tracker.icon.Estimation}
       {justify}
diff --git a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
index bebfa06eb7..e4a78e64e4 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
@@ -121,7 +121,9 @@
   >
     <svelte:fragment slot="content">
       <span
-        class="{enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label content-accent-color pointer-events-none"
+        class="{enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label {!value
+          ? 'content-color'
+          : 'content-accent-color'} pointer-events-none"
       >
         <Label label={getEmbeddedLabel(sprintText)} />
       </span>