UBER-219: updated CreateIssue layout (#3244)

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

plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte

@@ -30,6 +30,7 @@
   export let tooltipAlignment: TooltipAlignment | undefined = undefined
   export let width: string = '100%'
   export let focusIndex: number | undefined = undefined
+  export let short: boolean = false
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -99,6 +100,7 @@
     {kind}
     {avatarSize}
     {width}
+    {short}
     showNavigate={false}
     justify={'left'}
     showTooltip={{ label: tracker.string.AssignTo, direction: tooltipAlignment }}

plugins/tracker-resources/src/components/issues/IssuesHeader.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <div
-  class="ac-header full divide"
+  class="ac-header full divide caption-height"
   class:header-with-mode-selector={modeSelectorProps !== undefined}
   class:header-without-label={!label}
 >

plugins/tracker-resources/src/components/issues/ParentIssue.svelte

@@ -15,10 +15,11 @@
 <script lang="ts">
   import { createQuery } from '@hcengineering/presentation'
   import { Project, Issue } from '@hcengineering/tracker'
-  import { Spinner, IconClose, tooltip } from '@hcengineering/ui'
+  import { Spinner, IconClose, Button } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
   import { getIssueId } from '../../issues'
+  import PriorityRefPresenter from './PriorityRefPresenter.svelte'
 
   export let issue: Issue
 
@@ -31,51 +32,65 @@
   $: issueId = project && getIssueId(project, issue)
 </script>
 
-<div class="flex-center root">
+<div class="parentIssue-container">
+  <div class="flex-no-shrink mr-1-5">
+    <PriorityRefPresenter value={issue.priority} shouldShowLabel={false} />
+  </div>
   {#if issueId}
-    <span class="overflow-label flex-no-shrink">{issueId}</span>
+    <span class="overflow-label flex-no-shrink content-dark-color">{issueId}</span>
   {:else}
     <Spinner size="small" />
   {/if}
   <span class="overflow-label issue-title">{issue.title}</span>
+  <Button
+    icon={IconClose}
+    showTooltip={{ label: tracker.string.RemoveParent, direction: 'bottom' }}
+    kind={'transparent'}
+    size={'small'}
+    on:click={() => dispatch('close')}
+  />
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div
+  <!-- <div
     class="button-close"
     use:tooltip={{ label: tracker.string.RemoveParent, direction: 'bottom' }}
     on:click={() => dispatch('close')}
   >
     <IconClose size="x-small" />
-  </div>
+  </div> -->
 </div>
 
 <style lang="scss">
-  .root {
-    padding: 0.375rem 0.75rem;
-    line-height: 150%;
+  .parentIssue-container {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
     max-width: fit-content;
-    border: 1px solid var(--button-border-color);
+    min-width: 0;
+    // line-height: 150%;
+    height: 2.25rem;
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.25rem;
-    box-shadow: var(--button-shadow);
   }
 
   .issue-title {
-    margin: 0 0.75rem 0 0.5rem;
+    margin: 0 0.25rem 0 0.375rem;
     padding-right: 0.75rem;
-    color: var(--accent-color);
-    border-right: 1px solid var(--button-border-color);
+    min-width: 0;
+    color: var(--theme-caption-color);
+    border-right: 1px solid var(--theme-button-border);
   }
 
   .button-close {
     cursor: pointer;
     position: relative;
-    color: var(--content-color);
+    color: var(--theme-dark-color);
     transition: color 0.15s;
 
     &:hover {
-      color: var(--caption-color);
+      color: var(--theme-content-color);
     }
     &:active {
-      color: var(--accent-color);
+      color: var(--theme-dark-color);
     }
     &::before {
       position: absolute;

plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte

@@ -22,6 +22,7 @@
   export let colorInherit: boolean = false
   export let accent: boolean = false
   export let inline: boolean = false
+  export let shouldShowLabel: boolean = true
 
   $: icon = issuePriorities[value]?.icon
   $: label = issuePriorities[value]?.label
@@ -31,12 +32,14 @@
   {#if !inline && icon}
     <Icon {icon} {size} fill={'var(--theme-caption-color)'} />
   {/if}
-  <span
-    class="overflow-label"
-    class:ml-2={!inline && icon}
-    style:color={colorInherit ? 'inherit' : 'var(--theme-content-color)'}
-    class:fs-bold={accent}
-  >
-    <Label {label} />
-  </span>
+  {#if shouldShowLabel}
+    <span
+      class="overflow-label"
+      class:ml-2={!inline && icon}
+      style:color={colorInherit ? 'inherit' : 'var(--theme-content-color)'}
+      class:fs-bold={accent}
+    >
+      <Label {label} />
+    </span>
+  {/if}
 </div>

plugins/tracker-resources/src/components/issues/StatusEditor.svelte

@@ -40,6 +40,7 @@
   export let width: string | undefined = undefined
   export let defaultIssueStatus: Ref<IssueStatus> | undefined = undefined
   export let focusIndex: number | undefined = undefined
+  export let short: boolean = false
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -120,7 +121,10 @@
         {#if selectedStatus}<IssueStatusIcon value={selectedStatus} size={kind === 'list' ? 'small' : 'medium'} />{/if}
       </div>
       {#if selectedStatusLabel}
-        <span class="{kind === 'list' ? 'ml-1 text-md' : 'ml-2 text-base'} overflow-label disabled content-color">
+        <span
+          class="{kind === 'list' ? 'ml-1 text-md' : 'ml-2 text-base'} overflow-label disabled content-color"
+          class:max-w-20={short}
+        >
           {selectedStatusLabel}
         </span>
       {/if}
@@ -134,22 +138,25 @@
       {kind}
       {width}
       {focusIndex}
+      {short}
       on:click={handleStatusEditorOpened}
     >
-      <span slot="content" class="flex-row-center pointer-events-none">
+      <svelte:fragment slot="icon">
         {#if selectedStatus}
           <IssueStatusIcon value={selectedStatus} size={iconSize} />
         {/if}
+      </svelte:fragment>
+      <svelte:fragment slot="content">
         {#if selectedStatusLabel}
           <span
             class="overflow-label disabled"
-            class:ml-1={selectedStatus && smallgap}
+            class:ml-1-5={selectedStatus && smallgap}
             class:ml-2={selectedStatus && !smallgap}
           >
             {selectedStatusLabel}
           </span>
         {/if}
-      </span>
+      </svelte:fragment>
     </Button>
   {/if}
 {/if}

plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte

@@ -84,7 +84,7 @@
       label={tracker.string.TimeSpendValue}
       notSelected={value.estimation === 0}
       labelParams={{ value: value.estimation }}
-      icon={tracker.icon.Estimation}
+      icon={tracker.icon.DueDate}
       {justify}
       {width}
       {size}

plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte

@@ -68,6 +68,7 @@
     dispatch('close')
   }}
   okLabel={presentation.string.Ok}
+  gap={'gapV-4'}
   on:close={() => {
     dispatch('close', null)
   }}

plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte

@@ -89,6 +89,7 @@
   label={value === undefined ? tracker.string.TimeSpendReportAdd : tracker.string.TimeSpendReportValue}
   {canSave}
   okAction={create}
+  gap={'gapV-4'}
   on:close
   okLabel={value === undefined ? presentation.string.Create : presentation.string.Save}
   on:changeContent