Updated office layout (#5051)

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

packages/theme/styles/_layouts.scss

@@ -810,6 +810,10 @@ input.search {
   &:active { color: var(--theme-caption-color); }
 }
 
+.will-change-opacity {
+  will-change: opacity;
+}
+
 /* Link */
 a.no-line {
   text-decoration: none;

packages/theme/styles/components.scss

@@ -45,8 +45,10 @@
 }
 .hulyComponent-content {
   flex-shrink: 0;
-  max-width: 64rem;
 
+  &:not(.withoutMaxWidth) {
+    max-width: 64rem;
+  }
   &.gap {
     gap: var(--spacing-4);
   }
@@ -315,6 +317,9 @@
     border: none;
     outline: none;
 
+    &.disabled {
+      cursor: default;
+    }
     &__label-wrapper {
       display: flex;
       align-items: center;
@@ -372,6 +377,25 @@
       font-weight: 400;
     }
 
+    &.categoryHeader {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }  
+    &.selectable.large {
+      .hulyAccordionItem-header__label-wrapper {
+        gap: var(--spacing-0_25);
+      }
+      .hulyAccordionItem-header__label {
+        padding: var(--spacing-0_5) var(--spacing-1);
+        border-radius: var(--extra-small-BorderRadius);
+      }
+      &.selected .hulyAccordionItem-header__label,
+      .hulyAccordionItem-header__label:hover {
+        background-color: var(--global-ui-hover-BackgroundColor);
+      }
+    }
+
     &.small,
     &.medium {
       padding: var(--spacing-1) var(--spacing-2);

packages/theme/styles/panel.scss

@@ -38,11 +38,21 @@
   margin-top: 0.75rem;
 }
 .hulyNavPanel-header {
-  padding: 1rem 1.25rem 1.5rem;
+  flex-shrink: 0;
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 1.5rem;
   color: var(--global-primary-TextColor);
+
+  &:not(.withButton) { padding: 1rem 1.25rem 1.5rem; }
+  &.withButton {
+    display: flex;
+    justify-content: space-between;
+    padding: .75rem .75rem 1.5rem 1.25rem;
+    min-width: 0;
+    min-height: 0;
+  }
+  &.small { padding-bottom: .75rem; }
 }
 .hulySidePanel-container {
   display: flex;

packages/ui/src/components/AccordionItem.svelte

@@ -14,6 +14,7 @@
 -->
 
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
   import type { Asset, IntlString } from '@hcengineering/platform'
   import type { ComponentType } from 'svelte'
   import type { AnySvelteComponent } from '../types'
@@ -30,17 +31,25 @@
   export let size: 'small' | 'medium' | 'large'
   export let kind: 'default' | 'second' = 'default'
   export let nested: boolean = false
+  export let isOpen: boolean = false
+  export let disabled: boolean = false
   export let selected: boolean = false
+  export let selectable: boolean = false
   export let bottomSpace: boolean = true
   export let counter: number | boolean = false
   export let duration: number | boolean = false
   export let fixHeader: boolean = false
+  export let categoryHeader: boolean = false
   export let background: string | undefined = undefined
 
+  const dispatch = createEventDispatcher()
+
   let collapsed: boolean = getTreeCollapsed(id)
+  if (isOpen) collapsed = false
   $: setTreeCollapsed(id, collapsed)
 
   function handleClick (): void {
+    if (disabled) return
     collapsed = !collapsed
   }
 </script>
@@ -50,11 +59,14 @@
     class="hulyAccordionItem-header {kind} {size}"
     class:bottomSpace
     class:nested
+    class:disabled
     class:isOpen={!collapsed}
     class:selected
+    class:selectable
     class:scroller-header={fixHeader}
+    class:categoryHeader
     style:background-color={background ?? 'transparent'}
-    on:click={handleClick}
+    on:click|stopPropagation={handleClick}
   >
     <div
       class="hulyAccordionItem-header__label-wrapper {size === 'large' ? 'heading-medium-16' : 'font-medium-12'}"
@@ -70,11 +82,19 @@
           <Icon {icon} size={size === 'medium' ? 'small' : 'medium'} {iconProps} />
         </div>
       {/if}
-      <span class="hulyAccordionItem-header__label">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div
+        class="hulyAccordionItem-header__label"
+        on:click|stopPropagation={() => {
+          if (selectable) dispatch('select')
+          else handleClick()
+        }}
+      >
         {#if label}<Label {label} />{/if}
         {#if title}{title}{/if}
         <slot name="title" />
-      </span>
+      </div>
       {#if counter !== false}
         <span class="hulyAccordionItem-header__separator">•</span>
         <span class="hulyAccordionItem-header__counter">

packages/ui/src/components/ButtonBase.svelte

@@ -88,7 +88,7 @@
   class:menu={hasMenu}
   disabled={loading || disabled}
   use:tp={tooltip}
-  on:click
+  on:click|stopPropagation
   on:keydown
 >
   {#if loading}

packages/ui/src/components/NavGroup.svelte

@@ -17,7 +17,8 @@
   import type { AnyComponent } from '..'
   import { Label, Component } from '..'
 
-  export let label: IntlString
+  export let label: IntlString | undefined = undefined
+  export let title: string | undefined = undefined
   export let categoryName: string
   export let tools: AnyComponent | undefined = undefined
   export let isOpen: boolean = true
@@ -31,11 +32,13 @@
   <button class="hulyAccordionItem-header nav small" class:isOpen class:selected on:click={() => (isOpen = !isOpen)}>
     <div class="hulyAccordionItem-header__label-wrapper font-medium-12">
       <span class="hulyAccordionItem-header__label">
-        <Label {label} />
+        {#if label}<Label {label} />{/if}
+        {#if title}{title}{/if}
       </span>
     </div>
-    {#if tools}
+    {#if tools || $$slots.tools}
       <div class="hulyAccordionItem-header__tools">
+        {#if tools}
           <Component
             is={tools}
             props={{
@@ -43,6 +46,8 @@
               categoryName
             }}
           />
+        {/if}
+        <slot name="tools" />
       </div>
     {/if}
   </button>

packages/ui/src/resize.ts

@@ -163,6 +163,7 @@ export const settingsSeparators: DefSeparators = [
   null,
   { minSize: 19, size: 30, maxSize: 32, float: 'aside' }
 ]
+export const loveSeparators: DefSeparators = [{ minSize: 26, size: 27, maxSize: 28, float: 'navigator' }, null]
 
 export const secondNavSeparators: DefSeparators = [{ minSize: 7, size: 7.5, maxSize: 15, float: 'navigator' }, null]
 

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

@@ -616,7 +616,7 @@
   defineSeparators('workbench', workbenchSeparators)
 
   let modern: boolean
-  $: modern = ['setting', 'time'].some((app) => currentApplication?.alias === app)
+  $: modern = ['setting', 'time', 'love'].some((app) => currentApplication?.alias === app)
 </script>
 
 {#if employee && !employee.active}