TSK-1489: fixed Components, Milestones, IssueTemplates layout

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

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 */

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}

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}

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,

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: {

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}

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}

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>
 

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}
 />

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}