Tracker: Enlarged headers (#2259)

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

packages/theme/styles/_colors.scss

@@ -210,7 +210,7 @@
   --board-card-bg-color: #fff;
   --board-card-bg-hover: rgb(252, 252, 252);
   --board-card-shadow: rgb(0 0 0 / 6%) 0px 0px 1px;
-  --accent-bg-color: #f8f9fb;  // HZ
+  --accent-bg-color: #eff0f2;  // HZ
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;  // Dark
 
   --highlight-hover: #f9f9f9;

packages/theme/styles/common.scss

@@ -207,8 +207,8 @@
 .antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); }
 .antiNav-noneFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
 .tableFade.antiNav-topFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
-.tableFade.antiNav-bottomFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 4.5rem - 1px), rgba(0, 0, 0, 0) calc(100% - 2.5rem), rgba(0, 0, 0, 1) calc(100% - 2.5rem + .5px)); }
-.tableFade.antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 4.5rem - 1px), rgba(0, 0, 0, 0) calc(100% - 2.5rem), rgba(0, 0, 0, 1) calc(100% - 2.5rem + .5px)); }
+.tableFade.antiNav-bottomFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - var(--scroller-header-height, 2.5rem) - 2rem - 1px), rgba(0, 0, 0, 0) calc(100% - var(--scroller-header-height, 2.5rem)), rgba(0, 0, 0, 1) calc(100% - var(--scroller-header-height, 2.5rem) + .5px)); }
+.tableFade.antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - var(--scroller-header-height, 2.5rem) - 2rem - 1px), rgba(0, 0, 0, 0) calc(100% - var(--scroller-header-height, 2.5rem)), rgba(0, 0, 0, 1) calc(100% - var(--scroller-header-height, 2.5rem) + .5px)); }
 .tableFade.antiNav-noneFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
 
 /* Basic */

packages/ui/src/components/Scroller.svelte

@@ -21,6 +21,7 @@
   // export let correctPadding: number = 0
   export let bottomStart: boolean = false
   export let tableFade: boolean = false
+  export let fadeTopOffset: number = 40
 
   let mask: 'top' | 'bottom' | 'both' | 'none' = 'none'
 
@@ -37,7 +38,7 @@
 
   let timer: number
 
-  $: shift = tableFade ? 40 : 0
+  $: shift = tableFade ? fadeTopOffset : 0
 
   const checkBar = (): void => {
     if (divBar && divScroll) {
@@ -148,7 +149,7 @@
 </script>
 
 <svelte:window on:resize={_resize} />
-<div class="scroller-container" class:bottomStart>
+<div class="scroller-container" class:bottomStart style="--scroller-header-height: {shift}px;">
   <div
     bind:this={divScroll}
     use:resizeObserver={(element) => {

packages/ui/src/types.ts

@@ -112,6 +112,7 @@ export type ButtonKind =
   | 'link-bordered'
   | 'dangerous'
   | 'list'
+  | 'list-header'
 export type ButtonSize = 'inline' | 'small' | 'medium' | 'large' | 'x-large'
 export type ButtonShape = 'rectangle' | 'rectangle-left' | 'rectangle-right' | 'circle' | 'round' | undefined
 export type EditStyle = 'editbox' | 'large-style' | 'small-style' | 'search-style' | 'underline'

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

@@ -30,6 +30,7 @@
   export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
   export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
+  export let enlargedText = false
 
   $: element = getElement(value, onEdit, shouldShowPlaceholder, isInteractive)
 
@@ -61,13 +62,18 @@
   class="contentPresenter"
   class:inline-presenter={inline}
   class:mContentPresenterNotInteractive={!isInteractive}
+  class:text-base={enlargedText}
   on:click={onEdit}
   href={!isInteractive || onEdit || !value
     ? undefined
     : `#${getPanelURI(view.component.EditDoc, value._id, Hierarchy.mixinOrClass(value), 'content')}`}
 >
   {#if shouldShowAvatar}
-    <div class="eContentPresenterIcon" class:mr-2={shouldShowName}>
+    <div
+      class="eContentPresenterIcon"
+      class:mr-2={shouldShowName && !enlargedText}
+      class:mr-3={shouldShowName && enlargedText}
+    >
       <Avatar size={avatarSize} avatar={value?.avatar} />
     </div>
   {/if}

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

@@ -20,6 +20,7 @@
 
   export let value: Person | null | undefined
   export let inline = false
+  export let enlargedText = false
   export let isInteractive = true
   export let shouldShowAvatar = true
   export let shouldShowName = true
@@ -55,5 +56,6 @@
     {shouldShowAvatar}
     {shouldShowName}
     {shouldShowPlaceholder}
+    {enlargedText}
   />
 {/if}

plugins/tracker-assets/assets/icons.svg

@@ -157,14 +157,14 @@
   <symbol id="copyBranch" viewBox="0 0 16 16">
     <path d="M12.6229 11.528V5.66666C12.5954 4.93866 12.3116 4.29467 11.7624 3.744C11.2132 3.19333 10.5907 2.89467 9.87669 2.86667H8.9613V1L6.21514 3.8L8.9613 6.6V4.73333H9.87669C10.1238 4.752 10.3161 4.836 10.5083 5.02267C10.7005 5.20933 10.7829 5.41466 10.7921 5.66666V11.528C10.4436 11.7327 10.1712 12.049 10.0172 12.4278C9.86328 12.8067 9.83642 13.2268 9.94083 13.6228C10.0452 14.0188 10.2751 14.3685 10.5945 14.6176C10.914 14.8666 11.3053 15.0011 11.7075 15C12.1096 15.0011 12.5009 14.8666 12.8204 14.6176C13.1399 14.3685 13.3697 14.0188 13.4741 13.6228C13.5785 13.2268 13.5517 12.8067 13.3977 12.4278C13.2438 12.049 12.9714 11.7327 12.6229 11.528ZM11.7075 14.2533C11.1033 14.2533 10.609 13.74 10.609 13.1333C10.609 12.5267 11.1125 12.0133 11.7075 12.0133C12.3025 12.0133 12.8059 12.5267 12.8059 13.1333C12.8059 13.74 12.3025 14.2533 11.7075 14.2533ZM6.21514 3.8C6.21514 2.764 5.40045 1.93333 4.38436 1.93333C3.98219 1.93225 3.59093 2.0667 3.27144 2.31576C2.95195 2.56483 2.72213 2.91456 2.61772 3.31057C2.51332 3.70657 2.54018 4.12665 2.69412 4.50548C2.84807 4.88432 3.12047 5.20066 3.46898 5.40533V11.528C3.12047 11.7327 2.84807 12.049 2.69412 12.4278C2.54018 12.8067 2.51332 13.2268 2.61772 13.6228C2.72213 14.0188 2.95195 14.3685 3.27144 14.6176C3.59093 14.8666 3.98219 15.0011 4.38436 15C4.78654 15.0011 5.1778 14.8666 5.49729 14.6176C5.81678 14.3685 6.0466 14.0188 6.15101 13.6228C6.25541 13.2268 6.22855 12.8067 6.07461 12.4278C5.92066 12.049 5.64826 11.7327 5.29975 11.528V5.40533C5.83983 5.088 6.21514 4.49067 6.21514 3.8ZM5.48283 13.1333C5.48283 13.7493 4.97937 14.2533 4.38436 14.2533C3.78936 14.2533 3.2859 13.74 3.2859 13.1333C3.2859 12.5267 3.78936 12.0133 4.38436 12.0133C4.97937 12.0133 5.48283 12.5267 5.48283 13.1333ZM4.38436 4.92C3.78021 4.92 3.2859 4.40667 3.2859 3.8C3.2859 3.19333 3.78936 2.68 4.38436 2.68C4.97937 2.68 5.48283 3.19333 5.48283 3.8C5.48283 4.40667 4.97937 4.92 4.38436 4.92Z" />
   </symbol>
-  <symbol id='sprint' viewBox="0 0 16 16" fill="none">
-    <path d="M5.99935 3.33337H9.33268M9.33268 3.33337H12.666M9.33268 3.33337V12.6667M5.99935 12.6667H9.33268M9.33268 12.6667H12.666" stroke="white"/>
-    <path d="M1.33398 10H0.833984V10.5H1.33398V10ZM1.33398 10.5H7.33398V9.5H1.33398V10.5ZM7.33398 5.5H3.33398V6.5H7.33398V5.5ZM0.833984 8V10H1.83398V8H0.833984ZM3.33398 5.5C1.95327 5.5 0.833984 6.61929 0.833984 8H1.83398C1.83398 7.17157 2.50556 6.5 3.33398 6.5V5.5Z" fill="white"/>
-    <path d="M14.666 6H15.166V5.5H14.666V6ZM14.666 5.5H11.3327V6.5H14.666V5.5ZM11.3327 10.5H12.666V9.5H11.3327V10.5ZM15.166 8V6H14.166V8H15.166ZM12.666 10.5C14.0467 10.5 15.166 9.38071 15.166 8H14.166C14.166 8.82843 13.4944 9.5 12.666 9.5V10.5Z" fill="white"/>
+  <symbol id="sprint" viewBox="0 0 16 16" fill="none">
+    <path d="M5.99935 3.33337H9.33268M9.33268 3.33337H12.666M9.33268 3.33337V12.6667M5.99935 12.6667H9.33268M9.33268 12.6667H12.666" stroke="currentColor"/>
+    <path d="M1.33398 10H0.833984V10.5H1.33398V10ZM1.33398 10.5H7.33398V9.5H1.33398V10.5ZM7.33398 5.5H3.33398V6.5H7.33398V5.5ZM0.833984 8V10H1.83398V8H0.833984ZM3.33398 5.5C1.95327 5.5 0.833984 6.61929 0.833984 8H1.83398C1.83398 7.17157 2.50556 6.5 3.33398 6.5V5.5Z" fill="currentColor"/>
+    <path d="M14.666 6H15.166V5.5H14.666V6ZM14.666 5.5H11.3327V6.5H14.666V5.5ZM11.3327 10.5H12.666V9.5H11.3327V10.5ZM15.166 8V6H14.166V8H15.166ZM12.666 10.5C14.0467 10.5 15.166 9.38071 15.166 8H14.166C14.166 8.82843 13.4944 9.5 12.666 9.5V10.5Z" fill="currentColor"/>
   </symbol>
   <symbol id="timeReport" viewBox="0 0 16 16" fill="none">
-    <circle cx="7.99935" cy="7.99996" r="5.83333" stroke="white"/>
-    <path d="M10.8284 5.17157C10.0783 4.42143 9.06087 4 8 4C6.93913 4 5.92172 4.42143 5.17157 5.17157C4.42143 5.92172 4 6.93913 4 8C4 9.06087 4.42143 10.0783 5.17157 10.8284L8 8L10.8284 5.17157Z" fill="white"/>
+    <circle cx="7.99935" cy="7.99996" r="5.83333" stroke="currentColor"/>
+    <path d="M10.8284 5.17157C10.0783 4.42143 9.06087 4 8 4C6.93913 4 5.92172 4.42143 5.17157 5.17157C4.42143 5.92172 4 6.93913 4 8C4 9.06087 4.42143 10.0783 5.17157 10.8284L8 8L10.8284 5.17157Z" fill="currentColor"/>
   </symbol>
 
 </svg>

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

@@ -18,7 +18,7 @@
   import { createQuery } from '@anticrm/presentation'
   import { Project } from '@anticrm/tracker'
   import type { ButtonKind, ButtonSize } from '@anticrm/ui'
-  import { Button, ButtonShape, eventToHTMLElement, SelectPopup, showPopup } from '@anticrm/ui'
+  import { Button, ButtonShape, eventToHTMLElement, SelectPopup, showPopup, Label } from '@anticrm/ui'
   import tracker from '../plugin'
 
   export let value: Ref<Project> | null | undefined
@@ -32,6 +32,7 @@
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = 'min-content'
   export let onlyIcon: boolean = false
+  export let enlargedText = false
 
   let selectedProject: Project | undefined
   let defaultProjectLabel = ''
@@ -91,15 +92,33 @@
   }
 </script>
 
-<Button
-  {kind}
-  {size}
-  {shape}
-  {width}
-  {justify}
-  label={onlyIcon || projectText === undefined ? undefined : getEmbeddedLabel(projectText)}
-  icon={projectIcon}
-  disabled={!isEditable}
-  {loading}
-  on:click={handleProjectEditorOpened}
-/>
+{#if onlyIcon || projectText === undefined}
+  <Button
+    {kind}
+    {size}
+    {shape}
+    {width}
+    {justify}
+    icon={projectIcon}
+    disabled={!isEditable}
+    {loading}
+    on:click={handleProjectEditorOpened}
+  />
+{:else}
+  <Button
+    {kind}
+    {size}
+    {shape}
+    {width}
+    {justify}
+    icon={projectIcon}
+    disabled={!isEditable}
+    {loading}
+    on:click={handleProjectEditorOpened}
+    ><svelte:fragment slot="content">
+      <span class="{enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label content-accent-color">
+        <Label label={getEmbeddedLabel(projectText)} />
+      </span>
+    </svelte:fragment></Button
+  >
+{/if}

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

@@ -196,7 +196,8 @@
               defaultName={tracker.string.NoAssignee}
               shouldShowPlaceholder={true}
               isInteractive={false}
-              avatarSize={'x-small'}
+              avatarSize={'small'}
+              enlargedText
               {currentSpace}
             />
           {:else if headerComponent}
@@ -208,13 +209,14 @@
                 value: groupByKey ? { [groupByKey]: category } : {},
                 statuses: groupByKey === 'status' ? statuses : undefined,
                 issues: groupedIssues[category],
-                size: 'inline',
-                kind: 'list',
+                size: 'medium',
+                kind: 'list-header',
+                enlargedText: true,
                 currentSpace
               }}
             />
           {/if}
-          <span class="text-md content-dark-color ml-2">{(groupedIssues[category] ?? []).length}</span>
+          <span class="text-base content-dark-color ml-4">{(groupedIssues[category] ?? []).length}</span>
         </div>
         <div class="clear-mins" use:tooltip={{ label: tracker.string.AddIssueTooltip }}>
           <Button icon={IconAdd} kind={'transparent'} on:click={(event) => handleNewIssueAdded(event, category)} />
@@ -362,10 +364,10 @@
     position: sticky;
     top: 0;
     padding: 0 1.5rem 0 2.25rem;
-    height: 2.5rem;
-    min-height: 2.5rem;
+    height: 3rem;
+    min-height: 3rem;
     min-width: 0;
-    background-color: var(--body-accent);
+    background-color: var(--accent-bg-color);
     z-index: 5;
   }
 

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

@@ -68,7 +68,7 @@
 </script>
 
 <div class="w-full h-full clear-mins">
-  <Scroller tableFade={categories[0] !== undefined}>
+  <Scroller tableFade={categories[0] !== undefined} fadeTopOffset={48}>
     <IssuesListBrowser
       {_class}
       {currentSpace}

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

@@ -64,13 +64,17 @@
 </script>
 
 {#if value}
-  {#if kind === 'list'}
+  {#if kind === 'list' || kind === 'list-header'}
     <div class="priority-container" on:click={handlePriorityEditorOpened}>
       <div class="icon">
         {#if issuePriorities[value.priority]?.icon}<Icon icon={issuePriorities[value.priority]?.icon} {size} />{/if}
       </div>
       {#if shouldShowLabel}
-        <span class="overflow-label label">
+        <span
+          class="{kind === 'list'
+            ? 'ml-2 text-md'
+            : 'ml-3 text-base'} overflow-label disabled fs-bold content-accent-color"
+        >
           <Label label={issuePriorities[value.priority]?.label} />
         </span>
       {/if}
@@ -108,9 +112,7 @@
       color: var(--content-color);
     }
     .label {
-      margin-left: 0.5rem;
       font-weight: 500;
-      font-size: 0.8125rem;
       color: var(--accent-color);
     }
     &:hover {

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

@@ -90,13 +90,17 @@
 </script>
 
 {#if value && statuses}
-  {#if kind === 'list'}
+  {#if kind === 'list' || kind === 'list-header'}
     <div class="flex-row-center flex-no-shrink" class:cursor-pointer={isEditable} on:click={handleStatusEditorOpened}>
       <div class="flex-center flex-no-shrink square-4">
-        {#if selectedStatus}<IssueStatusIcon value={selectedStatus} size="inline" />{/if}
+        {#if selectedStatus}<IssueStatusIcon value={selectedStatus} size={kind === 'list' ? 'inline' : 'medium'} />{/if}
       </div>
       {#if selectedStatusLabel}
-        <span class="ml-2 overflow-label disabled text-md fs-bold content-accent-color">
+        <span
+          class="{kind === 'list'
+            ? 'ml-2 text-md'
+            : 'ml-3 text-base'} overflow-label disabled fs-bold content-accent-color"
+        >
           {selectedStatusLabel}
         </span>
       {/if}

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

@@ -34,6 +34,7 @@
   export let width: string | undefined = '100%'
   export let onlyIcon: boolean = false
   export let groupBy: string | undefined = undefined
+  export let enlargedText = false
 
   const client = getClient()
 
@@ -69,6 +70,7 @@
       {shouldShowLabel}
       {popupPlaceholder}
       {onlyIcon}
+      {enlargedText}
       value={value.project}
       onProjectIdChange={handleProjectIdChanged}
     />

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

@@ -38,6 +38,7 @@
   export let onlyIcon: boolean = false
   export let issues: Issue[] | undefined
   export let groupBy: string | undefined
+  export let enlargedText = false
 
   const client = getClient()
 
@@ -111,6 +112,7 @@
       {shouldShowLabel}
       {popupPlaceholder}
       {onlyIcon}
+      {enlargedText}
       value={value.sprint}
       onSprintIdChange={handleSprintIdChanged}
     />

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

@@ -18,7 +18,7 @@
   import { createQuery } from '@anticrm/presentation'
   import { Sprint } from '@anticrm/tracker'
   import type { ButtonKind, ButtonSize } from '@anticrm/ui'
-  import { Button, ButtonShape, eventToHTMLElement, SelectPopup, showPopup } from '@anticrm/ui'
+  import { Button, ButtonShape, eventToHTMLElement, SelectPopup, showPopup, Label } from '@anticrm/ui'
   import tracker from '../../plugin'
   import { sprintStatusAssets } from '../../types'
 
@@ -33,6 +33,7 @@
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = 'min-content'
   export let onlyIcon: boolean = false
+  export let enlargedText = false
 
   let selectedSprint: Sprint | undefined
   let defaultSprintLabel = ''
@@ -91,14 +92,31 @@
   }
 </script>
 
-<Button
-  {kind}
-  {size}
-  {shape}
-  {width}
-  {justify}
-  label={onlyIcon || sprintText === undefined ? undefined : getEmbeddedLabel(sprintText)}
-  icon={sprintIcon}
-  disabled={!isEditable}
-  on:click={handleSprintEditorOpened}
-/>
+{#if onlyIcon || sprintText === undefined}
+  <Button
+    {kind}
+    {size}
+    {shape}
+    {width}
+    {justify}
+    icon={sprintIcon}
+    disabled={!isEditable}
+    on:click={handleSprintEditorOpened}
+  />
+{:else}
+  <Button
+    {kind}
+    {size}
+    {shape}
+    {width}
+    {justify}
+    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">
+        <Label label={getEmbeddedLabel(sprintText)} />
+      </span>
+    </svelte:fragment></Button
+  >
+{/if}