Updated layout of the Chat navigator (#5537)

Signed-off-by: Alexander Platov <[email protected]>
hcengineering · May 8, 2024 · bf80ba0 · bf80ba0
1 parent 5584f27
commit bf80ba0
Show file tree

Hide file tree

Showing 16 changed files with 271 additions and 368 deletions.
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
@@ -680,6 +680,7 @@ input.search {
 .w-min { width: min-content; }
 .w-max { width: max-content; }
 .w-full { width: 100%;  }
+.w-auto { width: auto !important;  }
 .w-2 { width: .5rem; }
 .w-4 { width: 1rem; }
 .w-6 { width: 1.5rem; }

diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
@@ -399,6 +399,17 @@
       }
     }
 
+    &.small .hulyAccordionItem-header__chevron {
+      margin: 0 0.125rem;
+      width: 1.25rem;
+      height: 1.25rem;
+      border: 1px solid transparent;
+    }
+    &.medium .hulyAccordionItem-header__chevron {
+      margin-right: var(--spacing-0_75);
+      background-color: var(--global-ui-BackgroundColor);
+      border: 1px solid var(--global-subtle-ui-BorderColor);
+    }
     &.small,
     &.medium {
       padding: var(--spacing-1) var(--spacing-2);
@@ -413,11 +424,6 @@
         text-transform: uppercase;
       }
 
-      .hulyAccordionItem-header__chevron {
-        background-color: var(--global-ui-BackgroundColor);
-        border: 1px solid var(--global-subtle-ui-BorderColor);
-      }
-
       &:hover {
         .hulyAccordionItem-header__label {
           color: var(--global-primary-TextColor);
@@ -516,10 +522,10 @@
           color: var(--global-secondary-TextColor);
         }
       }
-      &:hover .hulyAccordionItem-header__chevron {
-        color: var(--button-subtle-IconColor);
-        background-color: var(--global-ui-hover-BackgroundColor);
-      }
+    }
+    &:hover .hulyAccordionItem-header__chevron {
+      color: var(--button-subtle-IconColor);
+      background-color: var(--global-ui-hover-BackgroundColor);
     }
 
     &.isOpen {
@@ -533,13 +539,11 @@
       &.medium.bottomSpace + .hulyAccordionItem-content {
         padding-bottom: var(--spacing-2);
       }
-      &.large {
-        .hulyAccordionItem-header__chevron > * {
-          transform: rotate(90deg);
-        }
-        &.bottomSpace + .hulyAccordionItem-content {
-          padding-bottom: var(--spacing-2);
-        }
+      &.large.bottomSpace + .hulyAccordionItem-content {
+        padding-bottom: var(--spacing-2);
+      }
+      &:is(.small, .large) .hulyAccordionItem-header__chevron > * {
+        transform: rotate(90deg);
       }
     }  
   }

diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
@@ -30,6 +30,14 @@
     border-radius: var(--small-focus-BorderRadius);
   }
 }
+.hulyNavPanel-container a.noUnderline {
+  display: inline-flex;
+  flex-shrink: 0;
+  min-width: 0;
+  min-height: 0;
+
+  button.type-link { width: 100%; }
+}
 .hulyNavPanel-container .hulyNavItem-container,
 .hulyNavPanel-container .hulyTaskNavLink-container {
   margin: 0 0.75rem;

diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte
@@ -29,6 +29,7 @@
   export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
   export let placeholderParam: any | undefined = undefined
   export let autoFocus: boolean = false
+  export let kind: 'ghost' | 'secondary' = 'ghost'
   export let size: 'small' | 'medium' | 'large' = 'medium'
   export let loading = false
 
@@ -52,7 +53,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="flex-between editbox {size}"
+  class="flex-between editbox {kind} {size}"
   style={width != null ? 'width: ' + width : ''}
   on:click={() => {
     textHTML.focus()
@@ -116,5 +117,12 @@
         color: var(--theme-dark-color);
       }
     }
+
+    &.secondary {
+      padding: var(--spacing-1);
+      background-color: var(--theme-button-default);
+      border: 1px solid var(--theme-button-border);
+      border-radius: var(--small-BorderRadius);
+    }
   }
 </style>
diff --git a/packages/ui/src/components/NavGroup.svelte b/packages/ui/src/components/NavGroup.svelte
@@ -13,29 +13,56 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
   import type { IntlString } from '@hcengineering/platform'
   import type { AnyComponent } from '..'
-  import { Label, Component } from '..'
+  import { showPopup, Menu, Action, Label, Component, IconOpenedArrow } from '..'
 
   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
+  export let isFold: boolean = false
   export let selected: boolean = false
   export let second: boolean = false
+  export let actions: Action[] = []
+
+  const dispatch = createEventDispatcher()
 
   $: id = `navGroup-${categoryName}`
+
+  const toggle = (): void => {
+    isOpen = !isOpen
+    dispatch('toggle', isOpen)
+  }
+
+  function handleMenuClicked (ev: MouseEvent): void {
+    if (actions.length === 0) return
+    showPopup(Menu, { actions }, ev.target as HTMLElement)
+  }
 </script>
 
 <div class="hulyAccordionItem-container" class:second>
-  <button class="hulyAccordionItem-header nav small" class:isOpen class:selected on:click={() => (isOpen = !isOpen)}>
+  <button class="hulyAccordionItem-header nav small" class:isOpen class:selected on:click={toggle}>
+    {#if isFold}
+      <button class="hulyAccordionItem-header__chevron" class:collapsed={!isOpen}>
+        <IconOpenedArrow size={'small'} />
+      </button>
+    {/if}
     <div class="hulyAccordionItem-header__label-wrapper font-medium-12">
-      <span class="hulyAccordionItem-header__label">
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <span
+        class="hulyAccordionItem-header__label"
+        class:cursor-default={actions.length === 0}
+        on:click|stopPropagation={handleMenuClicked}
+      >
         {#if label}<Label {label} />{/if}
         {#if title}{title}{/if}
       </span>
     </div>
+    {#if isFold}<div class="flex-grow" />{/if}
     {#if tools || $$slots.tools}
       <div class="hulyAccordionItem-header__tools">
         {#if tools}