From b7463a3a1699297ffd177c949f055cd3e193f938 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 26 May 2023 06:04:17 +0300
Subject: [PATCH] Fixed filters, popups, tags, activity. (#3260)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_layouts.scss           |  2 +
 packages/theme/styles/button.scss             | 47 +++++++++++++++++--
 packages/theme/styles/popups.scss             |  2 +-
 packages/ui/src/components/Button.svelte      | 45 +-----------------
 .../ui/src/components/EditWithIcon.svelte     | 36 ++++++--------
 packages/ui/src/components/ListView.svelte    |  1 +
 packages/ui/src/popups.ts                     |  4 +-
 .../src/components/TxView.svelte              |  8 ++--
 .../src/components/CollapsedTags.svelte       |  2 +-
 .../src/components/TagFilterPresenter.svelte  |  2 +-
 .../components/TagReferencePresenter.svelte   |  4 +-
 .../src/components/TagsPopup.svelte           |  2 +-
 .../components/ComponentPresenter.svelte      |  4 +-
 .../PriorityFilterValuePresenter.svelte       |  2 +-
 .../projects/ProjectPresenter.svelte          |  5 +-
 .../src/components/ValueSelector.svelte       |  1 +
 .../src/components/filter/FilterButton.svelte | 15 ++----
 .../components/filter/FilterSection.svelte    | 25 ++++++----
 .../src/components/icons/Close.svelte         | 27 +++++++++++
 19 files changed, 130 insertions(+), 104 deletions(-)
 create mode 100644 plugins/view-resources/src/components/icons/Close.svelte

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index f94805eff5..70f2e475b4 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -282,6 +282,7 @@ input.search {
     &:not(.small-gap, .large-gap) { margin-right: .375rem; }
     &.small-gap { margin-right: .25rem; }
     &.large-gap { margin-right: .5rem; }
+    &.flow:last-child { margin-right: 0; }
   }
   .label {
     min-width: 0;
@@ -338,6 +339,7 @@ input.search {
   .icon.circle { transform: translateY(.375rem); }
   .avatar-container:not(.no-img) { transform: translateY(.375rem); }
   .avatar-container.no-img { transform: translateY(.15rem); }
+  .emoji { transform: none; }
 }
 
 .buttons-group {
diff --git a/packages/theme/styles/button.scss b/packages/theme/styles/button.scss
index c8c37a8757..4c17308f31 100644
--- a/packages/theme/styles/button.scss
+++ b/packages/theme/styles/button.scss
@@ -11,6 +11,47 @@
   transition-property: border, background-color, color, box-shadow;
   transition-duration: 0.15s;
 
+  &.inline {
+    height: 1.375rem;
+    font-size: 0.75rem;
+    line-height: 0.75rem;
+    &.only-icon {
+      width: 1.375rem;
+    }
+  }
+  &.x-small {
+    height: 1.5rem;
+    font-size: 0.75rem;
+    &.only-icon {
+      width: 1.5rem;
+    }
+  }
+  &.small {
+    height: 1.75rem;
+    font-size: 0.8125rem;
+    &.only-icon {
+      width: 1.75rem;
+    }
+  }
+  &.medium {
+    height: 2rem;
+    &.only-icon {
+      width: 2rem;
+    }
+  }
+  &.large {
+    height: 2.25rem;
+    &.only-icon {
+      width: 2.25rem;
+    }
+  }
+  &.x-large {
+    height: 2.75rem;
+    &.only-icon {
+      width: 2.75rem;
+    }
+  }
+
   &.iconL:not(.iconR) {
     padding: 0 1rem 0 0.75rem;
   }
@@ -89,7 +130,7 @@
       color: var(--theme-caption-color);
     }
   }
-  &:focus {
+  &:not(.no-focus):focus {
     &:not(.sh-filter) {
       box-shadow: 0 0 0 2px var(--primary-button-focused-border);
     }
@@ -239,7 +280,7 @@
       background-color: var(--theme-button-hovered);
       border-color: var(--theme-button-border);
     }
-    &:focus {
+    &:not(.no-focus):focus {
       box-shadow: none;
     }
   }
@@ -287,7 +328,7 @@
     &:hover {
       background-color: var(--dangerous-bg-hover);
     }
-    &:focus {
+    &:not(.no-focus):focus {
       box-shadow: var(--dangerous-shadow);
     }
   }
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index 6cbc54a343..299498434e 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -19,7 +19,7 @@
   display: flex;
   flex-direction: column;
   width: fit-content;
-  min-width: 10rem;
+  min-width: 12.5rem;
   max-width: 17rem;
   max-height: 22rem;
   background: var(--theme-popup-color);
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index 334cd73113..108ac9668b 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -51,6 +51,7 @@
   export let iconRightSize: IconSize = 'x-small'
   export let short: boolean = false
   export let accent: boolean = false
+  export let noFocus: boolean = false
 
   // $: iconSize = size === 'inline' ? 'inline' : 'small'
   let iconOnly: boolean = false
@@ -100,6 +101,7 @@
   bind:this={input}
   class="antiButton {kind} {size} jf-{justify} sh-{shape ?? 'no-shape'} bs-{borderStyle}"
   class:only-icon={iconOnly}
+  class:no-focus={noFocus}
   class:accent
   class:highlight
   class:selected
@@ -143,46 +145,3 @@
   {#if $$slots.content}<slot name="content" />{/if}
   {#if $$slots.iconRight}<slot name="iconRight" />{/if}
 </button>
-
-<style lang="scss">
-  .inline {
-    height: 1.375rem;
-    font-size: 0.75rem;
-    line-height: 0.75rem;
-    &.only-icon {
-      width: 1.375rem;
-    }
-  }
-  .x-small {
-    height: 1.5rem;
-    font-size: 0.75rem;
-    &.only-icon {
-      width: 1.5rem;
-    }
-  }
-  .small {
-    height: 1.75rem;
-    font-size: 0.8125rem;
-    &.only-icon {
-      width: 1.75rem;
-    }
-  }
-  .medium {
-    height: 2rem;
-    &.only-icon {
-      width: 2rem;
-    }
-  }
-  .large {
-    height: 2.25rem;
-    &.only-icon {
-      width: 2.25rem;
-    }
-  }
-  .x-large {
-    height: 2.75rem;
-    &.only-icon {
-      width: 2.75rem;
-    }
-  }
-</style>
diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte
index 20568ba1b6..9d29633514 100644
--- a/packages/ui/src/components/EditWithIcon.svelte
+++ b/packages/ui/src/components/EditWithIcon.svelte
@@ -19,6 +19,7 @@
   import plugin from '../plugin'
   import type { AnySvelteComponent } from '../types'
   import Icon from './Icon.svelte'
+  import Button from './Button.svelte'
   import IconClose from './icons/Close.svelte'
 
   export let icon: Asset | AnySvelteComponent | ComponentType
@@ -46,25 +47,29 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="flex-between editbox {size}" style={width ? 'width: ' + width : ''} on:click={() => textHTML.focus()}>
-  <div class="mr-2 icon"><Icon {icon} size={'small'} /></div>
+  <div class="mr-2 content-dark-color"><Icon {icon} size={'small'} /></div>
   <input bind:this={textHTML} type="text" bind:value placeholder={phTraslate} on:change on:input on:keydown />
   <slot name="extra" />
   {#if value}
-    <div
-      class="ml-2 btn"
-      on:click={() => {
-        value = ''
-        dispatch('change', '')
-      }}
-    >
-      <Icon icon={IconClose} size={'x-small'} />
+    <div class="ml-2">
+      <Button
+        icon={IconClose}
+        kind={'transparent'}
+        size={'small'}
+        noFocus
+        on:click={() => {
+          value = ''
+          dispatch('change', '')
+          textHTML.focus()
+        }}
+      />
     </div>
   {/if}
 </div>
 
 <style lang="scss">
   .editbox {
-    padding: 0 0.5rem 0 0.5rem;
+    padding: 0 0.25rem 0 0.5rem;
     min-width: 10rem;
     color: var(--theme-caption-color);
     border-radius: 0.25rem;
@@ -93,16 +98,5 @@
         color: var(--theme-dark-color);
       }
     }
-
-    .btn {
-      color: var(--theme-dark-color);
-      cursor: pointer;
-      &:hover {
-        color: var(--theme-caption-color);
-      }
-    }
-    .icon {
-      color: var(--theme-dark-color);
-    }
   }
 </style>
diff --git a/packages/ui/src/components/ListView.svelte b/packages/ui/src/components/ListView.svelte
index 240e4a290d..2c8162f5cc 100644
--- a/packages/ui/src/components/ListView.svelte
+++ b/packages/ui/src/components/ListView.svelte
@@ -91,6 +91,7 @@
     user-select: none;
 
     .list-item {
+      margin: 0 0.5rem;
       min-width: 0;
       border-radius: 0.25rem;
     }
diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts
index cd20a415bc..01d3b2d92d 100644
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@@ -148,10 +148,10 @@ export function fitPopupPositionedElement (
   } else {
     // Vertical
     if (rect.bottom + rectPopup.height + 28 <= docHeight) {
-      newProps.top = `${rect.bottom + 1}px`
+      newProps.top = `${rect.bottom + 16}px`
       direction = 'bottom'
     } else if (rectPopup.height + 28 < rect.top) {
-      newProps.bottom = `${docHeight - rect.top + 1}px`
+      newProps.bottom = `${docHeight - rect.top + 16}px`
       direction = 'top'
     } else {
       newProps.top = newProps.bottom = '16px'
diff --git a/plugins/activity-resources/src/components/TxView.svelte b/plugins/activity-resources/src/components/TxView.svelte
index 85ba953152..3c0233ec69 100644
--- a/plugins/activity-resources/src/components/TxView.svelte
+++ b/plugins/activity-resources/src/components/TxView.svelte
@@ -399,7 +399,7 @@
       flex-grow: 1;
       margin-right: 1rem;
       min-width: 0;
-      color: var(--content-color);
+      color: var(--theme-dark-color);
 
       .msgactivity-content__header {
         display: flex;
@@ -520,13 +520,13 @@
   }
 
   .show-diff {
-    color: var(--accent-color);
+    color: var(--theme-content-color);
     cursor: pointer;
     &:hover {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
     &:active {
-      color: var(--accent-color);
+      color: var(--theme-content-color);
     }
   }
 </style>
diff --git a/plugins/tags-resources/src/components/CollapsedTags.svelte b/plugins/tags-resources/src/components/CollapsedTags.svelte
index 54740b7228..4959554b15 100644
--- a/plugins/tags-resources/src/components/CollapsedTags.svelte
+++ b/plugins/tags-resources/src/components/CollapsedTags.svelte
@@ -25,7 +25,7 @@
     {@const valueColor = getPlatformColorDef(value.color ?? 0, $themeStore.dark)}
     {#if i < limit}
       <div class="item" class:last={i === limit - 1} class:first={i === 0}>
-        <div class="color" style:background-color={valueColor.background} />
+        <div class="color" style:background-color={valueColor.color} />
         {#if i === limit - 1 && values.length <= limit}
           <span class="label overflow-label ml-1-5 max-w-40" style:color={valueColor.title}>
             {value.title}
diff --git a/plugins/tags-resources/src/components/TagFilterPresenter.svelte b/plugins/tags-resources/src/components/TagFilterPresenter.svelte
index 8bda54f891..4c370a70ab 100644
--- a/plugins/tags-resources/src/components/TagFilterPresenter.svelte
+++ b/plugins/tags-resources/src/components/TagFilterPresenter.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <div class="container">
-  <div class="color" style:background-color={getPlatformColorDef(value.color ?? 0, $themeStore.dark).background} />
+  <div class="color" style:background-color={getPlatformColorDef(value.color ?? 0, $themeStore.dark).color} />
   <span class="label overflow-label ml-1-5 max-w-40">
     {value.title}
   </span>
diff --git a/plugins/tags-resources/src/components/TagReferencePresenter.svelte b/plugins/tags-resources/src/components/TagReferencePresenter.svelte
index 2457ff2aeb..568581c3a4 100644
--- a/plugins/tags-resources/src/components/TagReferencePresenter.svelte
+++ b/plugins/tags-resources/src/components/TagReferencePresenter.svelte
@@ -43,7 +43,7 @@
         realWidth = element.clientWidth
       }}
     >
-      <div class="color" style:background-color={color.background} />
+      <div class="color" style:background-color={color.color} />
       <span class="label overflow-label ml-1 text-sm caption-color max-w-40" style:color={color.title}
         >{value.title}</span
       >
@@ -56,7 +56,7 @@
         realWidth = element.clientWidth
       }}
     >
-      <div class="color" style:background-color={color.background} />
+      <div class="color" style:background-color={color.color} />
       <span class="label overflow-label ml-1-5 max-w-40" style:color={color.title}>
         {value.title}
       </span>
diff --git a/plugins/tags-resources/src/components/TagsPopup.svelte b/plugins/tags-resources/src/components/TagsPopup.svelte
index 982c787a0d..60a13ba15f 100644
--- a/plugins/tags-resources/src/components/TagsPopup.svelte
+++ b/plugins/tags-resources/src/components/TagsPopup.svelte
@@ -168,7 +168,7 @@
                     checkSelected(selected, element)
                   }}
                 >
-                  <div class="tag" style:background-color={color.background} />
+                  <div class="tag" style:background-color={color.color} />
                   <span class="lines-limit-2 flex-grow" style:color={color.title}>{element.title}</span>
                   <span class="ml-2 text-xs">
                     ({element.refCount ?? 0})
diff --git a/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte b/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
index 2771c6c3c9..f8e9ba735b 100644
--- a/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
@@ -31,13 +31,13 @@
 
 {#if value}
   <DocNavLink object={value} {onClick} {disabled} {noUnderline} {inline} component={view.component.EditDoc}>
-    <span class="flex-presenter" class:inline class:list={kind === 'list'}>
+    <span class="flex-presenter" class:inline-presenter={inline} class:list={kind === 'list'}>
       {#if !inline && shouldShowAvatar}
         <div class="icon" use:tooltip={{ label: tracker.string.Component }}>
           <Icon icon={tracker.icon.Component} size={'small'} />
         </div>
       {/if}
-      <span title={value.label} class="label nowrap">
+      <span title={value.label} class="label nowrap" class:no-underline={disabled || noUnderline}>
         {value.label}
       </span>
     </span>
diff --git a/plugins/tracker-resources/src/components/issues/PriorityFilterValuePresenter.svelte b/plugins/tracker-resources/src/components/issues/PriorityFilterValuePresenter.svelte
index 89b924ffa6..e0a5dcdcf8 100644
--- a/plugins/tracker-resources/src/components/issues/PriorityFilterValuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/PriorityFilterValuePresenter.svelte
@@ -37,7 +37,7 @@
 
 <div class="flex-presenter">
   {#each icons as icon}
-    <div class="icon">
+    <div class="icon small-gap flow">
       <Icon {icon} size={'small'} />
     </div>
   {/each}
diff --git a/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte b/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
index 258032edec..2b9ac6503e 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
@@ -18,10 +18,11 @@
   import tracker from '../../plugin'
 
   export let value: Project
+  export let inline = false
 </script>
 
-<div class="flex-presenter cursor-default">
-  <div class="icon">
+<div class="flex-presenter cursor-default" class:inline-presenter={inline}>
+  <div class="icon" class:emoji={value.icon === tracker.component.IconWithEmojii}>
     <Icon
       icon={value.icon === tracker.component.IconWithEmojii ? IconWithEmojii : value.icon ?? tracker.icon.Home}
       iconProps={value.icon === tracker.component.IconWithEmojii
diff --git a/plugins/view-resources/src/components/ValueSelector.svelte b/plugins/view-resources/src/components/ValueSelector.svelte
index 8618dfaeed..8921e4d81a 100644
--- a/plugins/view-resources/src/components/ValueSelector.svelte
+++ b/plugins/view-resources/src/components/ValueSelector.svelte
@@ -158,6 +158,7 @@
             _class={item._class}
             value={item}
             inline={false}
+            noUnderline
             props={{ disabled: true, inline: false, size, avatarSize: 'smaller' }}
           />
         </div>
diff --git a/plugins/view-resources/src/components/filter/FilterButton.svelte b/plugins/view-resources/src/components/filter/FilterButton.svelte
index 959abe1598..136d630369 100644
--- a/plugins/view-resources/src/components/filter/FilterButton.svelte
+++ b/plugins/view-resources/src/components/filter/FilterButton.svelte
@@ -15,19 +15,12 @@
 <script lang="ts">
   import { Class, Doc, Ref, Space } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import {
-    Button,
-    IconClose,
-    IconFilter,
-    eventToHTMLElement,
-    resolvedLocationStore,
-    showPopup
-  } from '@hcengineering/ui'
+  import { Button, IconFilter, eventToHTMLElement, resolvedLocationStore, showPopup } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { filterStore, getFilterKey, setFilters } from '../../filter'
   import view from '../../plugin'
   import FilterTypePopup from './FilterTypePopup.svelte'
-  import IconArrowDown from '../icons/ArrowDown.svelte'
+  import IconClose from '../icons/Close.svelte'
 
   export let _class: Ref<Class<Doc>> | undefined
   export let space: Ref<Space> | undefined = undefined
@@ -84,9 +77,9 @@
 
 {#if visible}
   <Button
-    icon={IconFilter}
+    icon={$filterStore.length === 0 ? IconFilter : IconClose}
+    iconProps={{ fill: $filterStore.length === 0 ? 'var(--theme-content-color)' : 'var(--theme-halfcontent-color)' }}
     label={$filterStore.length === 0 ? view.string.Filter : view.string.ClearFilters}
-    iconRight={$filterStore.length === 0 ? IconArrowDown : IconClose}
     on:click={(ev) => {
       if ($filterStore.length === 0) add(ev)
       else setFilters([])
diff --git a/plugins/view-resources/src/components/filter/FilterSection.svelte b/plugins/view-resources/src/components/filter/FilterSection.svelte
index 0c2e24b545..ef08930b9c 100644
--- a/plugins/view-resources/src/components/filter/FilterSection.svelte
+++ b/plugins/view-resources/src/components/filter/FilterSection.svelte
@@ -165,7 +165,7 @@
   {/await}
   <div class="divider" />
   <button
-    class="filter-button hoverable"
+    class="filter-button square hoverable"
     on:click={() => {
       dispatch('remove')
     }}
@@ -199,9 +199,8 @@
     align-items: center;
     flex-shrink: 0;
     padding: 0 0.375rem;
-    font-size: 0.75rem;
-    height: 1.5rem;
-    min-width: 1.5rem;
+    height: 1.75rem;
+    min-width: 1.75rem;
     white-space: nowrap;
     color: var(--theme-content-color);
     border: 1px solid transparent;
@@ -209,10 +208,21 @@
     transition-property: border, background-color, color, box-shadow;
     transition-duration: 0.15s;
 
+    .left-round {
+      padding-left: 0.5rem;
+    }
     .btn-icon {
-      color: var(--theme-dark-color);
+      color: var(--theme-halfcontent-color);
       transition: color 0.15s;
       pointer-events: none;
+
+      &.square {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+        width: 1.75rem;
+      }
     }
     span {
       white-space: nowrap;
@@ -228,12 +238,9 @@
         color: var(--theme-caption-color);
       }
     }
-
-    &:last-child {
-      margin-right: 0;
-    }
   }
   .divider {
+    flex-shrink: 0;
     width: 1px;
     height: 1.5rem;
     background-color: var(--theme-refinput-divider);
diff --git a/plugins/view-resources/src/components/icons/Close.svelte b/plugins/view-resources/src/components/icons/Close.svelte
new file mode 100644
index 0000000000..952dc1ca08
--- /dev/null
+++ b/plugins/view-resources/src/components/icons/Close.svelte
@@ -0,0 +1,27 @@
+<!--
+//
+// Copyright © 2023 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let descending: boolean = false
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.7,8l4.6-4.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L3.4,2.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-4.6,4.6c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1L8,8.7l4.6,4.6c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1c0.2-0.2,0.2-0.5,0-0.7L8.7,8z"
+  />
+</svg>