Update IssuesList layout (#2317)

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

models/tracker/src/index.ts

@@ -472,15 +472,37 @@ export function createModel (builder: Builder): void {
       {
         key: '',
         presenter: tracker.component.ProjectEditor,
-        props: { kind: 'list', size: 'small', shape: 'round', shouldShowPlaceholder: false }
+        props: {
+          kind: 'list',
+          size: 'small',
+          shape: 'round',
+          shouldShowPlaceholder: false,
+          excludeByKey: 'project',
+          optional: true
+        }
       },
       {
         key: '',
         presenter: tracker.component.SprintEditor,
-        props: { kind: 'list', size: 'small', shape: 'round', shouldShowPlaceholder: false }
+        props: {
+          kind: 'list',
+          size: 'small',
+          shape: 'round',
+          shouldShowPlaceholder: false,
+          excludeByKey: 'sprint',
+          optional: true
+        }
+      },
+      {
+        key: '',
+        presenter: tracker.component.EstimationEditor,
+        props: { kind: 'list', size: 'small', optional: true }
+      },
+      {
+        key: 'modifiedOn',
+        presenter: tracker.component.ModificationDatePresenter,
+        props: { fixed: 'right', optional: true }
       },
-      { key: '', presenter: tracker.component.EstimationEditor, props: { kind: 'list', size: 'small' } },
-      { key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter, props: { fixed: 'right' } },
       {
         key: '$lookup.assignee',
         presenter: tracker.component.AssigneePresenter,

packages/theme/styles/_colors.scss

@@ -84,6 +84,7 @@
   --divider-color: #303236;
   --menu-bg-select: #2d2f36;
   --menu-icon-hover: #f3f3f8;
+  --header-bg-color: linear-gradient(0deg, var(--accent-bg-color), #2d2e31);
   --popup-bg-color: linear-gradient(136.61deg, var(--accent-bg-color) 13.72%, #2d2e31 74.3%);
   --popup-bg-hover: #37373c;
   --popup-divider: #313236;
@@ -236,8 +237,9 @@
   --divider-color: #e0e0e0;
   --menu-bg-select: #f0f3f9;
   --menu-icon-hover: #282a30;
-  --popup-bg-color: linear-gradient(136.61deg, rgb(255, 255, 255) 13.72%, rgb(255, 255, 255) 74.3%);
+  --header-bg-color: linear-gradient(0deg, #eee, #f6f6f6);
-  --popup-bg-hover: #f8f9fb;
+  --popup-bg-color: linear-gradient(136.61deg, #fff 13.72%, #fefefe 74.3%);
+  --popup-bg-hover: #f0f3f9;
   --popup-divider: #eff1f4;
   --popup-shadow: rgb(0 0 0 / 20%) 0px 4px 24px;  // Dark
   --popup-panel-shadow: rgb(0 0 0 / 10%) 0px 4px 18px;

packages/theme/styles/_layouts.scss

@@ -358,6 +358,7 @@ input.search {
 .step-lr75 + .step-lr75 { margin-left: .75rem; }
 .step-tb75 + .step-tb75 { margin-top: .75rem; }
 
+.ml-0-5 { margin-left: .125rem; }
 .ml-1 { margin-left: .25rem; }
 .ml-1-5 { margin-left: .375rem; }
 .ml-2 { margin-left: .5rem; }
@@ -502,7 +503,9 @@ input.search {
 .w-85 { width: 21.25rem; }
 .w-165 { width: 41.25rem; }
 .min-w-0 { min-width: 0; }
+.min-w-2 { min-width: .5rem; }
 .min-w-4 { min-width: 1rem; }
+.min-w-8 { min-width: 2rem; }
 .min-w-9 { min-width: 2.25rem; }
 .min-w-80 { min-width: 20rem; }
 .min-w-min { min-width: min-content; }

packages/ui/src/components/Button.svelte

@@ -127,7 +127,7 @@
     <Spinner />
   {/if}
   {#if label}
-    <span class="overflow-label disabled" class:ml-2={loading}>
+    <span class="overflow-label disabled pointer-events-none" class:ml-2={loading}>
       <Label {label} params={labelParams} />
     </span>
   {:else if $$slots.content}

packages/ui/src/components/Panel.svelte

@@ -35,7 +35,7 @@
   let asideShown: boolean = false
   let fullSize: boolean = false
   let twoRows: boolean = false
-  $: twoRows = $deviceInfo.docWidth <= 480
+  $: twoRows = $deviceInfo.minWidth
 
   const checkPanel = (): void => {
     if (panelWidth <= 900 && !asideFloat) asideFloat = true

packages/ui/src/components/Status.svelte

@@ -12,7 +12,9 @@
 <div class="flex-center container {status.severity}" class:overflow-label={overflow}>
   {#if status.severity !== Severity.OK}
     <Info size={'small'} />
-    <div class="text-sm ml-2" class:overflow-label={overflow}><Label label={status.code} params={status.params} /></div>
+    <span class="text-sm ml-2" class:overflow-label={overflow}
+      ><Label label={status.code} params={status.params} /></span
+    >
   {/if}
 </div>
 

packages/ui/src/components/internal/Root.svelte

@@ -70,6 +70,8 @@
   $: $deviceInfo.docHeight = docHeight
   $: $deviceInfo.isPortrait = isPortrait
   $: $deviceInfo.isMobile = isMobile
+  $: $deviceInfo.minWidth = docWidth <= 480
+  $: $deviceInfo.twoRows = docWidth <= 680
 
   $: document.documentElement.style.setProperty('--app-height', `${docHeight}px`)
 

packages/ui/src/index.ts

@@ -180,7 +180,9 @@ export const deviceOptionsStore = writable<DeviceOptions>({
   docWidth: 0,
   docHeight: 0,
   isPortrait: false,
-  isMobile: false
+  isMobile: false,
+  minWidth: false,
+  twoRows: false
 })
 
 export default uis

packages/ui/src/types.ts

@@ -231,5 +231,7 @@ export interface DeviceOptions {
   docHeight: number
   isPortrait: boolean
   isMobile: boolean
+  minWidth: boolean
+  twoRows: boolean
   theme?: any
 }

plugins/calendar-resources/src/components/Events.svelte

@@ -100,8 +100,7 @@
     }
   })
 
-  let twoRows: boolean
+  $: twoRows = $deviceInfo.twoRows
-  $: twoRows = $deviceInfo.docWidth <= 680
 </script>
 
 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>

plugins/contact-resources/src/components/Contacts.svelte

@@ -63,8 +63,7 @@
     showPopup(CreateContact, { space: contact.space.Contacts, targetElement: ev.target }, ev.target as HTMLElement)
   }
 
-  let twoRows: boolean
+  $: twoRows = $deviceInfo.twoRows
-  $: twoRows = $deviceInfo.docWidth <= 680
 </script>
 
 <ActionContext

plugins/hr-resources/src/components/Structure.svelte

@@ -65,8 +65,7 @@
     allEmployees = res
   })
 
-  let twoRows: boolean
+  $: twoRows = $deviceInfo.twoRows
-  $: twoRows = $deviceInfo.docWidth <= 680
 </script>
 
 <div class="ac-header withSettings divide" class:full={!twoRows} class:mini={twoRows}>

plugins/inventory-resources/src/components/Categories.svelte

@@ -33,8 +33,7 @@
     showPopup(CreateCategory, { space: inventory.space.Category }, eventToHTMLElement(ev))
   }
 
-  let twoRows: boolean
+  $: twoRows = $deviceInfo.twoRows
-  $: twoRows = $deviceInfo.docWidth <= 680
 </script>
 
 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>

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

@@ -131,8 +131,7 @@
     return result
   }
 
-  let twoRows: boolean
+  $: twoRows = $deviceInfo.twoRows
-  $: twoRows = $deviceInfo.docWidth <= 680
 </script>
 
 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>

plugins/tags-resources/src/components/TagsView.svelte

@@ -86,8 +86,7 @@
     (tagElements?.get(b._id as Ref<TagElement>)?.count ?? 0) -
       (tagElements?.get(a._id as Ref<TagElement>)?.count ?? 0) ?? 0
 
-  let twoRows: boolean
+  $: twoRows = $deviceInfo.twoRows
-  $: twoRows = $deviceInfo.docWidth <= 680
 </script>
 
 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>

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

@@ -116,7 +116,11 @@
     {loading}
     on:click={handleProjectEditorOpened}
     ><svelte:fragment slot="content">
-      <span class="{enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label content-accent-color">
+      <span
+        class="{enlargedText
+          ? 'ml-1 text-base fs-bold'
+          : 'text-md'} overflow-label content-accent-color pointer-events-none"
+      >
         <Label label={getEmbeddedLabel(projectText)} />
       </span>
     </svelte:fragment></Button

plugins/tracker-resources/src/components/icons/Circles.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'var(--caption-color)'
 </script>
 
 <svg {fill} viewBox="0 0 6 16" xmlns="http://www.w3.org/2000/svg">

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

@@ -20,8 +20,7 @@
     }
   })
 
-  let twoRows: boolean
+  $: twoRows = $deviceInfo.twoRows
-  $: twoRows = $deviceInfo.docWidth <= 680
 </script>
 
 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>

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

@@ -30,7 +30,8 @@
     IconMoreH,
     showPopup,
     Spinner,
-    tooltip
+    tooltip,
+    deviceOptionsStore as deviceInfo
   } from '@hcengineering/ui'
   import { AttributeModel, BuildModelKey } from '@hcengineering/view'
   import { buildModel, FixedColumn, getObjectPresenter, LoadingProps, Menu } from '@hcengineering/view-resources'
@@ -38,6 +39,7 @@
   import tracker from '../../plugin'
   import { IssuesGroupByKeys, issuesGroupEditorMap, IssuesOrderByKeys, issuesSortOrderMap } from '../../utils'
   import CreateIssue from '../CreateIssue.svelte'
+  import Circles from '../icons/Circles.svelte'
 
   export let _class: Ref<Class<Doc>>
   export let currentSpace: Ref<Team> | undefined = undefined
@@ -237,7 +239,7 @@
                 value: groupByKey ? { [groupByKey]: category } : {},
                 statuses: groupByKey === 'status' ? statuses : undefined,
                 issues: groupedIssues[category],
-                size: 'medium',
+                width: 'min-content',
                 kind: 'list-header',
                 enlargedText: true,
                 currentSpace
@@ -245,7 +247,11 @@
             />
           {/if}
           {#if limited.length < items.length}
-            <span class="text-base content-dark-color ml-4"> {limited.length} / {items.length}</span>
+            <div class="counter">
+              {limited.length}
+              <div class="text-xs mx-1">/</div>
+              {items.length}
+            </div>
             <ActionIcon
               size={'small'}
               icon={IconMoreH}
@@ -255,12 +261,15 @@
               }}
             />
           {:else}
-            <span class="text-base content-dark-color ml-4">{items.length}</span>
+            <span class="counter">{items.length}</span>
           {/if}
         </div>
-        <div class="clear-mins" use:tooltip={{ label: tracker.string.AddIssueTooltip }}>
+        <Button
-          <Button icon={IconAdd} kind={'transparent'} on:click={(event) => handleNewIssueAdded(event, category)} />
+          icon={IconAdd}
-        </div>
+          kind={'transparent'}
+          showTooltip={{ label: tracker.string.AddIssueTooltip }}
+          on:click={(event) => handleNewIssueAdded(event, category)}
+        />
       </div>
     {/if}
     <ExpandCollapse isExpanded={!isCollapsedMap[toCat(category)]} duration={400}>
@@ -340,6 +349,7 @@
                     {...attributeModel.props}
                   />
                 {:else if attributeModel.props?.fixed}
+                  {#if !(attributeModel.props?.optional && $deviceInfo.minWidth)}
                     <FixedColumn
                       width={propsWidth[attributeModel.key]}
                       key={attributeModel.key}
@@ -355,8 +365,9 @@
                         {currentTeam}
                       />
                     </FixedColumn>
-                {:else}
+                  {/if}
-                  <div class="gridElement">
+                {:else if attributeModel.props?.excludeByKey !== groupByKey}
+                  {#if !(attributeModel.props?.optional && $deviceInfo.minWidth)}
                     <svelte:component
                       this={attributeModel.presenter}
                       value={getObjectValue(attributeModel.key, docObject) ?? ''}
@@ -366,9 +377,36 @@
                       {statuses}
                       {currentTeam}
                     />
-                  </div>
+                  {/if}
                 {/if}
               {/each}
+              {#if $deviceInfo.minWidth}
+                <div class="panel-trigger" tabindex="-1">
+                  <Circles />
+                  <div class="space" />
+                  <Circles />
+                </div>
+                <div class="hidden-panel gap-2" tabindex="-1">
+                  <div class="header">
+                    <Circles />
+                    <div class="space" />
+                    <Circles />
+                  </div>
+                  {#each itemModels as attributeModel}
+                    {#if attributeModel.props?.optional && attributeModel.props?.excludeByKey !== groupByKey}
+                      <svelte:component
+                        this={attributeModel.presenter}
+                        value={getObjectValue(attributeModel.key, docObject) ?? ''}
+                        issueId={docObject._id}
+                        groupBy={groupByKey}
+                        {...attributeModel.props}
+                        {statuses}
+                        {currentTeam}
+                      />
+                    {/if}
+                  {/each}
+                </div>
+              {/if}
             </div>
           {/each}
         {:else if loadingProps !== undefined}
@@ -403,11 +441,11 @@
   .categoryHeader {
     position: sticky;
     top: 0;
-    padding: 0 1.5rem 0 2.25rem;
+    padding: 0 0.75rem 0 2.25rem;
     height: 3rem;
     min-height: 3rem;
     min-width: 0;
-    background-color: var(--accent-bg-color);
+    background: var(--header-bg-color);
     z-index: 5;
   }
 
@@ -415,10 +453,29 @@
     border-bottom: 1px solid var(--accent-bg-color);
   }
 
-  .listGrid {
+  .counter {
     display: flex;
     align-items: center;
-    padding: 0 1.5rem 0 0.875rem;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    margin-left: 1rem;
+    padding: 0.25rem 0.5rem;
+    min-width: 1.325rem;
+    text-align: center;
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1rem;
+    color: var(--accent-color);
+    background-color: var(--body-color);
+    border: 1px solid var(--divider-color);
+    border-radius: 1rem;
+  }
+
+  .listGrid {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 0.75rem 0 0.875rem;
     width: 100%;
     height: 2.75rem;
     min-height: 2.75rem;
@@ -437,6 +494,68 @@
     &.mListGridSelected {
       background-color: var(--highlight-hover);
     }
+
+    .hidden-panel,
+    .panel-trigger {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      top: 0;
+      bottom: 0;
+      height: 100%;
+    }
+    .hidden-panel {
+      overflow: hidden;
+      right: 0;
+      width: 80%;
+      background-color: var(--accent-bg-color);
+      opacity: 0;
+      pointer-events: none;
+      z-index: 2;
+      transition-property: opacity, width;
+      transition-duration: 0.15s;
+      transition-timing-function: var(--timing-main);
+
+      .header {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: 0 0.25rem;
+        width: 0.375rem;
+        min-width: 0.375rem;
+        height: 100%;
+        opacity: 0.25;
+      }
+    }
+    .panel-trigger {
+      flex-direction: column;
+      justify-content: center;
+      padding: 0 0.125rem;
+      right: 2.5rem;
+      width: 0.75rem;
+      border: 1px solid transparent;
+      border-radius: 0.25rem;
+      opacity: 0.1;
+      z-index: 1;
+      transition: opacity 0.15s var(--timing-main);
+
+      &:focus {
+        border-color: var(--primary-edit-border-color);
+        opacity: 0.25;
+      }
+      & > * {
+        pointer-events: none;
+      }
+    }
+    .hidden-panel:focus-within,
+    .panel-trigger:focus + .hidden-panel {
+      width: 100%;
+      opacity: 1;
+      pointer-events: all;
+    }
+    .space {
+      min-height: 0.1075rem;
+    }
   }
 
   .priorityPresenter,

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

@@ -27,20 +27,18 @@
 </script>
 
 {#if value}
-  <span class="root" class:with-margin={shouldUseMargin} title={value.title}>
+  <span class="titlePresenter-container" class:with-margin={shouldUseMargin} title={value.title}>
-    <span class="name cursor-pointer" on:click={handleIssueEditorOpened}>{value.title}</span>
+    <span class="name overflow-label cursor-pointer" on:click={handleIssueEditorOpened}>{value.title}</span>
     <ParentNamesPresenter {value} />
   </span>
 {/if}
 
 <style lang="scss">
-  .root {
+  .titlePresenter-container {
     display: flex;
     flex-grow: 0;
-    min-width: 7rem;
+    min-width: 1.5rem;
-    white-space: nowrap;
+    // flex-shrink: 10;
-    overflow: hidden;
-    flex-shrink: 10;
 
     .name {
       &:hover {

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

@@ -99,7 +99,7 @@
 </script>
 
 {#if hasSubIssues}
-  <div class="flex-center clear-mins" bind:this={btn}>
+  <div class="flex-center flex-no-shrink" bind:this={btn}>
     <Button
       {width}
       {kind}

plugins/tracker-resources/src/components/projects/ProjectEditor.svelte

@@ -49,7 +49,8 @@
 
 {#if (value.project && value.project !== $activeProject && groupBy !== 'project') || shouldShowPlaceholder}
   <div
-    class="clear-mins"
+    class="min-w-8"
+    class:minus-margin={kind === 'list-header'}
     use:tooltip={{ label: value.project ? tracker.string.MoveToProject : tracker.string.AddToProject }}
   >
     <ProjectSelector
@@ -68,3 +69,9 @@
     />
   </div>
 {/if}
+
+<style lang="scss">
+  .minus-margin {
+    margin-left: -0.5rem;
+  }
+</style>

plugins/tracker-resources/src/components/sprints/SprintEditor.svelte

@@ -17,7 +17,8 @@
   import { IntlString } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Issue, IssueStatus, IssueTemplate, Sprint } from '@hcengineering/tracker'
-  import { ButtonKind, ButtonShape, ButtonSize, Label, tooltip } from '@hcengineering/ui'
+  import type { ButtonKind, ButtonSize, ButtonShape } from '@hcengineering/ui'
+  import { Label, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import DatePresenter from '@hcengineering/ui/src/components/calendar/DatePresenter.svelte'
   import { activeSprint } from '../../issues'
   import tracker from '../../plugin'
@@ -30,15 +31,15 @@
   export let shouldShowLabel: boolean = true
   export let popupPlaceholder: IntlString = tracker.string.MoveToSprint
   export let shouldShowPlaceholder = true
-  export let kind: ButtonKind = 'link'
   export let size: ButtonSize = 'large'
+  export let kind: ButtonKind = 'link'
   export let shape: ButtonShape = undefined
   export let justify: 'left' | 'center' = 'left'
   export let width: string | undefined = '100%'
   export let onlyIcon: boolean = false
   export let issues: Issue[] | undefined = undefined
   export let groupBy: string | undefined = undefined
-  export let enlargedText = false
+  export let enlargedText: boolean = false
 
   const client = getClient()
 
@@ -119,13 +120,17 @@
       sprint = res.shift()
     })
   }
+
+  $: twoRows = $deviceInfo.twoRows
 </script>
 
-{#if (value.sprint && value.sprint !== $activeSprint && groupBy !== 'sprint') || shouldShowPlaceholder}
 <div
-    class="clear-mins"
+  class="flex flex-wrap min-w-8"
-    use:tooltip={{ label: value.sprint ? tracker.string.MoveToSprint : tracker.string.AddToSprint }}
+  class:minus-margin={kind === 'list-header'}
+  style:flex-direction={twoRows ? 'column' : 'row'}
 >
+  {#if (value.sprint && value.sprint !== $activeSprint && groupBy !== 'sprint') || shouldShowPlaceholder}
+    <div class="flex-row-center" class:minus-margin-vSpace={kind === 'list-header'} style:width>
       <SprintSelector
         {kind}
         {size}
@@ -137,19 +142,21 @@
         {popupPlaceholder}
         {onlyIcon}
         {enlargedText}
+        showTooltip={{ label: value.sprint ? tracker.string.MoveToSprint : tracker.string.AddToSprint }}
         value={value.sprint}
         onChange={handleSprintIdChanged}
       />
     </div>
   {/if}
 
+  {#if sprint || issues}
+    <div class="flex-row-center" class:minus-margin-space={kind === 'list-header'} class:text-sm={twoRows}>
       {#if sprint}
         {@const now = Date.now()}
-  <div class="flex-row-center">
         <DatePresenter value={sprint.startDate} kind={'transparent'} />
-    <span class="p-1"> / </span><DatePresenter value={sprint.targetDate} kind={'transparent'} />
+        <span class="p-1"> / </span>
-  </div>
+        <DatePresenter value={sprint.targetDate} kind={'transparent'} />
-  <div class="flex-row-center ml-2">
+        <div class="w-2 min-w-2" />
         <!-- Active sprint in time -->
         <Label
           label={tracker.string.SprintPassed}
@@ -163,14 +170,17 @@
             to: getDayOfSprint(sprint.startDate, sprint.targetDate)
           }}
         />
-  </div>
       {/if}
       {#if issues}
         <!-- <Label label={tracker.string.SprintDay} value={}/> -->
-  <div class="ml-4 flex-row-center" class:showWarning={totalEstimation > (sprint?.capacity ?? 0)}>
+        <div
-    <div class="mr-2">
+          class="flex-row-center flex-no-shrink h-6"
+          class:ml-2={sprint}
+          class:ml-0-5={!sprint}
+          class:showWarning={totalEstimation > (sprint?.capacity ?? 0)}
+        >
           <EstimationProgressCircle value={totalReported} max={totalEstimation} />
-    </div>
+          <div class="w-2 min-w-2" />
           {#if totalReported > 0}
             <Label label={tracker.string.TimeSpendValue} params={{ value: totalReported }} />
             /
@@ -181,9 +191,21 @@
           {/if}
         </div>
       {/if}
+    </div>
+  {/if}
+</div>
 
 <style lang="scss">
   .showWarning {
     color: var(--warning-color) !important;
   }
+  .minus-margin {
+    margin-left: -0.5rem;
+    &-vSpace {
+      margin: -0.25rem 0;
+    }
+    &-space {
+      margin: -0.25rem 0 -0.25rem 0.5rem;
+    }
+  }
 </style>

plugins/tracker-resources/src/components/sprints/SprintSelector.svelte

@@ -17,7 +17,7 @@
   import { getEmbeddedLabel, IntlString, translate } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { Project, Sprint } from '@hcengineering/tracker'
-  import type { ButtonKind, ButtonSize } from '@hcengineering/ui'
+  import type { ButtonKind, ButtonSize, LabelAndProps } from '@hcengineering/ui'
   import { Button, ButtonShape, eventToHTMLElement, SelectPopup, showPopup, Label } from '@hcengineering/ui'
   import tracker from '../../plugin'
   import { sprintStatusAssets } from '../../types'
@@ -36,6 +36,7 @@
   export let enlargedText = false
 
   export let useProject: Ref<Project> | undefined = undefined
+  export let showTooltip: LabelAndProps | undefined = undefined
 
   let selectedSprint: Sprint | undefined
   let defaultSprintLabel = ''
@@ -101,6 +102,7 @@
     {shape}
     {width}
     {justify}
+    {showTooltip}
     icon={sprintIcon}
     disabled={!isEditable}
     on:click={handleSprintEditorOpened}
@@ -112,13 +114,17 @@
     {shape}
     {width}
     {justify}
+    {showTooltip}
     icon={sprintIcon}
     disabled={!isEditable}
     on:click={handleSprintEditorOpened}
-    ><svelte:fragment slot="content">
+  >
-      <span class="{enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label content-accent-color">
+    <svelte:fragment slot="content">
+      <span
+        class="{enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label content-accent-color pointer-events-none"
+      >
         <Label label={getEmbeddedLabel(sprintText)} />
       </span>
-    </svelte:fragment></Button
+    </svelte:fragment>
-  >
+  </Button>
 {/if}

plugins/view/src/index.ts

@@ -359,6 +359,8 @@ export interface AttributeModel {
   // Extra properties for component
   props?: Record<string, any>
   sortingKey: string | string[]
+  optional?: boolean
+  excludeByKey?: string
   // Extra icon if applicable
   icon?: Asset
 

plugins/workbench-resources/src/components/SpaceHeader.svelte

@@ -82,8 +82,7 @@
     }
   })
 
-  let twoRows: boolean
+  $: twoRows = $deviceInfo.twoRows
-  $: twoRows = $deviceInfo.docWidth <= 768
 </script>
 
 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>

plugins/workbench-resources/src/components/SpecialView.svelte

@@ -75,8 +75,7 @@
     return search === '' ? baseQuery : { ...baseQuery, $search: search }
   }
 
-  let twoRows: boolean
+  $: twoRows = $deviceInfo.twoRows
-  $: twoRows = $deviceInfo.docWidth <= 680
 </script>
 
 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>

plugins/workbench-resources/src/components/Workbench.svelte

@@ -38,7 +38,8 @@
     showPopup,
     TooltipInstance,
     PopupPosAlignment,
-    checkMobile
+    checkMobile,
+    deviceOptionsStore as deviceInfo
   } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { ActionContext, ActionHandler } from '@hcengineering/view-resources'
@@ -53,7 +54,6 @@
   import NavHeader from './NavHeader.svelte'
   import Navigator from './Navigator.svelte'
   import SpaceView from './SpaceView.svelte'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   export let client: Client
   let contentPanel: HTMLElement