Updated navigator layout (#5619)

Signed-off-by: Alexander Platov <[email protected]>
hcengineering · Jun 5, 2024 · a437926 · a437926
1 parent 07d35f0
commit a437926
Show file tree

Hide file tree

Showing 79 changed files with 1,582 additions and 1,012 deletions.
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
@@ -360,6 +360,7 @@ input.search {
       color: var(--theme-content-color);
     }
   }
+  &.colorInherit .label { color: inherit; }
 }
 .flex-presenter {
   display: flex;

diff --git a/packages/theme/styles/_vars.scss b/packages/theme/styles/_vars.scss
@@ -24,6 +24,7 @@
   --spacing-1_5: 0.75rem;
   --spacing-1_75: 0.875rem;
   --spacing-2: 1rem;
+  --spacing-2_25: 1.125rem;
   --spacing-2_5: 1.25rem;
   --spacing-2_75: 1.375rem;
   --spacing-3: 1.5rem;

diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
@@ -315,7 +315,7 @@
 }
 .antiNav-divider {
   flex-shrink: 0;
-  margin: .5rem 0;
+  margin: .75rem 0;
   height: 1px;
 
   &.line { background-color: var(--theme-navpanel-divider); }

diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
@@ -747,7 +747,7 @@
       &:is(.small, .large) .hulyAccordionItem-header__chevron > * {
         transform: rotate(90deg);
       }
-    }  
+    }
   }
   .hulyAccordionItem-content {
     overflow: hidden;

diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
@@ -39,12 +39,10 @@
   button.type-link { width: 100%; }
 }
 .hulyNavPanel-container .hulyNavItem-container,
-.hulyNavPanel-container .hulyTaskNavLink-container {
+.hulyNavPanel-container .hulyTaskNavLink-container,
+.parentSelector .hulyNavItem-container {
   margin: 0 0.75rem;
 }
-.hulyNavPanel-container .hulyNavItem-container + .hulyAccordionItem-container {
-  margin-top: 0.75rem;
-}
 .hulyNavPanel-header {
   display: flex;
   justify-content: space-between;
@@ -65,6 +63,156 @@
   }
   &.small { padding-bottom: .75rem; }
 }
+
+.hulyNavGroup-container {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+
+  .hulyNavGroup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    margin: 0;
+    padding: var(--spacing-1) var(--spacing-2_25) var(--spacing-1) var(--spacing-2);
+    min-height: var(--global-medium-Size);
+    border: none;
+    outline: none;
+
+    &.disabled { cursor: default; }
+    &__chevron,
+    &__arrow,
+    &__icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    &__chevron {
+      margin: 0 0.125rem;
+      width: 1.25rem;
+      height: 1.25rem;
+      color: var(--global-disabled-TextColor);
+      border: 1px solid transparent;
+      border-radius: var(--extra-small-BorderRadius);
+
+      & > * {
+        transform-origin: center;
+        transform: rotate(0deg);
+        transition: transform 0.1s ease-in-out;
+      }
+      &.collapsed > * { transform: rotate(-90deg); }
+    }
+    &__icon {
+      margin: 0 0.125rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      color: var(--global-primary-TextColor);
+      background-color: var(--theme-navpanel-selected);
+      border: 1px solid var(--global-subtle-ui-BorderColor);
+      border-radius: var(--extra-small-BorderRadius);
+
+      &.folder {
+        background-color: var(--theme-statusbar-color);
+        border-color: var(--global-surface-01-BorderColor);
+      }
+    }
+    &__label {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-0_5);
+      padding: var(--spacing-0_25) var(--spacing-0_5);
+      min-width: 0;
+      text-transform: uppercase;
+      color: var(--global-tertiary-TextColor);
+      border-radius: var(--extra-small-BorderRadius);
+    }
+    &__tools {
+      display: none;
+      align-items: center;
+      flex-shrink: 0;
+      gap: var(--spacing-0_5);
+      margin-left: var(--spacing-1);
+      min-width: 0;
+      max-width: 50%;
+    }
+    &__arrow {
+      margin-left: var(--spacing-0_5);
+      width: var(--global-min-Size);
+      height: var(--global-min-Size);
+      color: var(--global-accent-IconColor);
+    }
+
+    &.showMenu,
+    &.highlighted,
+    &.selected,
+    &:hover {
+      .hulyNavGroup-header__tools { display: flex; }
+    }
+    &.showMenu,
+    &.highlighted,
+    &.selected {
+      .hulyNavGroup-header__label { background-color: var(--global-ui-BackgroundColor); }
+      .hulyNavGroup-header__chevron { color: var(--global-tertiary-TextColor); }
+      .hulyNavGroup-header__label { color: var(--global-secondary-TextColor); }
+    }
+    &.selected { background-color: var(--global-ui-highlight-BackgroundColor); }
+    &.isOpen + .hulyNavGroup-content {
+      max-height: 100%;
+
+      &:not(:has(.nested)) { margin-bottom: var(--spacing-1_5); }
+    }
+  }
+  &.nested .hulyNavGroup-header {
+    .hulyNavGroup-header__icon { margin: 0 var(--spacing-0_25) 0 0; }
+    .hulyNavGroup-header__label { padding: 0 var(--spacing-0_75) 0 0; }
+    &.isOpen .hulyNavGroup-header__label { background-color: var(--global-ui-BackgroundColor); }
+  }
+  .hulyNavGroup-header:hover,
+  &.nested .hulyNavGroup-header:hover {
+    .hulyNavGroup-header__chevron { background-color: var(--global-ui-BackgroundColor); }
+    .hulyNavGroup-header__label { background-color: var(--global-ui-hover-BackgroundColor); }
+    .hulyNavGroup-header__chevron { color: var(--button-subtle-IconColor); }
+    .hulyNavGroup-header__label { color: var(--global-primary-TextColor); }
+  }
+  &.nested.selectable .hulyNavGroup-header {
+    margin: 0 var(--spacing-1_5) var(--spacing-1_5);
+    padding: var(--spacing-0_5) var(--spacing-0_75) var(--spacing-0_5) var(--spacing-0_5);
+    min-height: var(--global-small-Size);
+    border-radius: var(--small-BorderRadius);
+
+    &.selected { padding-right: var(--spacing-0_75); }
+    &.isOpen { margin-bottom: 0; }
+  }
+
+  &:not(.nested, .noDivider),
+  &.noDivider + &.noDivider { border-top: 1px solid var(--theme-navpanel-divider); }
+
+  .hulyNavGroup-content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    min-width: 0;
+    max-height: 0;
+  }
+}
+.hulyNavItem-container + .hulyNavGroup-container,
+.hulyNavPanel-container a.noUnderline + .hulyNavGroup-container { margin-top: .75rem; }
+
+.hulyNavItem-container .hulyNavItem-chevron:enabled {
+  & > * {
+    transform-origin: center;
+    transform: rotate(-90deg);
+    transition: transform 0.1s ease-in-out;
+  }
+  &.isOpen > * { transform: rotate(0deg); }
+}
+
 .hulySidePanel-container {
   display: flex;
   flex-direction: column;

diff --git a/packages/ui/src/components/ButtonBase.svelte b/packages/ui/src/components/ButtonBase.svelte
@@ -49,6 +49,7 @@
   } else if (type === 'type-button' && !hasMenu) {
     actualIconSize = 'medium'
   }
+  $: iconOnly = title === undefined && label === undefined && $$slots.default === undefined && icon !== undefined
 
   export function focus () {
     element?.focus()
@@ -94,6 +95,7 @@
   class:inheritColor
   class:inheritFont
   class:menu={hasMenu}
+  class:iconOnly
   disabled={loading || disabled}
   use:tp={tooltip}
   on:click|stopPropagation
@@ -153,9 +155,10 @@
       height: var(--global-large-Size);
       border-radius: var(--medium-BorderRadius);
 
-      &.type-button {
+      &.type-button:not(.iconOnly) {
         padding: 0 var(--spacing-2);
       }
+      &.iconOnly,
       &.type-button-icon {
         width: var(--global-large-Size);
       }
@@ -164,9 +167,10 @@
       height: var(--global-medium-Size);
       border-radius: var(--medium-BorderRadius);
 
-      &.type-button {
+      &.type-button:not(.iconOnly) {
         padding: 0 var(--spacing-2);
       }
+      &.iconOnly,
       &.type-button-icon {
         width: var(--global-medium-Size);
       }
@@ -176,9 +180,10 @@
       gap: var(--spacing-0_5);
       border-radius: var(--small-BorderRadius);
 
-      &.type-button {
+      &.type-button:not(.iconOnly) {
         padding: 0 var(--spacing-1);
       }
+      &.iconOnly,
       &.type-button-icon {
         width: var(--global-small-Size);
       }
@@ -187,9 +192,10 @@
       height: var(--global-extra-small-Size);
       border-radius: var(--extra-small-BorderRadius);
 
-      &.type-button {
+      &.type-button:not(.iconOnly) {
         padding: 0 var(--spacing-1);
       }
+      &.iconOnly,
       &.type-button-icon {
         width: var(--global-extra-small-Size);
       }

diff --git a/packages/ui/src/components/ButtonIcon.svelte b/packages/ui/src/components/ButtonIcon.svelte
@@ -30,6 +30,7 @@
   export let inheritColor: boolean = false
   export let tooltip: LabelAndProps | undefined = undefined
   export let focusIndex = -1
+  export let id: string | undefined = undefined
 
   let element: ButtonBase | undefined
 
@@ -53,6 +54,7 @@
   {hasMenu}
   {tooltip}
   {focusIndex}
+  {id}
   on:click
   on:keydown
 />
diff --git a/packages/ui/src/components/ButtonMenu.svelte b/packages/ui/src/components/ButtonMenu.svelte
@@ -16,7 +16,7 @@
   import type { Asset, IntlString } from '@hcengineering/platform'
   import { deepEqual } from 'fast-equals'
   import { ComponentType, createEventDispatcher } from 'svelte'
-  import { closePopup, showPopup } from '..'
+  import { closePopup, showPopup, type LabelAndProps, closeTooltip } from '..'
   import { AnySvelteComponent, DropdownIntlItem } from '../types'
   import ButtonBase from './ButtonBase.svelte'
   import ModernPopup from './ModernPopup.svelte'
@@ -32,6 +32,8 @@
   export let loading: boolean = false
   export let inheritColor: boolean = false
   export let noSelection: boolean = false
+  export let autoSelectionIfOne: boolean = false
+  export let tooltip: LabelAndProps | undefined = undefined
 
   export let items: DropdownIntlItem[]
   export let params: Record<string, any> = {}
@@ -46,7 +48,13 @@
 
   function openPopup () {
     if (!opened) {
+      if (autoSelectionIfOne && items.length === 1) {
+        selected = items[0].id
+        dispatch('selected', selected)
+        return
+      }
       opened = true
+      closeTooltip()
       showPopup(ModernPopup, { items, selected: noSelection ? undefined : selected, params }, element, (result) => {
         if (result) {
           selected = result
@@ -86,5 +94,6 @@
   pressed={opened}
   {focusIndex}
   {id}
+  {tooltip}
   on:click={openPopup}
 />
diff --git a/packages/ui/src/components/Fold.svelte b/packages/ui/src/components/Fold.svelte
@@ -15,10 +15,10 @@
 <script lang="ts">
   export let isOpen: boolean
   export let empty: boolean = false
-  export let level: number = 1
+  export let level: number = 0
 </script>
 
-<div class="hulyFold-container" class:opened={isOpen && !empty} style:margin-left={`${(level - 1) * 1.5}rem`}>
+<div class="hulyFold-container" class:opened={isOpen && !empty} style:margin-left={`${level * 1.5}rem`}>
   <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     {#if empty}
       <path

diff --git a/packages/ui/src/components/ModernButton.svelte b/packages/ui/src/components/ModernButton.svelte
@@ -23,6 +23,7 @@
   export let inheritFont: boolean = false
   export let focusIndex = -1
   export let tooltip: LabelAndProps | undefined = undefined
+  export let id: string | undefined = undefined
 </script>
 
 <ButtonBase
@@ -41,6 +42,7 @@
   {focusIndex}
   {tooltip}
   {autoFocus}
+  {id}
   on:click
 >
   <slot />