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

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

packages/panel/src/components/Panel.svelte

@@ -165,9 +165,11 @@
     {#if $$slots.actions}
       <div class="popupPanel-body__aside-header">
         {#if $$slots['actions-label']}
-          <span class="fs-bold w-27 mr-6"><slot name="actions-label" /></span>
+          <span class="fs-bold w-27 mr-4"><slot name="actions-label" /></span>
+        {:else if $$slots.actions}
+          <span class="fs-bold w-27 mr-4" />
         {/if}
-        <div class="buttons-group xsmall-gap flex flex-grow">
+        <div class="buttons-group xsmall-gap">
           <slot name="actions" />
         </div>
       </div>
@@ -177,7 +179,7 @@
         <slot name="custom-attributes" direction="column" />
       {:else if $$slots.attributes}<slot name="attributes" direction="column" />{/if}
       {#if $$slots.aside}<slot name="aside" />{/if}
-      <div class="h-2 min-h-2 max-h-2" />
+      <div class="space-divider bottom" />
     </Scroller>
   </svelte:fragment>
 

packages/presentation/src/components/AttributesBar.svelte

@@ -32,7 +32,7 @@
   export let justify: 'left' | 'center' = 'left'
 </script>
 
-<div class="popupPanel-body__aside-grid">
+<div class="popupPanel-body__aside-grid inCollapsed">
   {#each keys as key (typeof key === 'string' ? key : key.key)}
     <AttributeBarEditor {key} {_class} {object} {showHeader} {readonly} {draft} on:update />
   {/each}

packages/presentation/src/components/icons/Forward.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
   const fill: string = 'currentColor'
 </script>
 

packages/presentation/src/index.ts

@@ -38,6 +38,7 @@ export { default as IndexedDocumentPreview } from './components/IndexedDocumentP
 export { default as IndexedDocumentCompare } from './components/IndexedDocumentCompare.svelte'
 export { default as DraggableList } from './components/DraggableList.svelte'
 export { default as NavLink } from './components/NavLink.svelte'
+export { default as IconForward } from './components/icons/Forward.svelte'
 export { default } from './plugin'
 export * from './types'
 export * from './utils'

packages/theme/styles/_layouts.scss

@@ -496,7 +496,9 @@ input.search {
 .pl-2 { padding-left: .5rem; }
 .pl-3 { padding-left: .75rem; }
 .pl-4 { padding-left: 1rem; }
+.pl-7 { padding-left: 1.75rem; }
 .pl-8 { padding-left: 2rem; }
+.pl-9 { padding-left: 2.25rem; }
 .pl-10 { padding-left: 2.5rem; }
 .pr-1 { padding-right: .25rem; }
 .pr-2 { padding-right: .5rem; }
@@ -602,6 +604,7 @@ input.search {
 .h-7 { height: 1.75rem; }
 .h-8 { height: 2rem; }
 .h-9 { height: 2.25rem; }
+.h-12 { height: 3rem; }
 .h-14 { height: 3.5rem; }
 .h-16 { height: 4rem; }
 .h-18 { height: 4.5rem; }

packages/theme/styles/dialogs.scss

@@ -31,7 +31,7 @@
   min-height: 0;
   background: var(--theme-popup-color);
   border-radius: .5rem;
-  box-shadow: var(--card-shadow);
+  box-shadow: var(--theme-popup-shadow);
 
   .antiCard-header {
     position: relative;

packages/theme/styles/panel.scss

@@ -18,18 +18,38 @@
   overflow: hidden;
   min-width: 400px;
 
-  background: var(--body-accent);
+  background-color: var(--theme-popup-color);
-  border: 1px solid var(--divider-color);
+  border: 1px solid var(--theme-popup-divider);
   border-radius: .5rem;
   flex-direction: row;
-  box-shadow: var(--popup-shadow);
+  box-shadow: var(--theme-popup-shadow);
   // left: 1rem;
 
+  &.float {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    top: 5rem;
+    right: .5rem;
+    width: 42rem;
+    height: fit-content;
+    min-height: 0;
+    max-height: 32rem;
+    z-index: 500;
+
+    .ap-header {
+      flex-shrink: 0;
+      padding: 1.5rem 1.75rem .5rem;
+      width: 100%;
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+
   .ac-header {
     &.highlight { background-color: var(--accent-bg-color); }
     &.divide { border-bottom: 1px solid var(--divider-color); }
   }
-
   .ad-section-50 {
     display: flex;
     flex-direction: column;
@@ -39,7 +59,6 @@
 
     &.divide { border-right: 1px solid var(--divider-color); }
   }
-
   .ad-tools {
     position: absolute;
     display: flex;
@@ -58,18 +77,16 @@
 .popupPanel {
   overflow: hidden;
   display: flex;
-  flex-direction: column;
   min-height: 0;
   height: 100%;
-
+  
-  &.embedded {
+  &.rowContent {
     width: 100%;
+    min-width: 0;
   }
-
+  &:not(.rowContent) { flex-direction: column; }
-  &:not(.embedded) {
+  &.embedded { width: 100%; }
-    border-radius: .5rem;
+  &:not(.embedded) { border-radius: .5rem; }
-    // box-shadow: var(--popup-panel-shadow);
-  }
 
   .popupPanel-title {
     display: flex;
@@ -258,27 +275,29 @@
         display: flex;
         align-items: center;
         flex-shrink: 0;
-        padding: .75rem 2rem;
         height: 3.5rem;
         min-height: 3.5rem;
         border-bottom: 1px solid var(--theme-divider-color);
       }
-      &-tabsheader {
+      &-tabsheader { padding: 0 2rem; }
-        padding: 0 2rem;
+      &-header {
+        justify-content: space-between;
+        padding: .75rem .75rem .75rem 2rem;
       }
 
       &-grid {
         display: grid;
         grid-template-columns: 1fr 1.5fr;
-        grid-auto-flow: row;
+        grid-auto-rows: minmax(2rem, max-content);
         justify-content: start;
         align-items: center;
         row-gap: .25rem;
         column-gap: 1rem;
-        margin: .5rem 2rem;
+        margin: .25rem 2rem 0;
         width: calc(100% - 4rem);
         height: min-content;
 
+        &.inCollapsed { margin: 1rem 2rem; }
         .divider {
           grid-column: 1 / 3;
           margin: .75rem -2rem;
@@ -289,9 +308,24 @@
         .labelTop { color: var(--theme-dark-color); }
         .labelTop {
           align-self: start;
-          margin-top: 0.385rem;
+          margin-top: 0.625rem;
-        }      
+        }
-      }    
+        .textPadding { margin-left: .875rem; }
+      }
+      &-content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        min-width: 0;
+        min-height: 0;
+        padding: 1.25rem 2rem;
+      }
+      .space-divider {
+        flex-shrink: 0;
+        height: .75rem;
+
+        &.bottom { height: 1.25rem; }
+      }
     }
 
     // &.asideShown .popupPanel-body__main {

packages/ui/src/components/Panel.svelte

@@ -79,7 +79,7 @@
 </script>
 
 <div
-  class="popupPanel"
+  class="popupPanel panel"
   class:embedded
   use:resizeObserver={(element) => {
     panelWidth = element.clientWidth

packages/ui/src/components/Scroller.svelte

@@ -32,6 +32,7 @@
   export let invertScroll: boolean = false
   export let horizontal: boolean = false
   export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical'
+  export let gap: 'gap-1' | 'gap-1-5' | 'gap-2' | 'gap-3' | 'gap-around-2' | 'gap-around-4' | undefined = undefined
   export let noStretch: boolean = autoscroll
   export let buttons: 'normal' | 'union' | false = false
   export let shrink: boolean = false
@@ -497,7 +498,7 @@
     >
       <div
         bind:this={divBox}
-        class="box"
+        class="box{gap ? ` ${gap}` : ''}"
         class:align-center={contentDirection === 'horizontal'}
         style:padding
         style:flex-direction={contentDirection === 'vertical'
@@ -689,9 +690,9 @@
     &.vertical {
       min-width: 1.5rem 0;
     }
-    &.horizontal {
+    // &.horizontal {
-      margin-right: 2rem;
+    //   margin-right: 2rem;
-    }
+    // }
     &.buttons.vertical {
       margin: 1.5rem 0;
     }

packages/ui/src/components/calendar/DatePresenter.svelte

@@ -232,18 +232,18 @@
     &.link {
       justify-content: flex-start;
       padding: 0 0.875rem;
-      height: 2rem;
+      color: var(--theme-dark-color);
       border-radius: 0.25rem;
 
       .btn-icon {
-        margin-right: 0.5rem;
+        color: var(--theme-darker-color);
       }
       &:hover {
-        color: var(--theme-caption-color);
+        color: var(--theme-content-color);
-        background-color: var(--theme-button-hovered);
+        background-color: var(--theme-bg-color);
         border-color: var(--theme-divider-color);
         .btn-icon {
-          color: var(--theme-caption-color);
+          color: var(--theme-content-color);
         }
       }
     }

plugins/attachment-resources/src/components/AttachmentList.svelte

@@ -15,6 +15,7 @@
 <script lang="ts">
   import { Attachment } from '@hcengineering/attachment'
   import { Ref } from '@hcengineering/core'
+  import { Scroller } from '@hcengineering/ui'
   import AttachmentPreview from './AttachmentPreview.svelte'
 
   export let attachments: Attachment[] = []
@@ -22,11 +23,9 @@
 </script>
 
 {#if attachments.length}
-  <div class="flex flex-wrap">
+  <Scroller contentDirection={'horizontal'} horizontal gap={'gap-3'}>
     {#each attachments as attachment}
-      <div class="p-2">
+      <AttachmentPreview value={attachment} isSaved={savedAttachmentsIds?.includes(attachment._id) ?? false} />
-        <AttachmentPreview value={attachment} isSaved={savedAttachmentsIds?.includes(attachment._id) ?? false} />
-      </div>
     {/each}
-  </div>
+  </Scroller>
 {/if}

plugins/hr-resources/src/components/schedule/MonthView.svelte

@@ -379,7 +379,8 @@
     }
 
     tbody tr:not(:last-child),
-    thead th:first-child .fullfill {
+    thead th:first-child .fullfill,
+    tfoot tr {
       border-bottom: 1px solid var(--theme-bg-divider-color);
     }
     tfoot tr,

plugins/recruit-resources/src/components/EditVacancy.svelte

@@ -120,21 +120,19 @@
         </div>
       {/if}
     </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+      <Button
+        icon={IconMixin}
+        kind={'transparent'}
+        shape={'round'}
+        selected={showAllMixins}
+        on:click={() => {
+          showAllMixins = !showAllMixins
+        }}
+      />
+    </svelte:fragment>
     <svelte:fragment slot="attributes" let:direction={dir}>
-      <div class="flex flex-reverse flex-no-shrink clear-mins">
-        <Button
-          kind={'transparent'}
-          shape={'round'}
-          selected={showAllMixins}
-          on:click={() => {
-            showAllMixins = !showAllMixins
-          }}
-        >
-          <svelte:fragment slot="content">
-            <IconMixin size={'small'} />
-          </svelte:fragment>
-        </Button>
-      </div>
       {#if dir === 'column'}
         <DocAttributeBar
           {object}

plugins/task-resources/src/components/DueDateEditor.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
   import { getClient } from '@hcengineering/presentation'
-  import { DueDatePresenter } from '@hcengineering/ui'
+  import { DueDatePresenter, ButtonSize, ButtonKind } from '@hcengineering/ui'
   import { WithLookup } from '@hcengineering/core'
   import { Task } from '@hcengineering/task'
 
   export let object: WithLookup<Task>
+  export let width: string | undefined = undefined
+  export let size: ButtonSize = 'medium'
+  export let kind: ButtonKind = 'link'
+  export let editable: boolean = true
 
   const client = getClient()
   $: shouldIgnoreOverdue = object.doneState != null
@@ -28,9 +32,11 @@
 
 {#if object}
   <DueDatePresenter
-    kind={'link'}
+    {kind}
+    {width}
+    {size}
     value={object.dueDate}
-    editable
+    {editable}
     onChange={(e) => handleDueDateChanged(e)}
     {shouldIgnoreOverdue}
   />

plugins/tracker-resources/src/components/components/ComponentBrowser.svelte

@@ -114,7 +114,7 @@
 <div class="ac-header full divide caption-height">
   <div class="ac-header__wrap-title mr-3">
     <span class="ac-header__title"><Label {label} /></span>
-    <span class="componentTitle">
+    <span class="componentTitle ml-1">
       › <Label label={title} />
     </span>
   </div>
@@ -146,15 +146,8 @@
     {/if}
   </div>
 </div>
-<div class="ac-header full divide search-start">
+<div class="ac-header tabs-start full divide">
-  <div class="ac-header-full small-gap">
+  <TabList items={filterModeList} selected={filterMode} kind={'plain'} on:select={({ detail }) => detail?.action?.()} />
-    <TabList
-      items={filterModeList}
-      selected={filterMode}
-      kind="normal"
-      on:select={({ detail }) => detail?.action?.()}
-    />
-  </div>
 </div>
 
 <FilterBar

plugins/tracker-resources/src/components/components/EditComponent.svelte

@@ -48,10 +48,8 @@
     </Button>
   </svelte:fragment>
   <svelte:fragment slot="aside">
-    <div class="flex-row p-4 w-60 left-divider">
+    <div class="popupPanel-body__aside-content">
-      <div class="fs-title text-xl">
+      <EditBox kind={'large-style'} bind:value={component.label} on:change={() => change('label', component.label)} />
-        <EditBox bind:value={component.label} on:change={() => change('label', component.label)} />
-      </div>
       <div class="mt-2">
         <StyledTextBox
           alwaysEdit={true}
@@ -61,7 +59,7 @@
           on:value={(evt) => change('description', evt.detail)}
         />
       </div>
-      <DocAttributeBar object={component} mixins={[]} ignoreKeys={['icon', 'label', 'description']} />
     </div>
+    <DocAttributeBar object={component} mixins={[]} ignoreKeys={['icon', 'label', 'description']} />
   </svelte:fragment>
 </IssuesView>

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 = 0
-  let cHeight: number
 
   let parent: Issue | undefined
 
@@ -66,73 +65,87 @@
   $: getParent(issue?.attachedTo as Ref<Issue>)
 </script>
 
-<div class="flex">
+{#if issue}
-  <Scroller>
+  <div class="ap-header flex-between">
-    <div class="w-165 scrollerContent">
+    <div class="flex-col">
-      {#if parent}
+      <div class="flex-row-center gap-1">
-        <div class="mb-4 ml-2">{parent.title}</div>
+        {#if parent}
-      {/if}
+          <span class="overflow-label content-color">{parent.title}</span>
-      {#if issue}
+          <IconForward size={'x-small'} />
-        <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}
+        <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 {
+    &.masked {
-      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0, black 5rem);
+      mask-image: linear-gradient(0deg, #0000 0, #000f 4rem);
+    }
+    .description-content {
+      width: 100%;
+      min-width: 0;
+      height: max-content;
+      min-height: 0;
     }
   }
-
+  .grid-preview {
-  .scrollerContent {
+    display: grid;
-    height: fit-content;
+    grid-template-columns: 1fr 2fr;
-    max-height: 32rem;
+    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">
+<Row>
-  <span class="content-dark-color"><Label label={tracker.string.StatusHistory} />:</span>
+  <span class="label" class:fs-bold={accentHeader} class:content-dark-color={accentHeader}>
-  <table class="ml-2">
+    <Label label={tracker.string.StatusHistory} />:
-    {#each displaySt as st}
+  </span>
-      <tr>
+</Row>
-        <td class="flex-row-center mt-2 mb-2">
+{#each displaySt as st}
-          <StatusPresenter value={st.status} />
+  <StatusPresenter value={st.status} />
-        </td>
+  <Duration value={st.duration} />
-        <td>
+{/each}
-          <div class="ml-8 mr-2">
-            <Duration value={st.duration} />
-          </div>
-        </td>
-      </tr>
-    {/each}
-  </table>
-</div>

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="popupPanel-body__aside-grid">
-      <div class="issue-stats">
+        <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>

plugins/tracker-resources/src/components/milestones/EditMilestone.svelte

@@ -61,10 +61,8 @@
     </div>
   </svelte:fragment>
   <svelte:fragment slot="afterHeader">
-    <div class="p-1 ml-6 flex-row-center">
+    <div class="ac-header search-start full divide">
-      <div class="flex-row-center">
+      <DatePresenter value={milestone.targetDate} kind={'transparent'} size={'medium'} />
-        <DatePresenter value={milestone.targetDate} kind={'transparent'} />
-      </div>
       <div class="flex-row-center ml-2">
         {#if milestone?.capacity}
           <Label label={tracker.string.CapacityValue} params={{ value: milestone?.capacity }} />
@@ -74,10 +72,8 @@
     </div>
   </svelte:fragment>
   <svelte:fragment slot="aside">
-    <div class="flex-grow p-4 w-60 left-divider">
+    <div class="popupPanel-body__aside-content">
-      <div class="fs-title text-xl">
+      <EditBox kind={'large-style'} bind:value={milestone.label} on:change={() => change('label', milestone.label)} />
-        <EditBox bind:value={milestone.label} on:change={() => change('label', milestone.label)} />
-      </div>
       <div class="mt-2">
         <StyledTextBox
           alwaysEdit={true}
@@ -87,7 +83,7 @@
           on:value={(evt) => change('description', evt.detail)}
         />
       </div>
-      <DocAttributeBar object={milestone} mixins={[]} ignoreKeys={['icon', 'label', 'description']} />
     </div>
+    <DocAttributeBar object={milestone} mixins={[]} ignoreKeys={['icon', 'label', 'description']} />
   </svelte:fragment>
 </IssuesView>

plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte

@@ -147,17 +147,15 @@
     {/if}
   </div>
 </div>
-<div class="ac-header full divide search-start">
+<div class="ac-header tabs-start full divide">
-  <div class="ac-header-full small-gap">
+  <TabList
-    <TabList
+    items={modeList}
-      items={modeList}
+    selected={mode}
-      selected={mode}
+    kind={'plain'}
-      kind={'normal'}
+    on:select={(result) => {
-      on:select={(result) => {
+      if (result.detail !== undefined && result.detail.action) result.detail.action()
-        if (result.detail !== undefined && result.detail.action) result.detail.action()
+    }}
-      }}
+  />
-    />
-  </div>
 </div>
 
 <FilterBar

plugins/view-resources/src/components/ActionHandler.svelte

@@ -226,9 +226,7 @@
 <svelte:window on:keydown={handleKeys} />
 
 {#if $previewDocument !== undefined && presenter}
-  <div transition:fly|local style:position="fixed" style:right={'0'} style:top={'10rem'} style:z-index={'500'}>
+  <div class="antiPanel float" transition:fly|local>
-    <div class="antiPanel p-6">
+    <Component is={presenter} props={{ object: $previewDocument }} />
-      <Component is={presenter} props={{ object: $previewDocument }} />
-    </div>
   </div>
 {/if}

plugins/view-resources/src/components/ClassAttributeBar.svelte

@@ -104,7 +104,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 0.75rem;
+    padding: 0 0.125rem 0 0.75rem;
     font-weight: 600;
     color: var(--theme-dark-color);
     border-top: 1px solid var(--theme-divider-color);

plugins/view-resources/src/components/EditDoc.svelte

@@ -300,21 +300,16 @@
       </div>
     </svelte:fragment>
 
-    <svelte:fragment slot="aside-tabs">
+    <svelte:fragment slot="actions">
-      <div class="flex-row-center flex-reverse flex-grow">
+      <Button
-        <Button
+        icon={IconMixin}
-          kind={'transparent'}
+        kind={'transparent'}
-          shape={'round'}
+        shape={'round'}
-          selected={showAllMixins}
+        selected={showAllMixins}
-          on:click={() => {
+        on:click={() => {
-            showAllMixins = !showAllMixins
+          showAllMixins = !showAllMixins
-          }}
+        }}
-        >
+      />
-          <svelte:fragment slot="icon">
-            <IconMixin size={'small'} />
-          </svelte:fragment>
-        </Button>
-      </div>
     </svelte:fragment>
     <svelte:fragment slot="attributes" let:direction={dir}>
       {#if !headerLoading}

tests/sanity/tests/tracker.spec.ts

@@ -38,7 +38,7 @@ test('create-issue-and-sub-issue', async ({ page }) => {
   await checkIssue(page, props)
   props.name = `sub${props.name}`
   await createSubissue(page, props)
-  await page.click(`span[title=${props.name}]`)
+  await page.click(`.antiList__row:has-text("${props.name}") .name a`)
   await checkIssue(page, props)
 })
 

tests/sanity/tests/tracker.utils.ts

@@ -138,10 +138,10 @@ export async function checkIssue (page: Page, props: IssueProps): Promise<void>
   const { name, description, status, assignee, labels, priority, component, milestone } = props
 
   if (name !== undefined) {
-    await expect(page.locator('.popupPanel')).toContainText(name)
+    await expect(page.locator('.popupPanel.panel')).toContainText(name)
   }
   if (description !== undefined) {
-    await expect(page.locator('.popupPanel')).toContainText(description)
+    await expect(page.locator('.popupPanel.panel')).toContainText(description)
   }
   const asideLocator = page.locator('.popupPanel-body__aside')
   if (status !== undefined) {
@@ -170,7 +170,7 @@ export async function checkIssueFromList (page: Page, issueName: string): Promis
 }
 
 export async function openIssue (page: Page, name: string): Promise<void> {
-  await page.click(`.antiList__row:has-text("${name}") .issuePresenterRoot`, {
+  await page.click(`.antiList__row:has-text("${name}") .name a`, {
     timeout: 15000
   })
 }