UI and separation fixes. (#7045)

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

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

@@ -872,7 +872,7 @@
         application: currentApplication?._id
       }}
     />
-    <div class="workbench-container inner">
+    <div class="workbench-container inner" class:rounded={$sidebarStore.variant === SidebarVariant.EXPANDED}>
       {#if mainNavigator}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -932,6 +932,7 @@
       <div
         bind:this={contentPanel}
         class={navigatorModel === undefined ? 'hulyPanels-container' : 'hulyComponent overflow-hidden'}
+        data-id={'contentPanel'}
       >
         {#if currentApplication && currentApplication.component}
           <Component
@@ -972,11 +973,11 @@
         </div>
       {/if}
     </div>
+    {#if $sidebarStore.variant === SidebarVariant.EXPANDED}
+      <Separator name={'main'} index={0} color={'transparent'} separatorSize={0} short />
+    {/if}
+    <WidgetsBar />
   </div>
-  {#if $sidebarStore.variant === SidebarVariant.EXPANDED}
-    <Separator name={'main'} index={0} color={'transparent'} separatorSize={0} short />
-  {/if}
-  <WidgetsBar />
   <Dock />
   <div bind:this={cover} class="cover" />
   <TooltipInstance />
@@ -1002,12 +1003,15 @@
     min-height: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--theme-statusbar-color);
+    background-color: var(--theme-panel-color);
     touch-action: none;
 
     &.inner {
       background-color: var(--theme-navpanel-color);
-      border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
+
+      &.rounded {
+        border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
+      }
     }
     &:not(.inner)::after {
       position: absolute;
@@ -1015,8 +1019,6 @@
       inset: 0;
       border: 1px solid var(--theme-divider-color);
       border-radius: var(--medium-BorderRadius);
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
       pointer-events: none;
     }
     .antiPanel-application {

plugins/workbench-resources/src/components/sidebar/Sidebar.svelte

@@ -17,6 +17,7 @@
   import { WidgetPreference, SidebarEvent, TxSidebarEvent, OpenSidebarWidgetParams } from '@hcengineering/workbench'
   import { Tx } from '@hcengineering/core'
   import { onMount } from 'svelte'
+  import { panelstore } from '@hcengineering/ui'
 
   import workbench from '../../plugin'
   import { createWidgetTab, openWidget, sidebarStore, SidebarVariant } from '../../sidebar'
@@ -33,7 +34,8 @@
     preferences = res
   })
 
-  $: size = $sidebarStore.variant === SidebarVariant.MINI ? 'mini' : undefined
+  $: mini = $sidebarStore.variant === SidebarVariant.MINI
+  $: if ((!mini || mini) && $panelstore.panel?.refit !== undefined) $panelstore.panel.refit()
 
   function txListener (tx: Tx): void {
     if (tx._class === workbench.class.TxSidebarEvent) {
@@ -59,8 +61,8 @@
   })
 </script>
 
-<div class="antiPanel-component antiComponent root size-{size}" id="sidebar">
-  {#if $sidebarStore.variant === SidebarVariant.MINI}
+<div class="antiPanel-application vertical root" class:mini id="sidebar">
+  {#if mini}
     <SidebarMini {widgets} {preferences} />
   {:else if $sidebarStore.variant === SidebarVariant.EXPANDED}
     <SidebarExpanded {widgets} {preferences} />
@@ -69,10 +71,11 @@
 
 <style lang="scss">
   .root {
-    position: relative;
-    background-color: var(--theme-panel-color);
+    flex-direction: row;
+    min-width: 25rem;
+    border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
 
-    &.size-mini {
+    &.mini {
       width: 3.5rem !important;
       min-width: 3.5rem !important;
       max-width: 3.5rem !important;

plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte

@@ -96,84 +96,78 @@
   }
 </script>
 
-<div class="root">
-  <div class="content">
-    {#if widget?.component}
-      <div class="component" use:resizeObserver={resize}>
-        {#if widget.headerLabel}
-          <Header
-            allowFullsize={false}
-            type="type-aside"
-            hideBefore={true}
-            hideActions={false}
-            hideDescription={true}
-            adaptive="disabled"
-            closeOnEscape={false}
-            on:close={() => {
-              if (widget !== undefined) {
-                closeWidget(widget._id)
-              }
-            }}
-          >
-            <Breadcrumbs items={[{ label: widget.headerLabel }]} currentOnly />
-          </Header>
-        {/if}
-        <Component
-          is={widget?.component}
-          props={{ tab, widgetState, height: componentHeight, width: componentWidth, widget }}
+<div class="content">
+  {#if widget?.component}
+    <div class="component" use:resizeObserver={resize}>
+      {#if widget.headerLabel}
+        <Header
+          allowFullsize={false}
+          type="type-aside"
+          hideBefore={true}
+          hideActions={false}
+          hideDescription={true}
+          adaptive="disabled"
+          closeOnEscape={false}
           on:close={() => {
             if (widget !== undefined) {
               closeWidget(widget._id)
             }
           }}
-        />
-      </div>
-    {/if}
-  </div>
-  {#if widget !== undefined && tabs.length > 0}
-    <SidebarTabs
-      {tabs}
-      selected={tab?.id}
-      {widget}
-      on:close={(e) => {
-        void handleTabClose(e.detail, widget)
-      }}
-      on:open={(e) => {
-        handleTabOpen(e.detail, widget)
-      }}
-    />
+        >
+          <Breadcrumbs items={[{ label: widget.headerLabel }]} currentOnly />
+        </Header>
+      {/if}
+      <Component
+        is={widget?.component}
+        props={{ tab, widgetState, height: componentHeight, width: componentWidth, widget }}
+        on:close={() => {
+          if (widget !== undefined) {
+            closeWidget(widget._id)
+          }
+        }}
+      />
+    </div>
   {/if}
-  <WidgetsBar {widgets} {preferences} selected={widgetId} />
 </div>
+{#if widget !== undefined && tabs.length > 0}
+  <SidebarTabs
+    {tabs}
+    selected={tab?.id}
+    {widget}
+    on:close={(e) => {
+      void handleTabClose(e.detail, widget)
+    }}
+    on:open={(e) => {
+      handleTabOpen(e.detail, widget)
+    }}
+  />
+{/if}
+<WidgetsBar {widgets} {preferences} selected={widgetId} />
 
 <style lang="scss">
-  .root {
-    display: flex;
-    flex: 1;
-    height: 100%;
-    overflow: hidden;
-  }
-
   .content {
     display: flex;
     flex-direction: column;
 
-    border-top: 1px solid var(--theme-divider-color);
+    border-top: 1px solid transparent; // var(--theme-divider-color);
+    border-right: 1px solid var(--theme-divider-color);
     overflow: auto;
 
-    flex: 1;
     width: calc(100% - 3.5rem);
     height: 100%;
-    background: var(--theme-panel-color);
-    border-right: 1px solid var(--global-ui-BorderColor);
+    min-width: 0;
+    min-height: 0;
+    background-color: var(--theme-panel-color);
+
+    border-left: none;
   }
 
   .component {
     position: relative;
     display: flex;
     flex-direction: column;
-    flex: 1;
+    flex-grow: 1;
     overflow: hidden;
-    border-bottom: 1px solid transparent;
+    background-color: var(--theme-panel-color);
   }
 </style>

plugins/workbench-resources/src/components/sidebar/SidebarTabs.svelte

@@ -89,9 +89,8 @@
     width: 30px;
     min-width: 30px;
     max-width: 30px;
-    flex: 1;
+    height: 100%;
     border-right: 1px solid var(--theme-divider-color);
-    border-top: 1px solid var(--theme-divider-color);
     gap: 0.25rem;
     align-items: center;
     padding: 0.25rem 0;

plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte

@@ -95,13 +95,12 @@
   .root {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    padding-block: var(--spacing-2);
     height: 100%;
-    padding: 0.5rem 0;
     width: 3.5rem;
     min-width: 3.5rem;
     max-width: 3.5rem;
-    border-top: 1px solid var(--theme-divider-color);
+    border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
     overflow-y: auto;
   }