From 2b329bdfbf548c9962fe45d8200e37d29c27ee91 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 19 May 2023 05:16:42 -0700
Subject: [PATCH] TSK-1489: fixed Components, Milestones, IssueTemplates layout
 (#3220)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 models/tracker/src/index.ts                   | 59 ++++++++++++++-----
 packages/theme/styles/components.scss         | 14 ++++-
 packages/ui/src/components/Button.svelte      |  2 +-
 .../src/components/MembersPresenter.svelte    |  3 +
 plugins/contact-resources/src/plugin.ts       |  1 -
 plugins/contact/src/index.ts                  |  1 +
 .../components/ComponentStatusSelector.svelte | 34 +++++++----
 .../DeleteComponentPresenter.svelte           | 13 +++-
 .../milestones/MilestoneBrowser.svelte        |  2 +-
 .../milestones/MilestoneDatePresenter.svelte  |  4 +-
 .../milestones/MilestoneStatusSelector.svelte | 34 +++++++----
 11 files changed, 119 insertions(+), 48 deletions(-)

diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts
index 3b4d49aa86a..20e970bbfeb 100644
--- a/models/tracker/src/index.ts
+++ b/models/tracker/src/index.ts
@@ -710,14 +710,33 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.ComponentEditor,
-          props: { kind: 'list', size: 'small', shape: 'round', shouldShowPlaceholder: false }
+          props: {
+            kind: 'list',
+            size: 'small',
+            shouldShowPlaceholder: false,
+            listProps: { optional: true, compression: true }
+          }
         },
         {
           key: '',
           presenter: tracker.component.MilestoneEditor,
-          props: { kind: 'list', size: 'small', shape: 'round', shouldShowPlaceholder: false }
+          props: {
+            kind: 'list',
+            size: 'small',
+            shouldShowPlaceholder: false,
+            listProps: { optional: true, compression: true }
+          }
+        },
+        {
+          key: '',
+          presenter: tracker.component.TemplateEstimationEditor,
+          props: {
+            kind: 'list',
+            size: 'small',
+            listProps: { optional: true, compression: true }
+          }
         },
-        { key: '', presenter: tracker.component.TemplateEstimationEditor, props: { kind: 'list', size: 'small' } },
+        { key: '', presenter: view.component.DividerPresenter, props: { type: 'divider' } },
         {
           key: 'modifiedOn',
           presenter: tracker.component.ModificationDatePresenter,
@@ -1846,30 +1865,40 @@ export function createModel (builder: Builder): void {
       descriptor: view.viewlet.List,
       viewOptions: componentListViewOptions,
       config: [
-        { key: '', presenter: tracker.component.IconPresenter },
+        { key: '', presenter: tracker.component.ComponentStatusPresenter, props: { kind: 'list', size: 'small' } },
         {
           key: '',
           presenter: tracker.component.ComponentPresenter,
-          props: { kind: 'list', shouldShowAvatar: false }
+          props: { kind: 'list' }
         },
         { key: '', presenter: view.component.GrowPresenter, props: { type: 'grow' } },
-        {
-          key: '$lookup.lead',
-          presenter: tracker.component.LeadPresenter,
-          props: { _class: tracker.class.Component, defaultClass: contact.class.Employee, shouldShowLabel: false }
-        },
         {
           key: '',
           presenter: contact.component.MembersPresenter,
           props: {
-            kind: 'link',
+            kind: 'list',
+            size: 'small',
             intlTitle: tracker.string.ComponentMembersTitle,
-            intlSearchPh: tracker.string.ComponentMembersSearchPlaceholder
+            intlSearchPh: tracker.string.ComponentMembersSearchPlaceholder,
+            listProps: { optional: true, compression: true }
           }
         },
-        { key: '', presenter: tracker.component.TargetDatePresenter },
-        { key: '', presenter: tracker.component.ComponentStatusPresenter, props: { width: 'min-content' } },
-        { key: '', presenter: tracker.component.DeleteComponentPresenter }
+        {
+          key: '',
+          presenter: tracker.component.TargetDatePresenter,
+          props: { listProps: { optional: true, compression: true } }
+        },
+        { key: '', presenter: view.component.DividerPresenter, props: { type: 'divider' } },
+        {
+          key: '$lookup.lead',
+          presenter: tracker.component.LeadPresenter,
+          props: { _class: tracker.class.Component, defaultClass: contact.class.Employee, shouldShowLabel: false }
+        },
+        {
+          key: '',
+          presenter: tracker.component.DeleteComponentPresenter,
+          props: { kind: 'transparent', size: 'small' }
+        }
       ]
     },
     tracker.viewlet.ComponentList
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index bb0401a07e4..33ae51c1ca5 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -741,10 +741,18 @@
 .list-container .listitems-container,
 .list-container .listitems-container:hover,
 .list-container .button.list,
-.list-container .button.list:hover {
+.list-container .button.list:hover,
+.list-container .datetime-button,
+.list-container .datetime-button:hover {
   background-color: var(--theme-list-button-color) !important;
-  .icon { color: var(--theme-halfcontent-color) !important; }
-  .label { color: var(--theme-halfcontent-color) !important; }
+  .icon {
+    margin-right: .5rem;
+    color: var(--theme-halfcontent-color) !important;
+  }
+  .label {
+    font-size: 0.8125rem !important;
+    color: var(--theme-halfcontent-color) !important;
+  }
 }
 
 /* Kanban - global style */
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index c0f8ca58f3a..35d43d5d60d 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -126,7 +126,7 @@
     </div>
   {/if}
   {#if label}
-    <span class="overflow-label disabled pointer-events-none" class:ml-2={loading}>
+    <span class="overflow-label label disabled pointer-events-none" class:ml-2={loading}>
       <Label {label} params={labelParams} />
     </span>
   {/if}
diff --git a/plugins/contact-resources/src/components/MembersPresenter.svelte b/plugins/contact-resources/src/components/MembersPresenter.svelte
index 668f5585683..7c3b020bb91 100644
--- a/plugins/contact-resources/src/components/MembersPresenter.svelte
+++ b/plugins/contact-resources/src/components/MembersPresenter.svelte
@@ -29,6 +29,7 @@
   export let intlTitle: IntlString
   export let intlSearchPh: IntlString
   export let retrieveMembers: (doc: Doc) => Ref<Employee>[]
+  export let shouldShowLabel: boolean = true
 
   const client = getClient()
 
@@ -81,6 +82,8 @@
   {size}
   {width}
   {justify}
+  label={shouldShowLabel ? contact.string.NumberMembers : undefined}
+  labelParams={shouldShowLabel ? { count: members.length } : {}}
   title={buttonTitle}
   icon={contact.icon.ComponentMembers}
   on:click={handleMembersEditorOpened}
diff --git a/plugins/contact-resources/src/plugin.ts b/plugins/contact-resources/src/plugin.ts
index 71b7f65c934..92505374cc9 100644
--- a/plugins/contact-resources/src/plugin.ts
+++ b/plugins/contact-resources/src/plugin.ts
@@ -53,7 +53,6 @@ export default mergeIds(contactId, contact, {
     ViewFullProfile: '' as IntlString,
     Member: '' as IntlString,
     Members: '' as IntlString,
-    NumberMembers: '' as IntlString,
     NoMembers: '' as IntlString,
     AddMember: '' as IntlString,
     KickEmployee: '' as IntlString,
diff --git a/plugins/contact/src/index.ts b/plugins/contact/src/index.ts
index 7d4cdd61d84..b1ba2a2aa44 100644
--- a/plugins/contact/src/index.ts
+++ b/plugins/contact/src/index.ts
@@ -263,6 +263,7 @@ export const contactPlugin = plugin(contactId, {
     PersonFirstNamePlaceholder: '' as IntlString,
     PersonLastNamePlaceholder: '' as IntlString,
     DisplayName: '' as IntlString,
+    NumberMembers: '' as IntlString,
     Position: '' as IntlString
   },
   viewlet: {
diff --git a/plugins/tracker-resources/src/components/components/ComponentStatusSelector.svelte b/plugins/tracker-resources/src/components/components/ComponentStatusSelector.svelte
index cf54436f4c9..9fe1f3d6ca5 100644
--- a/plugins/tracker-resources/src/components/components/ComponentStatusSelector.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentStatusSelector.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { ComponentStatus } from '@hcengineering/tracker'
-  import { Button, showPopup, SelectPopup, eventToHTMLElement } from '@hcengineering/ui'
+  import { Button, showPopup, SelectPopup, eventToHTMLElement, Icon } from '@hcengineering/ui'
   import type { ButtonKind, ButtonSize, LabelAndProps } from '@hcengineering/ui'
   import tracker from '../../plugin'
   import { defaultComponentStatuses, componentStatusAssets } from '../../utils'
@@ -60,14 +60,24 @@
   }
 </script>
 
-<Button
-  {kind}
-  {size}
-  {width}
-  {justify}
-  disabled={!isEditable}
-  icon={selectedStatusIcon}
-  label={selectedStatusLabel}
-  {showTooltip}
-  on:click={handleComponentStatusEditorOpened}
-/>
+{#if kind === 'list'}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div
+    class="flex-no-shrink clear-mins cursor-pointer content-pointer-events-none"
+    on:click={handleComponentStatusEditorOpened}
+  >
+    <Icon icon={selectedStatusIcon} {size} />
+  </div>
+{:else}
+  <Button
+    {kind}
+    {size}
+    {width}
+    {justify}
+    disabled={!isEditable}
+    icon={selectedStatusIcon}
+    label={selectedStatusLabel}
+    {showTooltip}
+    on:click={handleComponentStatusEditorOpened}
+  />
+{/if}
diff --git a/plugins/tracker-resources/src/components/components/DeleteComponentPresenter.svelte b/plugins/tracker-resources/src/components/components/DeleteComponentPresenter.svelte
index 2917edde3e4..d28dcd5758b 100644
--- a/plugins/tracker-resources/src/components/components/DeleteComponentPresenter.svelte
+++ b/plugins/tracker-resources/src/components/components/DeleteComponentPresenter.svelte
@@ -14,13 +14,14 @@
 -->
 <script lang="ts">
   import view from '@hcengineering/view'
-  import { Button, ButtonSize, LabelAndProps, showPopup } from '@hcengineering/ui'
+  import { Button, ButtonSize, ButtonKind, LabelAndProps, showPopup } from '@hcengineering/ui'
   import { getClient, MessageBox } from '@hcengineering/presentation'
   import type { Component } from '@hcengineering/tracker'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
 
   export let value: Component
+  export let kind: ButtonKind = 'secondary'
   export let size: ButtonSize = 'medium'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = 'min-content'
@@ -52,5 +53,13 @@
 </script>
 
 {#if value}
-  <Button {size} {width} {justify} {showTooltip} icon={view.icon.Delete} on:click={() => showConfirmationDialog()} />
+  <Button
+    {kind}
+    {size}
+    {width}
+    {justify}
+    {showTooltip}
+    icon={view.icon.Delete}
+    on:click={() => showConfirmationDialog()}
+  />
 {/if}
diff --git a/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte b/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte
index a0337a8ed9d..fd5e83eb66f 100644
--- a/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte
@@ -125,7 +125,7 @@
   <div class="ac-header__wrap-title mr-3">
     <span class="ac-header__title"><Label {label} /></span>
     <span class="componentTitle">
-      › <Label label={title} />
+      &nbsp;› <Label label={title} />
     </span>
   </div>
 
diff --git a/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte b/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte
index e0a126721c0..d1454963b0d 100644
--- a/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte
@@ -17,11 +17,12 @@
 
   import { getClient } from '@hcengineering/presentation'
   import { Milestone } from '@hcengineering/tracker'
-  import { DatePresenter } from '@hcengineering/ui'
+  import { DatePresenter, ButtonSize } from '@hcengineering/ui'
 
   export let value: Milestone
   export let field = 'targetDate'
   export let kind: 'transparent' | 'primary' | 'link' | 'list' = 'primary'
+  export let size: ButtonSize | 'x-small' = 'small'
 
   const client = getClient()
 
@@ -44,5 +45,6 @@
   shouldShowLabel={true}
   icon={'normal'}
   {kind}
+  {size}
   on:change={handleDateChanged}
 />
diff --git a/plugins/tracker-resources/src/components/milestones/MilestoneStatusSelector.svelte b/plugins/tracker-resources/src/components/milestones/MilestoneStatusSelector.svelte
index 9bedc6ef918..4a8f152a909 100644
--- a/plugins/tracker-resources/src/components/milestones/MilestoneStatusSelector.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestoneStatusSelector.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { MilestoneStatus } from '@hcengineering/tracker'
-  import { Button, showPopup, SelectPopup, eventToHTMLElement } from '@hcengineering/ui'
+  import { Button, showPopup, SelectPopup, eventToHTMLElement, Icon } from '@hcengineering/ui'
   import type { ButtonKind, ButtonSize, LabelAndProps } from '@hcengineering/ui'
   import tracker from '../../plugin'
   import { defaultMilestoneStatuses, milestoneStatusAssets } from '../../utils'
@@ -60,14 +60,24 @@
   }
 </script>
 
-<Button
-  {kind}
-  {size}
-  {width}
-  {justify}
-  disabled={!isEditable}
-  icon={selectedStatusIcon}
-  label={selectedStatusLabel}
-  {showTooltip}
-  on:click={handleMilestoneStatusEditorOpened}
-/>
+{#if kind === 'list'}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div
+    class="flex-no-shrink clear-mins cursor-pointer content-pointer-events-none"
+    on:click={handleMilestoneStatusEditorOpened}
+  >
+    <Icon icon={selectedStatusIcon} {size} />
+  </div>
+{:else}
+  <Button
+    {kind}
+    {size}
+    {width}
+    {justify}
+    disabled={!isEditable}
+    icon={selectedStatusIcon}
+    label={selectedStatusLabel}
+    {showTooltip}
+    on:click={handleMilestoneStatusEditorOpened}
+  />
+{/if}