TSK-1410,-1408,-1392,-1389,-1386,-1377: Minor fixes. Update IssueNotification layout. (#3117)

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

packages/text-editor/src/types.ts

@@ -47,7 +47,7 @@ export const FORMAT_MODES = [
 /**
  * @public
  */
-export type FormatMode = typeof FORMAT_MODES[number]
+export type FormatMode = (typeof FORMAT_MODES)[number]
 
 /**
  * @public

packages/theme/styles/_colors.scss

@@ -119,6 +119,12 @@
   --theme-popup-divider: rgba(255, 255, 255, .1);
   --theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); // Light
   --theme-panel-color: #1A1A28;
+  --theme-calendar-today-color: #fff;
+  --theme-calendar-holiday-color: #eb5757;
+  --theme-calendar-weekend-color: rgba(242, 153, 74, 1);
+  --theme-calendar-today-bgcolor: rgba(32, 93, 194, .1);
+  --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
+  --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .05);
 
   --body-color: #1f2023;
   --body-accent: #222326;
@@ -269,6 +275,12 @@
   --theme-popup-divider: rgba(0, 0, 0, .1);
   --theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
   --theme-panel-color: #FFFFFF;
+  --theme-calendar-today-color: #000;
+  --theme-calendar-holiday-color: #eb5757;
+  --theme-calendar-weekend-color: rgba(242, 153, 74, 1);
+  --theme-calendar-today-bgcolor: rgba(43, 81, 144, .1);
+  --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
+  --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .1);
 
   --body-color: #fff;
   --body-accent: #fafafa; // HZ

packages/theme/styles/_layouts.scss

@@ -186,6 +186,7 @@ input.search {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  min-width: 0;
 }
 .flex-stretch {
   display: flex;

packages/theme/styles/components.scss

@@ -713,6 +713,7 @@
     align-items: center;
     flex-shrink: 1;
     min-width: 0;
+    border-radius: 0 1.49rem 1.49rem 0;
     
     .label-wrapper {
       display: flex;

packages/ui/src/components/Scroller.svelte

@@ -444,6 +444,7 @@
   class:buttons={buttons === 'normal'}
   class:union={buttons === 'union'}
   class:shrink
+  style:user-select={isScrolling ? 'none' : 'inherit'}
   style:--scroller-header-height={`${fade.multipler?.top ?? 0.125}rem`}
   style:--scroller-footer-height={`${fade.multipler?.bottom ?? 0.125}rem`}
 >

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

@@ -165,7 +165,7 @@
         margin-right: 0;
       }
       &.normal {
-        color: var(--content-color);
+        color: var(--theme-content-color);
       }
       &.warning {
         color: var(--warning-color);
@@ -178,15 +178,15 @@
       }
     }
     .not-selected {
-      color: var(--content-color);
+      color: var(--theme-dark-color);
     }
 
     &:hover {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       transition-duration: 0;
 
       .not-selected {
-        color: var(--accent-color);
+        color: var(--theme-caption-color);
       }
     }
     &.editable {
@@ -224,9 +224,9 @@
       cursor: default;
 
       &:hover {
-        color: var(--content-color);
+        color: var(--theme-dark-color);
         .btn-icon {
-          color: var(--content-color);
+          color: var(--theme-dark-color);
         }
       }
     }
@@ -240,40 +240,38 @@
         margin-right: 0.5rem;
       }
       &:hover {
-        color: var(--caption-color);
-        background-color: var(--body-color);
-        border-color: var(--divider-color);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-button-hovered);
+        border-color: var(--theme-divider-color);
         .btn-icon {
-          color: var(--content-color);
+          color: var(--theme-caption-color);
         }
       }
     }
     &.list {
       padding: 0 0.625em 0 0.5rem;
       min-height: 1.75rem;
-      color: var(--content-color);
-      background-color: var(--body-color);
-      border: 1px solid var(--divider-color);
+      background-color: var(--theme-list-button-color);
+      border: 1px solid var(--theme-divider-color);
       border-radius: 3rem;
       transition-property: border, color, background-color;
       transition-duration: 0.15s;
 
       &:hover {
-        color: var(--caption-color);
-        background-color: var(--board-card-bg-color);
-        border-color: var(--button-border-color);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-list-button-color);
+        border-color: var(--theme-divider-color);
       }
     }
     &.link-bordered {
       padding: 0 0.375rem;
-      color: var(--accent-color);
-      border-color: var(--divider-color);
+      color: var(--theme-content-color);
+      border-color: var(--theme-button-border);
       &:hover {
-        color: var(--accent-color);
-        background-color: var(--button-bg-hover);
-        border-color: var(--button-border-hover);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-button-hovered);
         .btn-icon {
-          color: var(--accent-color);
+          color: var(--theme-caption-color);
         }
       }
     }
@@ -305,7 +303,7 @@
       width: 1px;
       min-width: 1px;
       height: 0.75rem;
-      background-color: var(--button-border-color);
+      background-color: var(--theme-divider-color);
     }
     .separator {
       margin: 0 0.1rem;

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

@@ -17,7 +17,7 @@
   import contact, { Employee, EmployeeAccount } from '@hcengineering/contact'
   import core, { Class, getCurrentAccount, Ref, Space } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import { ActionIcon, IconMoreH, Label, Loading, location, navigate, TabList, SearchEdit } from '@hcengineering/ui'
+  import { Label, Loading, location, navigate, TabList, SearchEdit } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { get } from 'svelte/store'
   import { dateFileBrowserFilters, FileBrowserSortMode, fileTypeFileBrowserFilters, sortModeToOptionObject } from '..'
@@ -122,7 +122,7 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={() => {}} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     <div class="buttons-divider" />
   </div>
   <FileBrowserFilters

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

@@ -21,13 +21,11 @@
     AnyComponent,
     Button,
     Component,
-    ActionIcon,
     Label,
     Loading,
     SearchEdit,
     showPopup,
     TabList,
-    IconMoreH,
     IconAdd
   } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
@@ -135,13 +133,13 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     <div class="buttons-divider" />
     <FilterButton {_class} />
   </div>
   <div class="ac-header-full medium-gap">
     <ViewletSettingButton bind:viewOptions viewlet={selectedViewlet} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
 </div>
 {#if selectedViewlet?.$lookup?.descriptor?.component}

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

@@ -16,7 +16,7 @@
 <script lang="ts">
   import { Doc, DocumentQuery } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, Label, Loading, SearchEdit, showPopup, IconMoreH, ActionIcon } from '@hcengineering/ui'
+  import { Button, Label, Loading, SearchEdit, showPopup } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     ActionContext,
@@ -101,13 +101,13 @@
   <div class="ac-header full divide search-start">
     <div class="ac-header-full small-gap">
       <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
-      <ActionIcon icon={IconMoreH} size={'small'} />
+      <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
       <div class="buttons-divider" />
       <FilterButton _class={contact.class.Contact} />
     </div>
     <div class="ac-header-full medium-gap">
       <ViewletSettingButton bind:viewOptions {viewlet} />
-      <ActionIcon icon={IconMoreH} size={'small'} />
+      <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     </div>
   </div>
 

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

@@ -159,7 +159,7 @@
             <div class="flex-presenter not-selected">
               {#if icon}
                 <div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
-                  <Icon {icon} size={kind === 'link' ? 'small' : size} />
+                  <Icon {icon} size={'small'} />
                 </div>
               {/if}
               <div class="label no-underline">

plugins/document-resources/src/components/Documents.svelte

@@ -18,7 +18,7 @@
   import { Doc, DocumentQuery } from '@hcengineering/core'
   import { Document } from '@hcengineering/document'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { ActionIcon, IconMoreH, Label, Loading, SearchEdit } from '@hcengineering/ui'
+  import { Label, Loading, SearchEdit } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     ActionContext,
@@ -90,13 +90,13 @@
   <div class="ac-header full divide search-start">
     <div class="ac-header-full small-gap">
       <SearchEdit bind:value={search} on:change={() => updateResultQuery(search, query)} />
-      <ActionIcon icon={IconMoreH} size={'small'} />
+      <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
       <div class="buttons-divider" />
       <FilterButton _class={document.class.Document} />
     </div>
     <div class="ac-header-full medium-gap">
       <ViewletSettingButton bind:viewOptions {viewlet} />
-      <ActionIcon icon={IconMoreH} size={'small'} />
+      <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     </div>
   </div>
 

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

@@ -20,8 +20,6 @@
   import { createQuery, getClient, SpaceSelector } from '@hcengineering/presentation'
   import {
     Button,
-    ActionIcon,
-    IconMoreH,
     IconBack,
     IconForward,
     Label,
@@ -134,7 +132,7 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
   <div class="ac-header-full medium-gap">
     <!-- <ViewletSettingButton bind:viewOptions {viewlet} /> -->

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

@@ -21,8 +21,6 @@
     Button,
     deviceOptionsStore as deviceInfo,
     eventToHTMLElement,
-    ActionIcon,
-    IconMoreH,
     Label,
     Scroller,
     SearchEdit,
@@ -90,7 +88,7 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
 </div>
 

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

@@ -330,8 +330,8 @@
       font-weight: 500;
       font-size: 0.75rem;
       line-height: 105%;
-      color: var(--dark-color);
-      box-shadow: inset 0 -1px 0 0 var(--divider-color);
+      color: var(--theme-halfcontent-color);
+      box-shadow: inset 0 -1px 0 0 var(--theme-divider-color);
       user-select: none;
       cursor: pointer;
 
@@ -341,16 +341,16 @@
         font-size: 1rem;
       }
       &.today {
-        color: var(--caption-color);
+        color: var(--theme-calendar-today-color);
       }
       &.holiday:not(.today) {
-        color: var(--error-color);
+        color: var(--theme-calendar-holiday-color);
       }
       &.weekend:not(.today) {
-        color: var(--warning-color);
+        color: var(--theme-calendar-weekend-color);
       }
       &.hoveredCell {
-        background-color: var(--highlight-select);
+        background-color: var(--theme-button-pressed);
       }
     }
     td {
@@ -358,31 +358,31 @@
       border: none;
       color: var(--caption-color);
       &.today {
-        background-color: var(--primary-button-disabled);
+        background-color: var(--theme-calendar-today-bgcolor);
       }
       &.summary {
         font-weight: 600;
       }
       &.weekend:not(.today) {
-        background-color: var(--accent-bg-color);
+        background-color: var(--theme-calendar-weekend-bgcolor);
       }
       &.holiday:not(.today) {
-        background-color: var(--system-error-60-color);
+        background-color: var(--theme-calendar-holiday-bgcolor);
       }
     }
     td:not(:last-child) {
-      border-right: 1px solid var(--divider-color);
+      border-right: 1px solid var(--theme-divider-color);
     }
 
     tbody,
     tfoot {
       tr {
-        border-bottom: 1px solid var(--divider-color);
+        border-bottom: 1px solid var(--theme-divider-color);
       }
     }
 
     tr.scroller-thead__tr:not(:last-child) {
-      border-right: 1px solid var(--divider-color);
+      border-right: 1px solid var(--theme-divider-color);
     }
 
     .hovered {
@@ -395,7 +395,7 @@
         left: 0;
         width: 100%;
         height: 100%;
-        background-color: var(--caption-color);
+        background-color: var(--theme-caption-color);
         opacity: 0.15;
       }
     }

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

@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import { DocumentQuery } from '@hcengineering/core'
-  import { Button, ActionIcon, Label, Scroller, SearchEdit, showPopup, IconMoreH, IconAdd } from '@hcengineering/ui'
+  import { Button, Label, Scroller, SearchEdit, showPopup, IconAdd } from '@hcengineering/ui'
   import type { Category } from '@hcengineering/inventory'
   import inventory from '../plugin'
   import CreateCategory from './CreateCategory.svelte'
@@ -48,7 +48,7 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     <div class="buttons-divider" />
   </div>
 </div>

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

@@ -15,7 +15,7 @@
 <script lang="ts">
   import type { Doc, Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
-  import { Button, Icon, IconAdd, Label, resizeObserver, Scroller, showPopup } from '@hcengineering/ui'
+  import { Button, Icon, IconAdd, Label, Scroller, showPopup } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
   import { getViewOptions, Table, ViewletSettingButton, viewOptionStore } from '@hcengineering/view-resources'
   import recruit from '../plugin'
@@ -56,11 +56,9 @@
       },
       { limit: 1 }
     )
-
-  let wSection: number
 </script>
 
-<div class="antiSection" use:resizeObserver={(element) => (wSection = element.clientWidth)}>
+<div class="antiSection">
   <div class="antiSection-header">
     <div class="antiSection-header__icon">
       <Icon icon={IconApplication} size={'small'} />
@@ -74,23 +72,14 @@
     <Button id="appls.add" icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
   </div>
   {#if applications > 0 && viewlet && !loading}
-    {#if wSection < 640}
-      <Scroller horizontal>
-        <Table
-          _class={recruit.class.Applicant}
-          config={preference?.config ?? viewlet.config}
-          query={{ attachedTo: objectId, ...(viewlet?.baseQuery ?? {}) }}
-          loadingProps={{ length: applications }}
-        />
-      </Scroller>
-    {:else}
+    <Scroller horizontal>
       <Table
         _class={recruit.class.Applicant}
         config={preference?.config ?? viewlet.config}
         query={{ attachedTo: objectId, ...(viewlet?.baseQuery ?? {}) }}
         loadingProps={{ length: applications }}
       />
-    {/if}
+    </Scroller>
   {:else}
     <div class="antiSection-empty solid flex-col-center mt-3">
       <div class="caption-color">

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

@@ -17,7 +17,7 @@
   import core, { Doc, DocumentQuery, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Applicant, Vacancy } from '@hcengineering/recruit'
-  import { Button, ActionIcon, IconMoreH, Label, Loading, SearchEdit, showPopup, IconAdd } from '@hcengineering/ui'
+  import { Button, Label, Loading, SearchEdit, showPopup, IconAdd } from '@hcengineering/ui'
   import view, { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     FilterBar,
@@ -237,13 +237,13 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={(e) => (search = e.detail)} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     <div class="buttons-divider" />
     <FilterButton _class={recruit.class.Vacancy} />
   </div>
   <div class="ac-header-full medium-gap">
     <ViewletSettingButton bind:viewOptions viewlet={descr} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
 </div>
 

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

@@ -16,17 +16,7 @@
   import core, { Doc, DocumentQuery, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Vacancy } from '@hcengineering/recruit'
-  import {
-    Button,
-    ActionIcon,
-    IconMoreH,
-    Label,
-    Loading,
-    SearchEdit,
-    showPopup,
-    tableToCSV,
-    IconAdd
-  } from '@hcengineering/ui'
+  import { Button, Label, Loading, SearchEdit, showPopup, tableToCSV, IconAdd } from '@hcengineering/ui'
   import view, { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     FilterBar,
@@ -191,13 +181,13 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={(e) => (search = e.detail)} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     <div class="buttons-divider" />
     <FilterButton _class={recruit.class.Vacancy} />
   </div>
   <div class="ac-header-full medium-gap">
     <ViewletSettingButton bind:viewOptions viewlet={descr} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
 </div>
 

plugins/recruit-resources/src/components/review/Reviews.svelte

@@ -18,7 +18,7 @@
   import { DateRangeMode, Doc, FindOptions, Ref } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { Applicant, Review } from '@hcengineering/recruit'
-  import { Button, DatePresenter, IconAdd, Label, resizeObserver, showPopup, Scroller } from '@hcengineering/ui'
+  import { Button, DatePresenter, IconAdd, Label, showPopup, Scroller } from '@hcengineering/ui'
   import { Table } from '@hcengineering/view-resources'
   import recruit from '../../plugin'
   import FileDuo from '../icons/FileDuo.svelte'
@@ -42,7 +42,6 @@
       'top'
     )
   }
-  let wSection: number
   const options: FindOptions<Review> = {
     lookup: {
       application: recruit.class.Applicant
@@ -50,7 +49,7 @@
   }
 </script>
 
-<div class="antiSection" use:resizeObserver={(element) => (wSection = element.clientWidth)}>
+<div class="antiSection">
   <div class="antiSection-header">
     <span class="antiSection-header__title">
       <Label {label} />
@@ -58,38 +57,7 @@
     <Button icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
   </div>
   {#if reviews > 0}
-    {#if wSection < 640}
-      <Scroller horizontal>
-        <Table
-          _class={recruit.class.Review}
-          config={[
-            '',
-            '$lookup.application',
-            'company',
-            'verdict',
-            {
-              key: '',
-              presenter: recruit.component.OpinionsPresenter,
-              label: recruit.string.Opinions,
-              sortingKey: 'opinions'
-            },
-            {
-              key: 'date',
-              presenter: DatePresenter,
-              label: calendar.string.Date,
-              sortingKey: 'date',
-              props: {
-                editable: false,
-                mode: DateRangeMode.DATE
-              }
-            }
-          ]}
-          {options}
-          query={{ attachedTo: objectId }}
-          loadingProps={{ length: reviews }}
-        />
-      </Scroller>
-    {:else}
+    <Scroller horizontal>
       <Table
         _class={recruit.class.Review}
         config={[
@@ -118,7 +86,7 @@
         query={{ attachedTo: objectId }}
         loadingProps={{ length: reviews }}
       />
-    {/if}
+    </Scroller>
   {:else}
     <div class="antiSection-empty solid flex-col-center mt-3">
       <div class="caption-color">

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

@@ -44,7 +44,7 @@
       }}
     >
       <div class="color" style:background-color={getPlatformColor(value.color ?? 0)} />
-      <span class="overflow-label ml-1 text-sm caption-color">{value.title}</span>
+      <span class="overflow-label ml-1 text-sm caption-color max-w-40">{value.title}</span>
     </button>
   {:else if kind === 'labels'}
     <div
@@ -55,7 +55,7 @@
       }}
     >
       <div class="color" style:background-color={getPlatformColor(value.color ?? 0)} />
-      <span class="overflow-label ml-1-5 caption-color">
+      <span class="overflow-label ml-1-5 caption-color max-w-40">
         {value.title}
       </span>
       {#if isEditable}

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

@@ -17,16 +17,7 @@
   import { Asset, IntlString, translate } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { TagCategory, TagElement } from '@hcengineering/tags'
-  import {
-    AnySvelteComponent,
-    Button,
-    ActionIcon,
-    IconMoreH,
-    Label,
-    SearchEdit,
-    showPopup,
-    IconAdd
-  } from '@hcengineering/ui'
+  import { AnySvelteComponent, Button, Label, SearchEdit, showPopup, IconAdd } from '@hcengineering/ui'
   import { TableBrowser } from '@hcengineering/view-resources'
   import tags from '../plugin'
   import CategoryBar from './CategoryBar.svelte'
@@ -110,7 +101,7 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={() => updateResultQuery(search, category)} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
 </div>
 

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

@@ -29,10 +29,8 @@
     FilterBar
   } from '@hcengineering/view-resources'
   import {
-    ActionIcon,
     Button,
     IconAdd,
-    IconMoreH,
     Label,
     SearchEdit,
     TabItem,
@@ -137,14 +135,14 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} />
-    <ActionIcon icon={IconMoreH} size="small" />
+    <!-- <ActionIcon icon={IconMoreH} size="small" /> -->
     <div class="buttons-divider" />
     <FilterButton _class={tracker.class.Component} {space} />
   </div>
   <div class="ac-header-full medium-gap">
     {#if viewlet}
       <ViewletSettingButton bind:viewOptions {viewlet} />
-      <ActionIcon icon={IconMoreH} size="small" />
+      <!-- <ActionIcon icon={IconMoreH} size="small" /> -->
     {/if}
   </div>
 </div>

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

@@ -92,114 +92,58 @@
   $: icon = getIcon()
 </script>
 
-<div class="root" in:fade out:fade>
-  {#if icon}
-    <Icon {icon} size="medium" fill={getIconColor()} />
-  {/if}
-
-  <div class="content">
-    <div class="title">
-      {title}
-    </div>
-    <div class="row">
-      <div class="issue">
-        {#if status}
-          <IssueStatusIcon value={status} size="small" />
-        {/if}
-        {#if issue}
-          <IssuePresenter value={issue} />
-        {/if}
-        <div class="sub-title">
-          {subTitle}
-        </div>
-        <div class="postfix">
-          {params?.subTitlePostfix}
-        </div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="view-issue-button">
-        <Button label={tracker.string.ViewIssue} kind="link" size="medium" on:click={handleIssueOpened} />
-      </div>
-      <div class="copy-link-button">
-        <Button
-          icon={tracker.icon.CopyURL}
-          kind={'link'}
-          label={tracker.string.CopyIssueUrl}
-          on:click={handleCopyUrl}
-        />
-      </div>
+<div class="notify-container" in:fade out:fade>
+  <div class="flex-between">
+    <div class="flex-row-center">
+      {#if icon}
+        <div class="mr-2"><Icon {icon} size="medium" fill={getIconColor()} /></div>
+      {/if}
+      <span class="overflow-label fs-bold caption-color">{title}</span>
     </div>
+    <Button icon={IconClose} kind="transparent" size="small" on:click={onRemove} />
   </div>
 
-  <div class="close-button">
-    <Button icon={IconClose} kind="transparent" size="small" on:click={onRemove} />
+  <div class="content flex-row-center flex-wrap gap-2 reverse">
+    {#if status}
+      <IssueStatusIcon value={status} size="small" />
+    {/if}
+    {#if issue}
+      <IssuePresenter value={issue} />
+    {/if}
+    <span class="overflow-label">
+      {subTitle}
+    </span>
+    <span class="content-dark-color">
+      {params?.subTitlePostfix}
+    </span>
+  </div>
+  <div class="flex-between">
+    <Button label={tracker.string.ViewIssue} on:click={handleIssueOpened} />
+    <Button icon={tracker.icon.CopyURL} label={tracker.string.CopyIssueUrl} on:click={handleCopyUrl} />
   </div>
 </div>
 
 <style lang="scss">
-  .root {
-    position: relative;
-    display: flex;
-    margin: 10px;
-    box-shadow: 0 4px 10px var(--divider-color);
-    height: 100px;
-    width: 400px;
+  .notify-container {
     overflow: hidden;
-    color: var(--caption-color);
-    background-color: var(--body-color);
-    border: 1px solid var(--divider-color);
-    border-radius: 6px;
-    padding: 10px;
-  }
-
-  .sub-title {
-    max-width: 210px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .content {
-    margin-left: 10px;
-  }
-
-  .issue {
     display: flex;
-    align-items: center;
-    gap: 5px;
-  }
+    flex-direction: column;
+    margin: 0.75rem;
+    padding: 0.5rem;
+    min-width: 25rem;
+    min-height: 7rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-popup-color);
+    border: 1px solid var(--theme-popup-divider);
+    border-radius: 0.5rem;
+    box-shadow: var(--theme-popup-shadow);
 
-  .view-issue-button {
-    margin-top: 10px;
-    margin-left: -5px;
-  }
-
-  .copy-link-button {
-    margin-top: 10px;
-    margin-left: 5px;
-  }
-
-  .title {
-    display: flex;
-    align-items: center;
-    color: var(--caption-color);
-    font-weight: 500;
-    margin-bottom: 10px;
-  }
-
-  .close-button {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-  }
-
-  .row {
-    display: flex;
-    align-items: center;
-  }
-
-  .postfix {
-    color: var(--dark-color);
+    .content {
+      flex-grow: 1;
+      margin: 1rem 0 1.25rem;
+      padding: 0 1rem;
+      // border: 1px solid var(--theme-divider-color);
+      border-radius: 0.5rem;
+    }
   }
 </style>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Ref, Space } from '@hcengineering/core'
-  import { ActionIcon, TabList, SearchEdit, IconMoreH } from '@hcengineering/ui'
+  import { TabList, SearchEdit } from '@hcengineering/ui'
   import { Viewlet } from '@hcengineering/view'
   import { FilterButton, setActiveViewletId } from '@hcengineering/view-resources'
   import tracker from '../../plugin'
@@ -56,12 +56,12 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={() => {}} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     <div class="buttons-divider" />
     <FilterButton _class={tracker.class.Issue} {space} />
   </div>
   <div class="ac-header-full medium-gap">
     <slot name="extra" />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
 </div>

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

@@ -18,10 +18,8 @@
   import { createQuery } from '@hcengineering/presentation'
   import { Sprint } from '@hcengineering/tracker'
   import {
-    ActionIcon,
     Button,
     IconAdd,
-    IconMoreH,
     Label,
     SearchEdit,
     TabItem,
@@ -138,14 +136,14 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={() => {}} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     <div class="buttons-divider" />
     <FilterButton _class={tracker.class.Issue} {space} />
   </div>
   <div class="ac-header-full medium-gap">
     {#if viewlet}
       <ViewletSettingButton bind:viewOptions {viewlet} />
-      <ActionIcon icon={IconMoreH} size={'small'} />
+      <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     {/if}
   </div>
 </div>

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

@@ -15,16 +15,15 @@
 -->
 <script lang="ts">
   import { resizeObserver } from '@hcengineering/ui'
-  import { afterUpdate, onDestroy } from 'svelte'
+  import { afterUpdate } from 'svelte'
   import { fixedWidthStore } from '../utils'
 
   export let key: string
   export let justify: string = ''
   export let addClass: string | undefined = undefined
-  let prevKey = key
-  let element: HTMLDivElement | undefined
 
   let cWidth: number | undefined = undefined
+  let prevKey = key
 
   afterUpdate(() => {
     if (cWidth !== undefined) {
@@ -39,21 +38,11 @@
 
   function resize (element: Element) {
     cWidth = element.clientWidth
-    if (cWidth > ($fixedWidthStore[key] ?? 0)) {
-      $fixedWidthStore[key] = cWidth
-    }
+    if (cWidth > ($fixedWidthStore[key] ?? 0)) $fixedWidthStore[key] = cWidth
   }
-
-  onDestroy(() => {
-    if (cWidth === $fixedWidthStore[key]) {
-      // If we are longest element
-      $fixedWidthStore[key] = 0
-    }
-  })
 </script>
 
 <div
-  bind:this={element}
   class="flex-no-shrink{addClass ? ` ${addClass}` : ''}"
   style:text-align={justify !== '' ? justify : ''}
   style:min-width={`${$fixedWidthStore[key] ?? 0}px`}

plugins/view-resources/src/components/list/ListCategories.svelte

@@ -26,7 +26,8 @@
     getCategories,
     getGroupByValues,
     getPresenter,
-    groupBy
+    groupBy,
+    fixedWidthStore
   } from '../../utils'
   import { CategoryQuery, noCategory } from '../../viewOptions'
   import ListCategory from './ListCategory.svelte'
@@ -112,6 +113,10 @@
   $: getHeader(_class, groupByKey)
   $: buildModel({ client, _class, keys: config, lookup }).then((res) => {
     itemModels = res
+    res.forEach((m) => {
+      const key = `list_item_${m.props?.listProps.key}`
+      if (m.props?.listProps?.fixed) $fixedWidthStore[key] = 0
+    })
   })
 
   function getInitIndex (categories: any, i: number): number {

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

@@ -34,9 +34,7 @@
     navigate,
     Scroller,
     SearchEdit,
-    showPopup,
-    IconMoreH,
-    ActionIcon
+    showPopup
   } from '@hcengineering/ui'
   import { FilterBar, FilterButton, SpacePresenter } from '@hcengineering/view-resources'
   import plugin from '../plugin'
@@ -134,7 +132,7 @@
           update(sort, resultQuery)
         }}
       />
-      <ActionIcon icon={IconMoreH} size={'small'} />
+      <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
       <div class="buttons-divider" />
       {#if withFilterButton}
         <FilterButton {_class} />

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

@@ -18,11 +18,9 @@
   import { IntlString } from '@hcengineering/platform'
   import presentation, { createQuery } from '@hcengineering/presentation'
   import {
-    ActionIcon,
     AnyComponent,
     Button,
     IconAdd,
-    IconMoreH,
     SearchEdit,
     TabList,
     resolvedLocationStore,
@@ -117,13 +115,13 @@
   <div class="ac-header full divide search-start">
     <div class="ac-header-full small-gap">
       <SearchEdit bind:value={search} on:change={() => dispatch('search', search)} />
-      <ActionIcon icon={IconMoreH} size={'small'} />
+      <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
       <div class="buttons-divider" />
       <FilterButton {_class} />
     </div>
     <div class="ac-header-full medium-gap">
       <ViewletSettingButton bind:viewOptions {viewlet} />
-      <ActionIcon icon={IconMoreH} size={'small'} />
+      <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     </div>
   </div>
 {:else}

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

@@ -17,12 +17,10 @@
   import { Asset, IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import {
-    ActionIcon,
     AnyComponent,
     Button,
     Component,
     IconAdd,
-    IconMoreH,
     Label,
     Loading,
     SearchEdit,
@@ -178,13 +176,13 @@
 <div class="ac-header full divide search-start">
   <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     <div class="buttons-divider" />
     <FilterButton {_class} />
   </div>
   <div class="ac-header-full medium-gap">
     <ViewletSettingButton bind:viewOptions {viewlet} />
-    <ActionIcon icon={IconMoreH} size={'small'} />
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
 </div>
 

tests/sanity/tests/hr.spec.ts

@@ -6,7 +6,7 @@ test.use({
 })
 
 export async function createDepartment (page: Page, departmentName: string): Promise<void> {
-  await page.click('text=Structure Department Organization no employees >> button >> nth=2')
+  await page.click('button:has-text("Department")')
   const departmentNameField = page.locator('[placeholder="Department"]')
   await departmentNameField.click()
   await departmentNameField.fill(departmentName)

tests/sanity/tests/tracker.layout.spec.ts

@@ -95,7 +95,7 @@ test.describe('tracker layout tests', () => {
   let issuesProps: IssueProps[] = []
   const orders = ['Status', 'Modified', 'Priority'] as const
   const groups = ['Status', 'Assignee', 'Priority', 'Component', 'Sprint', 'No grouping'] as const
-  const groupsLabels: { [key in typeof groups[number]]?: string[] } = {
+  const groupsLabels: { [key in (typeof groups)[number]]?: string[] } = {
     Status: DEFAULT_STATUSES,
     Assignee: [DEFAULT_USER, 'Chen Rosamund'],
     Priority: PRIORITIES,