From ec8b76c299e0327c93a4b5b814c999137e1d934d Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 21 Jun 2022 11:53:19 +0300
Subject: [PATCH] Fix components. (#2122)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/ObjectPopup.svelte         | 19 ++---
 packages/theme/styles/dialogs.scss            |  1 +
 .../src/components/CreateIssue.svelte         |  1 +
 .../components/issues/AssigneeEditor.svelte   |  3 +-
 .../components/issues/IssuePresenter.svelte   |  8 +++
 .../src/components/issues/IssuePreview.svelte |  2 +-
 .../issues/edit/SubIssueList.svelte           | 72 ++++++++++++++-----
 7 files changed, 79 insertions(+), 27 deletions(-)

diff --git a/packages/presentation/src/components/ObjectPopup.svelte b/packages/presentation/src/components/ObjectPopup.svelte
index ba7743e3c6..e6ce81956e 100644
--- a/packages/presentation/src/components/ObjectPopup.svelte
+++ b/packages/presentation/src/components/ObjectPopup.svelte
@@ -163,16 +163,19 @@
 <FocusHandler {manager} />
 
 <div class="selectPopup" class:plainContainer={!shadows} class:width-40={width === 'large'} on:keydown={onKeydown}>
-  <div class="header flex-bletween">
+  <div class="header flex-between">
     <EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
     {#if create !== undefined}
-      <Button
-        focusIndex={2}
-        kind={'transparent'}
-        icon={IconAdd}
-        showTooltip={{ label: create.label }}
-        on:click={onCreate}
-      />
+      <div class="mx-2">
+        <Button
+          focusIndex={2}
+          kind={'transparent'}
+          size={'small'}
+          icon={IconAdd}
+          showTooltip={{ label: create.label }}
+          on:click={onCreate}
+        />
+      </div>
     {/if}
   </div>
   <div class="scroll">
diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss
index c0b3ce4695..31e042ccb2 100644
--- a/packages/theme/styles/dialogs.scss
+++ b/packages/theme/styles/dialogs.scss
@@ -135,6 +135,7 @@
     width: 40rem;
     height: max-content;
     max-width: 40rem;
+    max-height: calc(100vh - 2rem);
 
     .antiCard-header {
       padding: .75rem .75rem .375rem;
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index adc895b5e3..8a88485086 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -303,6 +303,7 @@
         value={object}
         size="small"
         kind="no-border"
+        width={'min-content'}
         on:change={({ detail }) => (currentAssignee = detail)}
       />
       <Component
diff --git a/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte b/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte
index ccdbe5dce2..170cd2c126 100644
--- a/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte
@@ -26,6 +26,7 @@
   export let size: ButtonSize = 'large'
   export let kind: ButtonKind = 'link'
   export let tooltipAlignment: TooltipAlignment | undefined = undefined
+  export let width: string = '100%'
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -53,7 +54,7 @@
     titleDeselect={tracker.string.Unassigned}
     {size}
     {kind}
-    width={'100%'}
+    {width}
     justify={'left'}
     showTooltip={{ label: tracker.string.AssignTo, direction: tooltipAlignment }}
     on:change={({ detail }) => handleAssigneeChanged(detail)}
diff --git a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
index b61d778a31..db18fc1510 100644
--- a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
@@ -55,5 +55,13 @@
     font-size: 0.8125rem;
     color: var(--content-color);
     cursor: pointer;
+
+    &:hover {
+      color: var(--caption-color);
+      text-decoration: underline;
+    }
+    &:active {
+      color: var(--accent-color);
+    }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/issues/IssuePreview.svelte b/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
index 5e9f58fca6..ac1be01e04 100644
--- a/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
@@ -85,7 +85,7 @@
       <StatusEditor value={issue} {statuses} shouldShowLabel kind={'transparent'} />
       <PriorityEditor value={issue} shouldShowLabel />
       {#if issue.assignee}
-        <AssigneeEditor value={issue} />
+        <AssigneeEditor value={issue} width={'min-content'} />
       {/if}
     </div>
     <IssueStatusActivity {issue} />
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
index c9b10fd67c..c596fb61b8 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
@@ -17,7 +17,13 @@
   import { flip } from 'svelte/animate'
   import { Doc, WithLookup } from '@anticrm/core'
   import { Issue, IssueStatus, Team } from '@anticrm/tracker'
-  import { ActionContext, ContextMenu, ListSelectionProvider, SelectDirection } from '@anticrm/view-resources'
+  import {
+    ActionContext,
+    ContextMenu,
+    ListSelectionProvider,
+    SelectDirection,
+    FixedColumn
+  } from '@anticrm/view-resources'
   import { showPanel, showPopup } from '@anticrm/ui'
   import tracker from '../../../plugin'
   import { getIssueId } from '../../../utils'
@@ -77,6 +83,16 @@
     //   table.select(offset, of)
     // }
   })
+
+  let varsStyle: string = ''
+  const propsWidth: Record<string, number> = { issue: 0 }
+  $: if (propsWidth) {
+    varsStyle = ''
+    for (const key in propsWidth) varsStyle += `--fixed-${key}: ${propsWidth[key]}px;`
+  }
+  const checkWidth = (key: string, result: CustomEvent): void => {
+    if (result !== undefined) propsWidth[key] = result.detail
+  }
 </script>
 
 <ActionContext
@@ -91,6 +107,7 @@
     class:is-dragging={index === draggingIndex}
     class:is-dragged-over-up={draggingIndex !== null && index < draggingIndex && index === hoveringIndex}
     class:is-dragged-over-down={draggingIndex !== null && index > draggingIndex && index === hoveringIndex}
+    style={varsStyle}
     animate:flip={{ duration: 400 }}
     draggable={true}
     on:click|self={() => openIssue(issue)}
@@ -110,22 +127,26 @@
     <div class="draggable-container">
       <div class="draggable-mark"><Circles /></div>
     </div>
-    <div class="flex-center ml-6 clear-mins">
-      <div class="mr-1">
-        <PriorityEditor value={issue} isEditable kind="transparent" justify="center" />
-      </div>
-      <span class="flex-no-shrink text" on:click={() => openIssue(issue)}>
-        {getIssueId(currentTeam, issue)}
+    <div class="flex-row-center ml-6 clear-mins gap-2">
+      <PriorityEditor value={issue} isEditable kind={'list'} size={'small'} justify={'center'} />
+      <span class="issuePresenter" on:click={() => openIssue(issue)}>
+        <FixedColumn
+          width={propsWidth.issue}
+          key={'issue'}
+          justify={'left'}
+          on:update={(result) => checkWidth('issue', result)}
+        >
+          {getIssueId(currentTeam, issue)}
+        </FixedColumn>
       </span>
-      <div class="mx-1">
-        <StatusEditor
-          value={issue}
-          statuses={issueStatuses}
-          justify="center"
-          kind="transparent"
-          tooltipAlignment="bottom"
-        />
-      </div>
+      <StatusEditor
+        value={issue}
+        statuses={issueStatuses}
+        justify="center"
+        kind={'list'}
+        size={'small'}
+        tooltipAlignment="bottom"
+      />
       <span class="text name" title={issue.title} on:click={() => openIssue(issue)}>
         {issue.title}
       </span>
@@ -146,7 +167,24 @@
 
     .text {
       font-weight: 500;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
+    }
+
+    .issuePresenter {
+      flex-shrink: 0;
+      min-width: 0;
+      min-height: 0;
+      font-weight: 500;
+      color: var(--content-color);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--caption-color);
+        text-decoration: underline;
+      }
+      &:active {
+        color: var(--accent-color);
+      }
     }
 
     .name {