Update IssuesList layout (#2317)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2024-11-22 11:42:30 +03:00 · 2022-10-24 13:26:56 +03:00 · 2022-10-24 13:26:56 +03:00 · 5568eeba3c
commit 5568eeba3c
parent bcceb8b5b4
28 changed files with 321 additions and 137 deletions
--- a/models/tracker/src/index.ts
+++ b/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,
--- a/packages/theme/styles/_colors.scss
+++ b/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%);
-  --popup-bg-hover: #f8f9fb;
+  --header-bg-color: linear-gradient(0deg, #eee, #f6f6f6);
+  --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;
--- a/packages/theme/styles/_layouts.scss
+++ b/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; }
--- a/packages/ui/src/components/Button.svelte
+++ b/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}
--- a/packages/ui/src/components/Panel.svelte
+++ b/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
--- a/packages/ui/src/components/Status.svelte
+++ b/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>

--- a/packages/ui/src/components/internal/Root.svelte
+++ b/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`)

--- a/packages/ui/src/index.ts
+++ b/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
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@ -231,5 +231,7 @@ export interface DeviceOptions {
  docHeight: number
  isPortrait: boolean
  isMobile: boolean
+  minWidth: boolean
+  twoRows: boolean
  theme?: any
 }
--- a/plugins/calendar-resources/src/components/Events.svelte
+++ b/plugins/calendar-resources/src/components/Events.svelte
@ -100,8 +100,7 @@
    }
  })

-  let twoRows: boolean
-  $: twoRows = $deviceInfo.docWidth <= 680
+  $: twoRows = $deviceInfo.twoRows
 </script>

 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
--- a/plugins/contact-resources/src/components/Contacts.svelte
+++ b/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.docWidth <= 680
+  $: twoRows = $deviceInfo.twoRows
 </script>

 <ActionContext
--- a/plugins/hr-resources/src/components/Structure.svelte
+++ b/plugins/hr-resources/src/components/Structure.svelte
@ -65,8 +65,7 @@
    allEmployees = res
  })

-  let twoRows: boolean
-  $: twoRows = $deviceInfo.docWidth <= 680
+  $: twoRows = $deviceInfo.twoRows
 </script>

 <div class="ac-header withSettings divide" class:full={!twoRows} class:mini={twoRows}>
--- a/plugins/inventory-resources/src/components/Categories.svelte
+++ b/plugins/inventory-resources/src/components/Categories.svelte
@ -33,8 +33,7 @@
    showPopup(CreateCategory, { space: inventory.space.Category }, eventToHTMLElement(ev))
  }

-  let twoRows: boolean
-  $: twoRows = $deviceInfo.docWidth <= 680
+  $: twoRows = $deviceInfo.twoRows
 </script>

 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
--- a/plugins/recruit-resources/src/components/Vacancies.svelte
+++ b/plugins/recruit-resources/src/components/Vacancies.svelte
@ -131,8 +131,7 @@
    return result
  }

-  let twoRows: boolean
-  $: twoRows = $deviceInfo.docWidth <= 680
+  $: twoRows = $deviceInfo.twoRows
 </script>

 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
--- a/plugins/tags-resources/src/components/TagsView.svelte
+++ b/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.docWidth <= 680
+  $: twoRows = $deviceInfo.twoRows
 </script>

 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
--- a/plugins/tracker-resources/src/components/ProjectSelector.svelte
+++ b/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
--- a/plugins/tracker-resources/src/components/icons/Circles.svelte
+++ b/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">
--- a/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte
@ -20,8 +20,7 @@
    }
  })

-  let twoRows: boolean
-  $: twoRows = $deviceInfo.docWidth <= 680
+  $: twoRows = $deviceInfo.twoRows
 </script>

 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
--- a/plugins/tracker-resources/src/components/issues/IssuesList.svelte
+++ b/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 icon={IconAdd} kind={'transparent'} on:click={(event) => handleNewIssueAdded(event, category)} />
-        </div>
+        <Button
+          icon={IconAdd}
+          kind={'transparent'}
+          showTooltip={{ label: tracker.string.AddIssueTooltip }}
+          on:click={(event) => handleNewIssueAdded(event, category)}
+        />
      </div>
    {/if}
    <ExpandCollapse isExpanded={!isCollapsedMap[toCat(category)]} duration={400}>
@ -340,23 +349,25 @@
                    {...attributeModel.props}
                  />
                {:else if attributeModel.props?.fixed}
-                  <FixedColumn
-                    width={propsWidth[attributeModel.key]}
-                    key={attributeModel.key}
-                    justify={attributeModel.props.fixed}
-                    on:update={(result) => checkWidth(attributeModel.key, result)}
-                  >
-                    <svelte:component
-                      this={attributeModel.presenter}
-                      value={getObjectValue(attributeModel.key, docObject) ?? ''}
-                      groupBy={groupByKey}
-                      {...attributeModel.props}
-                      {statuses}
-                      {currentTeam}
-                    />
-                  </FixedColumn>
-                {:else}
-                  <div class="gridElement">
+                  {#if !(attributeModel.props?.optional && $deviceInfo.minWidth)}
+                    <FixedColumn
+                      width={propsWidth[attributeModel.key]}
+                      key={attributeModel.key}
+                      justify={attributeModel.props.fixed}
+                      on:update={(result) => checkWidth(attributeModel.key, result)}
+                    >
+                      <svelte:component
+                        this={attributeModel.presenter}
+                        value={getObjectValue(attributeModel.key, docObject) ?? ''}
+                        groupBy={groupByKey}
+                        {...attributeModel.props}
+                        {statuses}
+                        {currentTeam}
+                      />
+                    </FixedColumn>
+                  {/if}
+                {: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,
--- a/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte
+++ b/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="name cursor-pointer" on:click={handleIssueEditorOpened}>{value.title}</span>
+  <span class="titlePresenter-container" class:with-margin={shouldUseMargin} title={value.title}>
+    <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;
-    white-space: nowrap;
-    overflow: hidden;
-    flex-shrink: 10;
+    min-width: 1.5rem;
+    // flex-shrink: 10;

    .name {
      &:hover {
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
+++ b/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}
--- a/plugins/tracker-resources/src/components/projects/ProjectEditor.svelte
+++ b/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>
--- a/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte
+++ b/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,71 +120,92 @@
      sprint = res.shift()
    })
  }
+
+  $: twoRows = $deviceInfo.twoRows
 </script>

-{#if (value.sprint && value.sprint !== $activeSprint && groupBy !== 'sprint') || shouldShowPlaceholder}
-  <div
-    class="clear-mins"
-    use:tooltip={{ label: value.sprint ? tracker.string.MoveToSprint : tracker.string.AddToSprint }}
-  >
-    <SprintSelector
-      {kind}
-      {size}
-      {shape}
-      {width}
-      {justify}
-      {isEditable}
-      {shouldShowLabel}
-      {popupPlaceholder}
-      {onlyIcon}
-      {enlargedText}
-      value={value.sprint}
-      onChange={handleSprintIdChanged}
-    />
-  </div>
-{/if}
-
-{#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'} />
-  </div>
-  <div class="flex-row-center ml-2">
-    <!-- Active sprint in time -->
-    <Label
-      label={tracker.string.SprintPassed}
-      params={{
-        from:
-          now < sprint.startDate
-            ? 0
-            : now > sprint.targetDate
-            ? getDayOfSprint(sprint.startDate, sprint.targetDate)
-            : getDayOfSprint(sprint.startDate, now),
-        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 class="mr-2">
-      <EstimationProgressCircle value={totalReported} max={totalEstimation} />
+<div
+  class="flex flex-wrap min-w-8"
+  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}
+        {shape}
+        {width}
+        {justify}
+        {isEditable}
+        {shouldShowLabel}
+        {popupPlaceholder}
+        {onlyIcon}
+        {enlargedText}
+        showTooltip={{ label: value.sprint ? tracker.string.MoveToSprint : tracker.string.AddToSprint }}
+        value={value.sprint}
+        onChange={handleSprintIdChanged}
+      />
    </div>
-    {#if totalReported > 0}
-      <Label label={tracker.string.TimeSpendValue} params={{ value: totalReported }} />
-      /
-    {/if}
-    <Label label={tracker.string.TimeSpendValue} params={{ value: totalEstimation }} />
-    {#if sprint?.capacity}
-      <Label label={tracker.string.CapacityValue} params={{ value: sprint?.capacity }} />
-    {/if}
-  </div>
-{/if}
+  {/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()}
+        <DatePresenter value={sprint.startDate} kind={'transparent'} />
+        <span class="p-1"> / </span>
+        <DatePresenter value={sprint.targetDate} kind={'transparent'} />
+        <div class="w-2 min-w-2" />
+        <!-- Active sprint in time -->
+        <Label
+          label={tracker.string.SprintPassed}
+          params={{
+            from:
+              now < sprint.startDate
+                ? 0
+                : now > sprint.targetDate
+                ? getDayOfSprint(sprint.startDate, sprint.targetDate)
+                : getDayOfSprint(sprint.startDate, now),
+            to: getDayOfSprint(sprint.startDate, sprint.targetDate)
+          }}
+        />
+      {/if}
+      {#if issues}
+        <!-- <Label label={tracker.string.SprintDay} value={}/> -->
+        <div
+          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 class="w-2 min-w-2" />
+          {#if totalReported > 0}
+            <Label label={tracker.string.TimeSpendValue} params={{ value: totalReported }} />
+            /
+          {/if}
+          <Label label={tracker.string.TimeSpendValue} params={{ value: totalEstimation }} />
+          {#if sprint?.capacity}
+            <Label label={tracker.string.CapacityValue} params={{ value: sprint?.capacity }} />
+          {/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>
--- a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
+++ b/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}
--- a/plugins/view/src/index.ts
+++ b/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

--- a/plugins/workbench-resources/src/components/SpaceHeader.svelte
+++ b/plugins/workbench-resources/src/components/SpaceHeader.svelte
@ -82,8 +82,7 @@
    }
  })

-  let twoRows: boolean
-  $: twoRows = $deviceInfo.docWidth <= 768
+  $: twoRows = $deviceInfo.twoRows
 </script>

 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
--- a/plugins/workbench-resources/src/components/SpecialView.svelte
+++ b/plugins/workbench-resources/src/components/SpecialView.svelte
@ -75,8 +75,7 @@
    return search === '' ? baseQuery : { ...baseQuery, $search: search }
  }

-  let twoRows: boolean
-  $: twoRows = $deviceInfo.docWidth <= 680
+  $: twoRows = $deviceInfo.twoRows
 </script>

 <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/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