Fixed UI: Breadcrumbs, Chat, VideoPopup (#5443)

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

packages/theme/styles/common.scss

@@ -156,7 +156,6 @@
   flex-direction: column;
   flex-grow: 1;
 }
-.antiPanel-component:not(.aside) { background-color: var(--theme-bg-color); }
 .antiPanel-component.aside {
   min-width: 30rem;
   width: 30rem;

packages/theme/styles/panel.scss

@@ -38,17 +38,20 @@
   margin-top: 0.75rem;
 }
 .hulyNavPanel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   flex-shrink: 0;
+  padding: var(--spacing-1_5) var(--spacing-1_5) var(--spacing-3) var(--spacing-2_5);
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 1.5rem;
   color: var(--global-primary-TextColor);
 
-  &:not(.withButton) { padding: 1rem 1.25rem 1.5rem; }
+  &:not(.withButton) {
+    min-height: 4.25rem;
+  }
   &.withButton {
-    display: flex;
-    justify-content: space-between;
-    padding: .75rem .75rem 1.5rem 1.25rem;
     min-width: 0;
     min-height: 0;
   }

packages/ui/src/components/Breadcrumb.svelte

@@ -70,6 +70,7 @@
       }
     }
     .hulyBreadcrumb-label {
+      padding: var(--spacing-0_5) 0;
       color: var(--global-secondary-TextColor);
     }
     &.current .hulyBreadcrumb-label {

packages/ui/src/components/ButtonBase.svelte

@@ -138,6 +138,9 @@
         animation: rotate 2s linear infinite;
       }
     }
+    span {
+      white-space: nowrap;
+    }
 
     &:focus {
       outline: 2px solid var(--global-focus-BorderColor);

packages/ui/src/components/Dock.svelte

@@ -41,6 +41,7 @@
 
 <style lang="scss">
   .dock {
+    box-sizing: content-box;
     display: flex;
     flex-shrink: 0;
     flex-direction: column;

plugins/chunter-resources/src/components/chat/Chat.svelte

@@ -115,9 +115,7 @@
 
 <div class="flex-row-top h-full">
   {#if visibleNav}
-    <div
+    <div class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'}">
-      class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'} background-surface-color"
-    >
       <div class="antiPanel-wrap__content">
         <ChatNavigator objectId={selectedData?._id} {object} {currentSpecial} on:select={handleChannelSelected} />
       </div>

plugins/chunter-resources/src/components/chat/navigator/ChatNavigator.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Doc, Ref } from '@hcengineering/core'
-  import { Scroller, SearchEdit, Label, Button, IconAdd, showPopup, Menu } from '@hcengineering/ui'
+  import { Scroller, SearchEdit, Label, ButtonIcon, IconAdd, showPopup, Menu } from '@hcengineering/ui'
   import { DocNotifyContext } from '@hcengineering/notification'
   import { SpecialNavModel } from '@hcengineering/workbench'
   import { NavLink } from '@hcengineering/view-resources'
@@ -70,46 +70,44 @@
   }
 </script>
 
-<Scroller shrink>
+<div class="header">
-  <div class="header">
+  <div class="overflow-label">
-    <div class="overflow-label">
+    <Label label={chunter.string.Chat} />
-      <Label label={chunter.string.Chat} />
-    </div>
-    <Button icon={IconAdd} kind="primary" size="medium" iconProps={{ size: 'small' }} on:click={addButtonClicked} />
   </div>
+  <ButtonIcon icon={IconAdd} kind={'primary'} size={'small'} on:click={addButtonClicked} />
+</div>
 
-  {#each chatSpecials as special, row}
+{#each chatSpecials as special, row}
-    {#if row > 0 && chatSpecials[row].position !== chatSpecials[row - 1].position}
+  {#if row > 0 && chatSpecials[row].position !== chatSpecials[row - 1].position}
-      <TreeSeparator line />
+    <TreeSeparator line />
+  {/if}
+  {#await isSpecialVisible(special, $contextsStore) then isVisible}
+    {#if isVisible}
+      <NavLink space={special.id}>
+        <ChatSpecialElement {special} {currentSpecial} />
+      </NavLink>
     {/if}
-    {#await isSpecialVisible(special, $contextsStore) then isVisible}
+  {/await}
-      {#if isVisible}
+{/each}
-        <NavLink space={special.id}>
+
-          <ChatSpecialElement {special} {currentSpecial} />
+<div class="search">
-        </NavLink>
+  <SearchEdit
-      {/if}
+    value={searchValue}
-    {/await}
+    width="auto"
+    on:change={(ev) => {
+      userSearch.set(ev.detail)
+
+      if (ev.detail !== '') {
+        navigateToSpecial('chunterBrowser')
+      }
+    }}
+  />
+</div>
+<Scroller>
+  {#each chatNavGroupModels as model}
+    <ChatNavGroup {object} {objectId} {model} on:select />
   {/each}
-
+  <div class="antiNav-space" />
-  <div class="search">
-    <SearchEdit
-      value={searchValue}
-      width="auto"
-      on:change={(ev) => {
-        userSearch.set(ev.detail)
-
-        if (ev.detail !== '') {
-          navigateToSpecial('chunterBrowser')
-        }
-      }}
-    />
-  </div>
-  <Scroller>
-    {#each chatNavGroupModels as model}
-      <ChatNavGroup {object} {objectId} {model} on:select />
-    {/each}
-    <div class="antiNav-space" />
-  </Scroller>
 </Scroller>
 
 <style lang="scss">
@@ -117,14 +115,13 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 0.75rem;
+    padding: var(--spacing-1_5) var(--spacing-1_5) var(--spacing-3) var(--spacing-2_5);
-    margin-left: 1.25rem;
     font-weight: 700;
     font-size: 1.25rem;
     color: var(--global-primary-TextColor);
   }
   .search {
     padding: var(--spacing-1_5);
-    border-bottom: 1px solid var(--global-surface-02-BorderColor);
+    border-bottom: 1px solid var(--theme-navpanel-divider);
   }
 </style>

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

@@ -92,7 +92,6 @@
   import TopMenu from './icons/TopMenu.svelte'
 
   let contentPanel: HTMLElement
-  let replacedPanel: HTMLElement | undefined
 
   const { setTheme } = getContext<{ setTheme: (theme: string) => void }>('theme')
 
@@ -839,6 +838,7 @@
       {/if}
     </div>
   </div>
+  <Dock />
   <div bind:this={cover} class="cover" />
   <TooltipInstance />
   <PanelInstance bind:this={panelInstance} contentPanel={elementPanel} kind={modern ? 'modern' : 'default'}>
@@ -853,7 +853,6 @@
   </Popup>
   <ComponentExtensions extension={workbench.extensions.WorkbenchExtensions} />
   <BrowserNotificatator />
-  <Dock />
 {/if}
 
 <style lang="scss">
@@ -868,14 +867,15 @@
     &:not(.modern-app, .inner) {
       border-top: 1px solid var(--theme-navpanel-divider);
       border-left: 1px solid var(--theme-navpanel-color);
-    }
+
-    &.modern-app {
+      & + :global(.dock) {
-      border-top: 1px solid transparent;
+        border-left: 1px solid var(--theme-navpanel-divider);
+      }
     }
     &.modern-app {
       position: relative;
       background-color: var(--theme-statusbar-color);
-      border-radius: var(--medium-BorderRadius);
+      border-top: 1px solid transparent;
 
       &::after {
         position: absolute;

tests/sanity/tests/model/chunter-page.ts

@@ -7,7 +7,7 @@ export class ChunterPage {
     this.page = page
   }
 
-  readonly buttonChannelBrowser = (): Locator => this.page.locator('.header > .antiButton')
+  readonly buttonChannelBrowser = (): Locator => this.page.locator('.header > button.type-button-icon')
   readonly buttonNewChannelHeader = (): Locator => this.page.getByRole('button', { name: 'New channel' })
   readonly inputNewChannelName = (): Locator => this.page.getByPlaceholder('New channel')
   readonly inputDescription = (): Locator => this.page.getByPlaceholder('Description (optional)')