UBERF-4205: updated Panel header layout, custom aside

models/hr/src/index.ts

@@ -296,7 +296,7 @@ export function createModel (builder: Builder): void {
     builder,
     {
       action: view.actionImpl.ShowPanel,
-      actionProps: {},
+      actionProps: { element: 'content' },
       label: view.string.Open,
       icon: view.icon.Open,
       keyBinding: ['e'],
@@ -353,7 +353,7 @@ export function createModel (builder: Builder): void {
     builder,
     {
       action: view.actionImpl.ShowPanel,
-      actionProps: {},
+      actionProps: { element: 'content' },
       label: view.string.Open,
       icon: view.icon.Open,
       keyBinding: ['e'],

packages/panel/src/components/Panel.svelte

@@ -14,25 +14,15 @@
     // limitations under the License.
 -->
 <script lang="ts">
-  import { afterUpdate } from 'svelte'
+  import { afterUpdate, createEventDispatcher } from 'svelte'
   import { Writable, writable } from 'svelte/store'
 
   import activity from '@hcengineering/activity'
-  import calendar from '@hcengineering/calendar'
   import { Doc } from '@hcengineering/core'
-  import { Asset } from '@hcengineering/platform'
-  import {
-    AnySvelteComponent,
-    Component,
-    deviceOptionsStore as deviceInfo,
-    Icon,
-    Panel,
-    Scroller
-  } from '@hcengineering/ui'
+  import { Component, deviceOptionsStore as deviceInfo, Panel, Scroller } from '@hcengineering/ui'
+  import type { ButtonItem } from '@hcengineering/ui'
 
   export let title: string | undefined = undefined
-  export let subtitle: string | undefined = undefined
-  export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let withoutActivity: boolean = false
   export let withoutInput: boolean = false
   export let withoutTitle: boolean = false
@@ -44,21 +34,30 @@
   export let isAside: boolean = true
   export let isUtils: boolean = true
   export let isCustomAttr: boolean = true
-  export let isReminder: boolean = true
-  export let floatAside = false
-  export let allowBack = true
-  export let allowClose = true
+  export let floatAside: boolean = false
+  export let allowClose: boolean = true
   export let useMaxWidth: boolean | undefined = undefined
-  export let isFullSize = false
-  export let embedded = false
+  export let isFullSize: boolean = false
   export let contentClasses: string | undefined = undefined
   export let content: HTMLElement | undefined | null = undefined
   export let withoutContentScroll: boolean = false
+  export let customAside: ButtonItem[] | undefined = undefined
+  export let selectedAside: string | false = customAside ? customAside[0].id : false
+
+  export function getAside (): string | false {
+    return selectedAside
+  }
+  export function setAside (id: string | boolean): void {
+    panel.setAside(id)
+  }
+
+  const dispatch = createEventDispatcher()
 
   let lastHref: string
   let timer: any
   let lastScrollHeight: number = -1
   let count: number = 0
+  let panel: Panel
 
   const waitCount = 10
   const PanelScrollTop: Writable<Record<string, number>> = writable<Record<string, number>>({})
@@ -93,60 +92,41 @@
 </script>
 
 <Panel
+  bind:this={panel}
   bind:isAside
   {isHeader}
   bind:panelWidth
   bind:innerWidth
   bind:withoutTitle
   on:open
   on:close
-  {allowBack}
   {allowClose}
   {floatAside}
-  {embedded}
   bind:useMaxWidth
   {isFullSize}
+  {customAside}
+  bind:selectedAside
+  on:select={(result) => {
+    selectedAside = result.detail
+    dispatch('select', result.detail)
+  }}
 >
-  <svelte:fragment slot="navigator">
-    {#if $$slots.navigator}
-      <div class="flex-row-center flex-gap-1-5 mx-2">
-        <slot name="navigator" />
-      </div>
-    {/if}
-  </svelte:fragment>
-
   <svelte:fragment slot="title">
     {#if !withoutTitle}
-      <div class="popupPanel-title__content-container antiTitle">
-        {#if $$slots.title}
-          <slot name="title" />
-        {:else}
-          <div class="icon-wrapper">
-            {#if icon}<div class="wrapped-icon"><Icon {icon} size={'medium'} /></div>{/if}
-            <div class="title-wrapper">
-              {#if title}<span class="wrapped-title">{title}</span>{/if}
-              {#if subtitle || $$slots.subtitle}
-                <span class="wrapped-subtitle">
-                  {#if subtitle}
-                    {subtitle}
-                  {/if}
-                  <slot name="subtitle" />
-                </span>
-              {/if}
-            </div>
-          </div>
-        {/if}
-      </div>
+      {#if $$slots.title}
+        <slot name="title" />
+      {:else if title}
+        <div class="title not-active">{title}</div>
+      {/if}
     {/if}
   </svelte:fragment>
 
-  <svelte:fragment slot="utils">
+  <svelte:fragment slot="pre-utils">
     <slot name="pre-utils" />
-    {#if isReminder}
-      <Component is={calendar.component.DocReminder} props={{ value: object, title, focusIndex: 9000 }} />
-    {/if}
+  </svelte:fragment>
+  <svelte:fragment slot="utils">
     {#if isUtils && $$slots.utils}
-      <div class="buttons-divider" />
+      <!-- <div class="buttons-divider" /> -->
       <slot name="utils" />
     {/if}
   </svelte:fragment>
@@ -202,7 +182,7 @@
         {#key object._id}
           <Component
             is={activity.component.Activity}
-            props={{ object, showCommenInput: !withoutInput, shouldScroll: embedded, focusIndex: 1000 }}
+            props={{ object, showCommenInput: !withoutInput, shouldScroll: true, focusIndex: 1000 }}
           />
         {/key}
       {/if}
@@ -221,7 +201,7 @@
             props={{
               object,
               showCommenInput: !withoutInput,
-              shouldScroll: embedded,
+              shouldScroll: true,
               focusIndex: 1000,
               boundary: content
             }}
@@ -247,7 +227,7 @@
               props={{
                 object,
                 showCommenInput: !withoutInput,
-                shouldScroll: embedded,
+                shouldScroll: true,
                 focusIndex: 1000,
                 boundary: content
               }}

packages/presentation/src/components/breadcrumbs/Breadcrumbs.svelte

@@ -13,55 +13,52 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Component, ScrollerBar, getPlatformColor, themeStore } from '@hcengineering/ui'
+  import { Component, SelectPopup, showPopup } from '@hcengineering/ui'
+  import type { MouseTargetEvent } from '@hcengineering/ui'
   import { NavLink } from '../..'
-  import BreadcrumbsElement from './BreadcrumbsElement.svelte'
   import { BreadcrumbsModel } from './types'
   import { hasComponent } from './utils'
 
   export let models: readonly BreadcrumbsModel[]
-  export let gap: 'none' | 'small' | 'big' = 'small'
 
-  let scroller: HTMLElement
+  $: trimmed = models.length > 3
+  $: narrowModel = trimmed ? [models[0], models[models.length - 1]] : models
 
-  function getPosition (position: number): 'start' | 'end' | 'middle' {
-    if (position === 0) {
-      return 'start'
-    }
-
-    if (position === models.length - 1) {
-      return 'end'
-    }
-
-    return 'middle'
+  const handleMenuOpened = (event: MouseTargetEvent) => {
+    event.preventDefault()
+    const items = models.slice(1, -1).map((m, i) => {
+      if (hasComponent(m)) {
+        const { component, props } = m
+        return { id: i, component, props }
+      } else {
+        const { title } = m
+        return { id: i, text: title }
+      }
+    })
+    showPopup(SelectPopup, { value: items }, event.currentTarget)
   }
 </script>
 
-<ScrollerBar {gap} bind:scroller>
-  {#each models as model, i}
-    {@const { color } = model}
-    {#if hasComponent(model)}
-      {@const { component, props } = model}
-      <BreadcrumbsElement
-        position={getPosition(i)}
-        color={color !== undefined ? getPlatformColor(color, $themeStore.dark) : 'var(--accent-bg-color)'}
-      >
-        {#if typeof component === 'string'}
-          <Component is={component} {props} />
-        {:else}
-          <svelte:component this={component} {...props} />
-        {/if}
-      </BreadcrumbsElement>
-    {:else}
-      {@const { title, href, onClick } = model}
-      <NavLink {href} noUnderline {onClick}>
-        <BreadcrumbsElement
-          label={title}
-          {title}
-          position={getPosition(i)}
-          color={color !== undefined ? getPlatformColor(color, $themeStore.dark) : 'var(--accent-bg-color)'}
-        />
-      </NavLink>
-    {/if}
-  {/each}
-</ScrollerBar>
+{#each narrowModel as model, i}
+  {#if hasComponent(model)}
+    {@const { component, props } = model}
+    <div class="title">
+      {#if typeof component === 'string'}
+        <Component is={component} {props} />
+      {:else}
+        <svelte:component this={component} {...props} />
+      {/if}
+    </div>
+  {:else}
+    {@const { title, href, onClick } = model}
+    <NavLink {href} noUnderline {onClick}>
+      <div class="title">{title}</div>
+    </NavLink>
+  {/if}
+  <div class="title disabled">/</div>
+  {#if trimmed && i === 0}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="title" on:click={handleMenuOpened}>...</div>
+    <div class="title disabled">/</div>
+  {/if}
+{/each}

packages/theme/styles/_colors.scss

@@ -102,6 +102,13 @@
   --theme-button-disabled: transparent;
   --theme-button-border: rgba(255, 255, 255, .09);
 
+  --theme-breadcrumb-default: rgba(255, 255, 255, 0);
+  --theme-breadcrumb-hovered: rgba(255, 255, 255, .08);
+  --theme-breadcrumb-pressed: rgba(255, 255, 255, .1);
+  --theme-button-icon-default: rgba(255, 255, 255, 0);
+  --theme-button-icon-hovered: rgba(255, 255, 255, .06);
+  --theme-button-icon-pressed: rgba(255, 255, 255, .1);
+
   --theme-button-contrast-color: #000;
   --theme-button-contrast-enabled: rgba(255, 255, 255, .8);
   --theme-button-contrast-hovered: #fff;
@@ -320,6 +327,13 @@
   --theme-button-disabled: rgba(0, 0, 0, .08);
   --theme-button-border: rgba(0, 0, 0, .09);
 
+  --theme-breadcrumb-default: rgba(0, 0, 0, 0);
+  --theme-breadcrumb-hovered: rgba(0, 0, 0, .08);
+  --theme-breadcrumb-pressed: rgba(0, 0, 0, .1);
+  --theme-button-icon-default: rgba(0, 0, 0, 0);
+  --theme-button-icon-hovered: rgba(0, 0, 0, .06);
+  --theme-button-icon-pressed: rgba(0, 0, 0, .1);
+
   --theme-button-contrast-color: #fff;
   --theme-button-contrast-enabled: rgba(0, 0, 0, .8);
   --theme-button-contrast-hovered: #000;

packages/theme/styles/_layouts.scss

@@ -483,6 +483,7 @@ input.search {
 .ml-12 { margin-left: 3rem; }
 .ml-22 { margin-left: 5.5rem; }
 .ml-auto { margin-left: auto; }
+.mr-0-5 { margin-right: .125rem; }
 .mr-1 { margin-right: .25rem; }
 .mr-1-5 { margin-right: .375rem; }
 .mr-2 { margin-right: .5rem; }

packages/theme/styles/button.scss

@@ -343,4 +343,16 @@
       width: 20px;
     }
   }
+  &:focus { z-index: 1; }
+  &.icon {
+    background-color: var(--theme-button-icon-default);
+
+    .btn-icon { color: var(--theme-dark-color); }
+
+    &:hover, &:focus, &.selected { background-color: var(--theme-button-icon-hovered); }
+    &:active { background-color: var(--theme-button-icon-pressed); }
+    &:hover, &:focus, &.selected, &:active {
+      .btn-icon { color: var(--theme-caption-color); }
+    }
+  }
 }

packages/theme/styles/global.scss

@@ -94,7 +94,7 @@
 ::-webkit-scrollbar:horizontal {
   height: 6px;
 }
-::-webkit-scrollbar-track, .panel-container .scroll .scroll::-webkit-scrollbar-track {
+::-webkit-scrollbar-track, .panel-instance .scroll .scroll::-webkit-scrollbar-track {
   margin: 6px;
   // background-color: var(--scrollbar-bar-color);
 }