From 7391ce1c44e05683eea42880a097157969ca3749 Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Tue, 6 Jun 2023 18:04:56 +0600
Subject: [PATCH] UBER-379 Align comment right after title. (#3360)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 models/tracker/src/index.ts                   | 40 ++++++++--------
 .../ui/src/components/icons/Attachment.svelte |  4 +-
 .../ui/src/components/icons/Thread.svelte     |  4 +-
 .../components/AttachmentsPresenter.svelte    | 48 +++++++++++++------
 .../src/components/CommentsPresenter.svelte   | 48 +++++++++++++------
 5 files changed, 94 insertions(+), 50 deletions(-)

diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts
index c0145b5bd2..0cc867f00c 100644
--- a/models/tracker/src/index.ts
+++ b/models/tracker/src/index.ts
@@ -538,6 +538,8 @@ export function createModel (builder: Builder): void {
           props: {},
           displayProps: { key: 'title' }
         },
+        { key: 'comments', displayProps: { key: 'comments' } },
+        { key: 'attachments', displayProps: { key: 'attachments' } },
         { key: '', label: tracker.string.SubIssues, presenter: tracker.component.SubIssuesSelector, props: {} },
         {
           key: 'labels',
@@ -545,14 +547,22 @@ export function createModel (builder: Builder): void {
           displayProps: { optional: true, compression: true },
           props: { kind: 'list', full: false }
         },
-        { key: 'attachments', displayProps: { key: 'attachments', optional: true } },
-        { key: 'comments', displayProps: { key: 'comments', optional: true } },
         {
           key: '',
-          label: tracker.string.DueDate,
-          presenter: tracker.component.DueDatePresenter,
-          displayProps: { key: 'dueDate', optional: true, compression: true },
-          props: { kind: 'list' }
+          label: tracker.string.Milestone,
+          presenter: tracker.component.MilestoneEditor,
+          props: {
+            kind: 'list',
+            size: 'small',
+            shape: 'round',
+            shouldShowPlaceholder: false
+          },
+          displayProps: {
+            key: 'milestone',
+            excludeByKey: 'milestone',
+            compression: true,
+            optional: true
+          }
         },
         {
           key: '',
@@ -573,20 +583,10 @@ export function createModel (builder: Builder): void {
         },
         {
           key: '',
-          label: tracker.string.Milestone,
-          presenter: tracker.component.MilestoneEditor,
-          props: {
-            kind: 'list',
-            size: 'small',
-            shape: 'round',
-            shouldShowPlaceholder: false
-          },
-          displayProps: {
-            key: 'milestone',
-            excludeByKey: 'milestone',
-            compression: true,
-            optional: true
-          }
+          label: tracker.string.DueDate,
+          presenter: tracker.component.DueDatePresenter,
+          displayProps: { key: 'dueDate', optional: true, compression: true },
+          props: { kind: 'list' }
         },
         { key: '', displayProps: { grow: true } },
         {
diff --git a/packages/ui/src/components/icons/Attachment.svelte b/packages/ui/src/components/icons/Attachment.svelte
index b05e43e981..d1479587ee 100644
--- a/packages/ui/src/components/icons/Attachment.svelte
+++ b/packages/ui/src/components/icons/Attachment.svelte
@@ -14,7 +14,9 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
+  import { ButtonSize } from '../../types'
+
+  export let size: ButtonSize
   export let fill: string = 'currentColor'
 </script>
 
diff --git a/packages/ui/src/components/icons/Thread.svelte b/packages/ui/src/components/icons/Thread.svelte
index dadc5cd7fb..4783ec0aa9 100644
--- a/packages/ui/src/components/icons/Thread.svelte
+++ b/packages/ui/src/components/icons/Thread.svelte
@@ -14,7 +14,9 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
+  import { ButtonSize } from '../../types'
+
+  export let size: ButtonSize
   const fill: string = 'currentColor'
 </script>
 
diff --git a/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte
index 0adce7bbfa..b6282863d3 100644
--- a/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte
@@ -15,30 +15,50 @@
 -->
 <script lang="ts">
   import type { Doc } from '@hcengineering/core'
-  import { IconAttachment, tooltip } from '@hcengineering/ui'
+  import { Button, ButtonKind, ButtonSize, IconAttachment, tooltip } from '@hcengineering/ui'
   import { DocNavLink } from '@hcengineering/view-resources'
   import AttachmentPopup from './AttachmentPopup.svelte'
 
   export let value: number | undefined
   export let object: Doc
-  export let size: 'small' | 'medium' | 'large' = 'small'
+  export let size: ButtonSize = 'small'
+  export let kind: ButtonKind = 'link'
   export let showCounter = true
 </script>
 
 {#if value && value > 0}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <DocNavLink {object} inline noUnderline={true}>
-    <div
-      use:tooltip={{
-        component: AttachmentPopup,
-        props: { objectId: object._id, attachments: value, object }
-      }}
-      class="sm-tool-icon"
-    >
-      <span class="icon"><IconAttachment {size} /></span>
-      {#if showCounter}
-        {value}
-      {/if}
-    </div>
+    {#if kind === 'list'}
+      <div
+        use:tooltip={{
+          component: AttachmentPopup,
+          props: { objectId: object._id, attachments: value, object }
+        }}
+        class="sm-tool-icon"
+      >
+        <Button {kind} {size}>
+          <div slot="content" class="flex-row-center">
+            <span class="icon"><IconAttachment {size} /></span>
+            {#if showCounter}
+              {value}
+            {/if}
+          </div></Button
+        >
+      </div>
+    {:else}
+      <div
+        use:tooltip={{
+          component: AttachmentPopup,
+          props: { objectId: object._id, attachments: value, object }
+        }}
+        class="sm-tool-icon"
+      >
+        <span class="icon"><IconAttachment {size} /></span>
+        {#if showCounter}
+          {value}
+        {/if}
+      </div>
+    {/if}
   </DocNavLink>
 {/if}
diff --git a/plugins/chunter-resources/src/components/CommentsPresenter.svelte b/plugins/chunter-resources/src/components/CommentsPresenter.svelte
index f8cea808b7..19d9394455 100644
--- a/plugins/chunter-resources/src/components/CommentsPresenter.svelte
+++ b/plugins/chunter-resources/src/components/CommentsPresenter.svelte
@@ -15,13 +15,14 @@
 -->
 <script lang="ts">
   import type { Doc } from '@hcengineering/core'
-  import { IconThread, tooltip } from '@hcengineering/ui'
+  import { Button, ButtonKind, ButtonSize, IconThread, tooltip } from '@hcengineering/ui'
   import { DocNavLink } from '@hcengineering/view-resources'
   import CommentPopup from './CommentPopup.svelte'
 
   export let value: number | undefined
   export let object: Doc
-  export let size: 'small' | 'medium' | 'large' = 'small'
+  export let size: ButtonSize = 'small'
+  export let kind: ButtonKind = 'link'
   export let showCounter = true
   export let withInput: boolean = true
 </script>
@@ -29,17 +30,36 @@
 {#if (value && value > 0) || withInput}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <DocNavLink {object} inline noUnderline={true}>
-    <div
-      use:tooltip={{
-        component: CommentPopup,
-        props: { objectId: object._id, object, withInput }
-      }}
-      class="sm-tool-icon"
-    >
-      <span class="icon"><IconThread {size} /></span>
-      {#if showCounter && value && value !== 0}
-        &nbsp;{value}
-      {/if}
-    </div>
+    {#if kind === 'list'}
+      <div
+        use:tooltip={{
+          component: CommentPopup,
+          props: { objectId: object._id, object, withInput }
+        }}
+        class="sm-tool-icon"
+      >
+        <Button {kind} {size}>
+          <div slot="content" class="flex-row-center">
+            <span class="icon"><IconThread size={'x-small'} /></span>
+            {#if showCounter}
+              &nbsp;{value}
+            {/if}
+          </div>
+        </Button>
+      </div>
+    {:else}
+      <div
+        use:tooltip={{
+          component: CommentPopup,
+          props: { objectId: object._id, object, withInput }
+        }}
+        class="sm-tool-icon"
+      >
+        <span class="icon"><IconThread {size} /></span>
+        {#if showCounter && value && value !== 0}
+          &nbsp;{value}
+        {/if}
+      </div>
+    {/if}
   </DocNavLink>
 {/if}