Updates to move to floating panels UI

Author: logicsec

packages/theme/styles/_colors.scss

@@ -188,6 +188,7 @@
   --theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
   --theme-popup-checkicon: #FFFFFF99;
   --theme-panel-color: #1A1A28;
+  --theme-workbench-color: #1A1A28;
   --theme-calendar-today-color: #fff;
   --theme-calendar-holiday-color: #eb5757;
   --theme-calendar-weekend-color: rgba(242, 153, 74, 1);
@@ -447,6 +448,7 @@
   --theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
   --theme-popup-checkicon: #205DC2;
   --theme-panel-color: #FFFFFF;
+  --theme-workbench-color: #FFFFFF;
   --theme-calendar-today-color: #000;
   --theme-calendar-holiday-color: #eb5757;
   --theme-calendar-weekend-color: rgba(242, 153, 74, 1);

packages/theme/styles/common.scss

@@ -142,7 +142,12 @@
 .antiPanel-navigator {
   position: relative;
 
-  &:not(.second) { background-color: var(--theme-navpanel-color); }
+  &:not(.second) { 
+    background-color: var(--theme-workbench-color); 
+    margin: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);  // Changed from all sides to top, bottom, left only
+    border: 1px solid var(--theme-divider-color);
+    border-radius: var(--small-focus-BorderRadius);
+  }
   &:not(.right) {
     min-width: 12.5rem;
     max-width: 22.5rem;

packages/theme/styles/components.scss

@@ -23,9 +23,11 @@
   min-width: 0;
   border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor);
   border-radius: var(--small-focus-BorderRadius);
+  padding: var(--spacing-2);
 
   &:not(.modal) {
     background-color: var(--theme-panel-color); // var(--global-surface-02-BackgroundColor);
+    margin: var(--spacing-2);
   }
   &.modal {
     overflow: hidden;

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

@@ -941,6 +941,14 @@
         <div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
       {/if}
       {#if mainNavigator}
+        <Separator
+          name={'workbench'}
+          float={$deviceInfo.navigator.float}
+          index={0}
+          color={'transparent'}
+          separatorSize={0}
+          short
+        />
         <div
           class="antiPanel-navigator no-print {$deviceInfo.navigator.direction === 'horizontal'
             ? 'portrait'
@@ -1114,6 +1122,7 @@
     .antiPanel-application:not(.horizontal) {
       border-radius: var(--medium-BorderRadius) 0 0 var(--medium-BorderRadius);
       border-right: none;
+      background-color: var(--theme-panel-color);
     }
   }
 

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

@@ -158,7 +158,6 @@
     min-width: 0;
     min-height: 0;
     background-color: var(--theme-panel-color);
-
     border-left: none;
   }
 

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

@@ -98,10 +98,10 @@
     flex-direction: column;
     padding-block: var(--spacing-2);
     height: 100%;
-    width: 3.5rem;
+    width: var(--app-panel-width);
     min-width: 3.5rem;
     max-width: 3.5rem;
-    background-color: var(--theme-navpanel-color);
+    background-color: var(--theme-workbench-color);
     border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
     overflow-y: auto;
   }