Rebase (#6088)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

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

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { PersonAccount } from '@hcengineering/contact'
   import { Class, Doc, DocumentQuery, getCurrentAccount, Ref, Status } from '@hcengineering/core'
-  import { IntlString } from '@hcengineering/platform'
+  import { IntlString, Asset } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import tags, { TagCategory, TagElement } from '@hcengineering/tags'
   import { selectedTagElements } from '@hcengineering/tags-resources'
@@ -23,11 +23,12 @@
   import {
     Component,
     IModeSelector,
-    Label,
+    Breadcrumb,
     Loading,
     ModeSelector,
     resolvedLocationStore,
-    SearchEdit
+    SearchInput,
+    Header
   } from '@hcengineering/ui'
   import { Viewlet, ViewletPreference, ViewOptions } from '@hcengineering/view'
   import {
@@ -43,6 +44,7 @@
 
   export let _class: Ref<Class<Task>> = task.class.Task
   export let labelTasks = task.string.Tasks
+  export let icon: Asset
   export let config: [string, IntlString, object][] = []
 
   let search = ''
@@ -145,38 +147,36 @@
   }
 </script>
 
-<div
-  class="ac-header full divide caption-height"
-  class:header-with-mode-selector={modeSelectorProps !== undefined}
-  class:header-without-label={!labelTasks}
->
-  <div class="ac-header__wrap-title">
-    <span class="ac-header__title"><Label label={labelTasks} /></span>
-    {#if modeSelectorProps !== undefined}
-      <ModeSelector props={modeSelectorProps} />
-    {/if}
-  </div>
-</div>
-<div class="ac-header full divide search-start">
-  <div class="ac-header-full small-gap">
-    <SearchEdit
+<Header adaptive={'freezeActions'} hideActions={modeSelectorProps === undefined}>
+  <svelte:fragment slot="beforeTitle">
+    <ViewletSelector
+      hidden
+      bind:viewlet
+      bind:preference
+      bind:loading
+      viewletQuery={{ attachTo: _class, descriptor: task.viewlet.StatusTable }}
+    />
+    <ViewletSettingButton bind:viewOptions bind:viewlet />
+  </svelte:fragment>
+
+  <Breadcrumb {icon} label={labelTasks} size={'large'} isCurrent />
+
+  <svelte:fragment slot="search" let:doubleRow>
+    <SearchInput
       bind:value={search}
+      collapsed
       on:change={() => {
         updateResultQuery(search, documentIds, doneStates, mode)
       }}
     />
-    <div class="buttons-divider" />
-    <FilterButton {_class} />
-  </div>
-  <ViewletSelector
-    hidden
-    bind:viewlet
-    bind:preference
-    bind:loading
-    viewletQuery={{ attachTo: _class, descriptor: task.viewlet.StatusTable }}
-  />
-  <ViewletSettingButton bind:viewOptions bind:viewlet />
-</div>
+    <FilterButton {_class} adaptive={doubleRow} />
+  </svelte:fragment>
+  <svelte:fragment slot="actions" let:doubleRow>
+    {#if modeSelectorProps !== undefined}
+      <ModeSelector kind={'subtle'} props={modeSelectorProps} />
+    {/if}
+  </svelte:fragment>
+</Header>
 <FilterBar {_class} query={searchQuery} space={undefined} {viewOptions} on:change={(e) => (resultQuery = e.detail)} />
 
 <Component is={tags.component.TagsCategoryBar} props={{ targetClass: _class, category }} on:change={handleChange} />

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

@@ -18,7 +18,7 @@
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Project, Task, getStates } from '@hcengineering/task'
   import type { TabItem } from '@hcengineering/ui'
-  import { ScrollerBar, TabList } from '@hcengineering/ui'
+  import { ScrollerBar, TabList, Switcher } from '@hcengineering/ui'
   import { TableBrowser, statusStore } from '@hcengineering/view-resources'
   import { typeStore } from '..'
   import task from '../plugin'
@@ -150,13 +150,15 @@
   }
 </script>
 
-<div class="ac-header full divide">
-  <TabList
+<div class="hulyHeader-container clearPadding justify-between flex-gap-4">
+  <Switcher
+    name={'status-table-states'}
+    kind={'subtle'}
+    selected={doneStatusesView ? 'DoneStates' : 'AllStates'}
     items={[
       { id: 'AllStates', labelIntl: task.string.AllStates },
       { id: 'DoneStates', labelIntl: task.string.DoneStates }
     ]}
-    multiselect={false}
     on:select={handleSelect}
   />
   {#if doneStatusesView}
@@ -174,14 +176,4 @@
     />
   {/if}
 </div>
-<div class="statustableview-container">
-  <TableBrowser {_class} bind:query={resultQuery} config={resConfig} {options} showNotification />
-</div>
-
-<style lang="scss">
-  .statustableview-container {
-    flex-grow: 1;
-    min-height: 0;
-    height: 100%;
-  }
-</style>
+<TableBrowser {_class} bind:query={resultQuery} config={resConfig} {options} showNotification />

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

@@ -54,6 +54,7 @@
 {#if !typeFixed}
   <DropdownLabels
     kind={'link'}
+    size={'medium'}
     items={availableProjectTypes.map((it) => ({ id: it._id, label: it.name }))}
     bind:selected={$selectedTypeStore}
   />

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

@@ -17,7 +17,7 @@
   import { IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { Project, ProjectType, ProjectTypeDescriptor } from '@hcengineering/task'
-  import { AnyComponent, Button, Component, IconAdd, Loading, SearchEdit, showPopup } from '@hcengineering/ui'
+  import { AnyComponent, Button, Component, IconAdd, Loading, SearchInput, showPopup, Header } from '@hcengineering/ui'
   import { Viewlet, ViewletDescriptor, ViewletPreference, ViewOptions } from '@hcengineering/view'
   import { FilterBar, FilterButton, ViewletSelector, ViewletSettingButton } from '@hcengineering/view-resources'
   import { selectedTaskTypeStore, selectedTypeStore, taskTypeStore } from '..'
@@ -72,13 +72,8 @@
   }
 </script>
 
-<div class="ac-header full divide caption-height">
-  <div class="ac-header__wrap-title mr-3">
-    <TypeSelector baseClass={_class} />
-    <!-- <span class="ac-header__title"><Label {label} /></span> -->
-  </div>
-
-  <div class="ac-header-full medium-gap mb-1">
+<Header adaptive={'freezeActions'} hideActions={!(createLabel !== undefined && createComponent)}>
+  <svelte:fragment slot="beforeTitle">
     <ViewletSelector
       bind:viewlet
       bind:preference
@@ -89,6 +84,16 @@
         ...(descriptors !== undefined ? { descriptor: { $in: descriptors } } : {})
       }}
     />
+    <ViewletSettingButton bind:viewOptions bind:viewlet />
+  </svelte:fragment>
+
+  <TypeSelector baseClass={_class} />
+
+  <svelte:fragment slot="search">
+    <SearchInput bind:value={search} collapsed on:change={(e) => (search = e.detail)} />
+    <FilterButton {_class} {space} />
+  </svelte:fragment>
+  <svelte:fragment slot="actions">
     {#if createLabel !== undefined && createComponent}
       <Button
         icon={IconAdd}
@@ -100,20 +105,8 @@
         }}
       />
     {/if}
-  </div>
-</div>
-<div class="ac-header full divide search-start">
-  <div class="ac-header-full small-gap">
-    <SearchEdit bind:value={search} />
-    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
-    <div class="buttons-divider" />
-    <FilterButton {_class} {space} />
-  </div>
-  <div class="ac-header-full medium-gap">
-    <ViewletSettingButton bind:viewOptions bind:viewlet />
-    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
-  </div>
-</div>
+  </svelte:fragment>
+</Header>
 
 {#if !viewlet?.$lookup?.descriptor?.component || viewlet?.attachTo !== _class || (preference !== undefined && viewlet?._id !== preference.attachedTo)}
   <Loading />

plugins/task-resources/src/components/taskTypes/TaskKindSelector.svelte

@@ -45,5 +45,13 @@
 </script>
 
 {#if projectType !== undefined && items.length > 1}
-  <DropdownLabels {focusIndex} {kind} {items} bind:selected={value} enableSearch={false} on:selected={change} />
+  <DropdownLabels
+    {focusIndex}
+    {kind}
+    size={'medium'}
+    {items}
+    bind:selected={value}
+    enableSearch={false}
+    on:selected={change}
+  />
 {/if}