Fixed rendering of the right sidebar (#2219)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/theme/styles/common.scss

@@ -41,11 +41,13 @@
   &.border-right { border-right: 1px solid var(--divider-color); }
 }
 .antiPanel-navigator {
+  position: relative;
   min-width: 18rem;
   max-width: 18rem;
   width: 18rem;
-
-  &.float {
+}
+@media (max-width: 1024px) {
+  .antiPanel-navigator {
     position: fixed;
     top: var(--status-bar-height);
     left: var(--app-panel-width);

packages/theme/styles/panel.scss

@@ -180,11 +180,13 @@
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
         transition: box-shadow 150ms ease 0s, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
         transform: translateX(0);
+        visibility: hidden;
 
         &::before { content: none; }
         &.shown {
           box-shadow: var(--popup-aside-shadow);
           transform: translateX(-100%);
+          visibility: visible;
 
           &::after {
             position: absolute;

packages/ui/src/components/Panel.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
+  import { afterUpdate, createEventDispatcher } from 'svelte'
   import { resizeObserver } from '../resize'
   import Button from './Button.svelte'
   import IconClose from './icons/Close.svelte'
@@ -31,23 +31,26 @@
 
   let asideFloat: boolean = false
   let asideShown: boolean = false
-  $: if (panelWidth < 900 && !asideFloat) asideFloat = true
-  $: if (panelWidth >= 900 && asideFloat) {
-    asideFloat = false
-    asideShown = false
-  }
   let docWidth: number
   let fullSize: boolean = false
-  let docSize: boolean = false
-  $: if (docWidth <= 900 && !docSize) docSize = true
-  $: if (docWidth > 900 && docSize) docSize = false
+
+  const checkPanel = (): void => {
+    if (panelWidth <= 900 && !asideFloat) asideFloat = true
+    else if (panelWidth > 900 && asideFloat) {
+      asideFloat = false
+      asideShown = false
+    }
+  }
+  afterUpdate(() => {
+    checkPanel()
+  })
 </script>
 
-<svelte:window bind:innerWidth={docWidth} />
 <div
   class="popupPanel"
   use:resizeObserver={(element) => {
     panelWidth = element.clientWidth
+    checkPanel()
   }}
 >
   <div class="popupPanel-title">

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

@@ -362,20 +362,21 @@
     }
   }
 
+  let docWidth: number
   let navFloat: boolean = !(window.innerWidth < 1024)
   const windowResize = (): void => {
-    if (window.innerWidth < 1024 && !navFloat) {
+    if (window.innerWidth <= 1024 && !navFloat) {
       visibileNav = false
       navFloat = true
-    } else if (window.innerWidth >= 1024 && navFloat) {
+    } else if (window.innerWidth > 1024 && navFloat) {
       navFloat = false
       visibileNav = true
     }
   }
-  const checkOnHide = (): void => {
-    if (visibileNav && navFloat) visibileNav = false
-  }
   windowResize()
+  const checkOnHide = (): void => {
+    if (visibileNav && docWidth <= 1024) visibileNav = false
+  }
 </script>
 
 <svelte:window on:resize={windowResize} />
@@ -459,7 +460,7 @@
       }}
     />
     {#if currentApplication && navigatorModel && navigator && visibileNav}
-      <div class="antiPanel-navigator" class:float={navFloat} style="box-shadow: -1px 0px 2px rgba(0, 0, 0, .1)">
+      <div class="antiPanel-navigator" style="box-shadow: -1px 0px 2px rgba(0, 0, 0, .1)">
         {#if currentApplication}
           <NavHeader label={currentApplication.label} />
           {#if currentApplication.navHeaderComponent}

tests/create-local.sh

@@ -5,6 +5,7 @@ export MINIO_ENDPOINT=localhost:9000
 export MONGO_URL=mongodb://localhost:27017
 export TRANSACTOR_URL=ws:/localhost:3333
 export ELASTIC_URL=http://localhost:9200
+export SERVER_SECRET=secret
 
 # Create workspace record in accounts
 node ../dev/tool/bundle.js create-workspace sanity-ws -o SanityTest

tests/restore-local.sh

@@ -5,7 +5,7 @@ export MINIO_ENDPOINT=localhost:9000
 export MONGO_URL=mongodb://localhost:27017
 export TRANSACTOR_URL=ws:/localhost:3333
 export ELASTIC_URL=http://localhost:9200
-
+export SERVER_SECRET=secret
 
 # Restore workspace contents in mongo/elastic
 node ../dev/tool/bundle.js restore-workspace sanity-ws sanity-ws/