USER-79: fixed the sidebar in the Panel. Update IssuePreview layout. (#3201)

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

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

@@ -47,6 +47,6 @@
   $: formatTime(value)
 </script>
 
-<span style="white-space: nowrap;">
+<span class="textPadding" style="white-space: nowrap;">
   {time}
 </span>

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

@@ -18,9 +18,9 @@
   import chunter from '@hcengineering/chunter'
   import { CommentPopup } from '@hcengineering/chunter-resources'
   import { Ref } from '@hcengineering/core'
-  import { createQuery, getClient, MessageViewer } from '@hcengineering/presentation'
+  import { createQuery, getClient, MessageViewer, IconForward } from '@hcengineering/presentation'
   import { Issue, Project } from '@hcengineering/tracker'
-  import { Label, resizeObserver, Scroller } from '@hcengineering/ui'
+  import { Label, Scroller, resizeObserver } from '@hcengineering/ui'
   import tracker from '../../plugin'
   import AssigneeEditor from './AssigneeEditor.svelte'
   import IssueStatusActivity from './IssueStatusActivity.svelte'
@@ -50,8 +50,7 @@
   $: issueName = currentProject && issue && `${currentProject.identifier}-${issue.number}`
 
   const limit: number = 350
-
-  let cHeight: number
+  let cHeight: number = 0
 
   let parent: Issue | undefined
 
@@ -66,73 +65,87 @@
   $: getParent(issue?.attachedTo as Ref<Issue>)
 </script>
 
-<div class="flex">
-  <Scroller>
-    <div class="w-165 scrollerContent">
-      {#if parent}
-        <div class="mb-4 ml-2">{parent.title}</div>
-      {/if}
-      {#if issue}
-        <div class="fs-title text-xl ml-2">{issueName} {issue.title}</div>
-        <div class="flex mt-2">
-          <StatusEditor value={issue} shouldShowLabel kind={'transparent'} />
-          <PriorityEditor value={issue} shouldShowLabel />
-          {#if issue.assignee}
-            <AssigneeEditor value={issue} width={'min-content'} />
-          {/if}
-        </div>
-        <IssueStatusActivity {issue} />
-
-        <div class="mb-2">
-          <Label label={tracker.string.Description} />:
-        </div>
-        {#if issue.description}
-          <div
-            class="descr ml-2"
-            class:mask={cHeight >= limit}
-            use:resizeObserver={(element) => {
-              cHeight = element.clientHeight
-            }}
-          >
-            <MessageViewer message={issue.description} />
-          </div>
-        {:else}
-          <div class="ml-2 content-dark-color">
-            <Label label={tracker.string.NoDescription} />
-          </div>
-        {/if}
-        {#if issue.attachments}
-          <div class="mt-2 mb-2">
-            <Label label={attachment.string.Attachments} />:
-          </div>
-          <div>
-            <AttachmentDocList value={issue} />
-          </div>
-        {/if}
-        {#if issue.comments}
-          <div class="mt-2 mb-2">
-            <Label label={chunter.string.Comments} />:
-          </div>
-          <div class="ml-2">
-            <CommentPopup objectId={issue._id} object={issue} />
-          </div>
+{#if issue}
+  <div class="ap-header flex-between">
+    <div class="flex-col">
+      <div class="flex-row-center gap-1">
+        {#if parent}
+          <span class="overflow-label content-color">{parent.title}</span>
+          <IconForward size={'x-small'} />
         {/if}
+        <span class="content-dark-color">{issueName}</span>
+      </div>
+      <span class="overflow-label text-xl caption-color">{issue.title}</span>
+    </div>
+  </div>
+  <Scroller padding={'0.75rem 1.75rem 0'}>
+    <div class="flex-row-center gap-2 mb-2">
+      <StatusEditor value={issue} shouldShowLabel kind={'secondary'} />
+      <PriorityEditor value={issue} shouldShowLabel kind={'secondary'} />
+      {#if issue.assignee}
+        <AssigneeEditor value={issue} width={'min-content'} kind={'secondary'} />
       {/if}
     </div>
+
+    <div class="grid-preview">
+      <IssueStatusActivity {issue} accentHeader />
+    </div>
+
+    <div class="mt-6 mb-2 overflow-label fs-bold content-dark-color">
+      <Label label={tracker.string.Description} />:
+    </div>
+    {#if issue.description}
+      <div class="description-container" class:masked={cHeight > limit} style:max-height={`${limit}px`}>
+        <div class="description-content" use:resizeObserver={(element) => (cHeight = element.clientHeight)}>
+          <MessageViewer message={issue.description} />
+        </div>
+      </div>
+    {:else}
+      <div class="overflow-label content-darker-color">
+        <Label label={tracker.string.NoDescription} />
+      </div>
+    {/if}
+    {#if issue.attachments}
+      <div class="mt-6 mb-2 overflow-label fs-bold content-dark-color">
+        <Label label={attachment.string.Attachments} />:
+      </div>
+      <AttachmentDocList value={issue} />
+    {/if}
+    {#if issue.comments}
+      <div class="mt-6 mb-2 overflow-label fs-bold content-dark-color">
+        <Label label={chunter.string.Comments} />:
+      </div>
+      <CommentPopup objectId={issue._id} object={issue} />
+    {/if}
+    <div class="h-3 flex-no-shrink" />
   </Scroller>
-</div>
+  <div class="h-3 flex-no-shrink" />
+{/if}
 
 <style lang="scss">
-  .descr {
+  .description-container {
     overflow: hidden;
+    height: auto;
+    min-height: 0;
 
-    &.mask {
-      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0, black 5rem);
+    &.masked {
+      mask-image: linear-gradient(0deg, #0000 0, #000f 4rem);
+    }
+    .description-content {
+      width: 100%;
+      min-width: 0;
+      height: max-content;
+      min-height: 0;
     }
   }
-
-  .scrollerContent {
-    height: fit-content;
-    max-height: 32rem;
+  .grid-preview {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-auto-rows: minmax(2rem, max-content);
+    justify-content: start;
+    align-items: center;
+    row-gap: 0.25rem;
+    column-gap: 1rem;
+    margin-top: 0.5rem;
   }
 </style>

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

@@ -2,13 +2,14 @@
   import core, { Ref, Timestamp, Tx, TxCollectionCUD, TxCreateDoc, TxUpdateDoc, WithLookup } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { Issue, IssueStatus } from '@hcengineering/tracker'
-  import { Label, ticker } from '@hcengineering/ui'
+  import { Label, ticker, Row } from '@hcengineering/ui'
   import tracker from '../../plugin'
   import { statusStore } from '@hcengineering/presentation'
   import Duration from './Duration.svelte'
   import StatusPresenter from './StatusPresenter.svelte'
 
   export let issue: Issue
+  export let accentHeader: boolean = false
 
   const query = createQuery()
 
@@ -86,20 +87,12 @@
   $: updateStatus(txes, $statusStore.byId, $ticker)
 </script>
 
-<div class="flex-row mt-4 mb-4">
-  <span class="content-dark-color"><Label label={tracker.string.StatusHistory} />:</span>
-  <table class="ml-2">
-    {#each displaySt as st}
-      <tr>
-        <td class="flex-row-center mt-2 mb-2">
-          <StatusPresenter value={st.status} />
-        </td>
-        <td>
-          <div class="ml-8 mr-2">
-            <Duration value={st.duration} />
-          </div>
-        </td>
-      </tr>
-    {/each}
-  </table>
-</div>
+<Row>
+  <span class="label" class:fs-bold={accentHeader} class:content-dark-color={accentHeader}>
+    <Label label={tracker.string.StatusHistory} />:
+  </span>
+</Row>
+{#each displaySt as st}
+  <StatusPresenter value={st.status} />
+  <Duration value={st.duration} />
+{/each}

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

@@ -114,12 +114,12 @@
 </IssuesHeader>
 <FilterBar _class={tracker.class.Issue} query={searchQuery} {viewOptions} on:change={(e) => (resultQuery = e.detail)} />
 <slot name="afterHeader" />
-<div class="flex w-full h-full clear-mins">
+<div class="popupPanel rowContent">
   {#if viewlet}
     <IssuesContent {viewlet} query={resultQuery} {space} {viewOptions} />
   {/if}
   {#if $$slots.aside !== undefined && asideShown}
-    <div class="popupPanel-body__aside flex" class:float={asideFloat} class:shown={asideShown}>
+    <div class="popupPanel-body__aside" class:shown={asideShown}>
       <slot name="aside" />
     </div>
   {/if}

plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte

@@ -289,28 +289,14 @@
 
     <svelte:fragment slot="custom-attributes">
       {#if issue && currentProject}
+        <div class="space-divider" />
         <ControlPanel {issue} {showAllMixins} />
       {/if}
 
-      <div class="divider" />
-      <div class="issue-stats">
+      <div class="popupPanel-body__aside-grid">
+        <div class="divider" />
         <IssueStatusActivity {issue} />
       </div>
     </svelte:fragment>
   </Panel>
 {/if}
-
-<style lang="scss">
-  .divider {
-    flex-shrink: 0;
-    margin: 0.5rem 0;
-    height: 1px;
-    background-color: var(--theme-divider-color);
-  }
-  .issue-stats {
-    flex-shrink: 0;
-    margin: 0 2rem;
-    min-width: 0;
-    min-height: 0;
-  }
-</style>