TSK-1489: fixed Components, Milestones, IssueTemplates layout (#3220)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

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}