[dome] flex splitter layout

ivette/src/dome/src/renderer/layout/split.tsx

@@ -62,17 +62,20 @@ type Layout = {
   cssB: string;
 };
 
+const PANEL = 'dome-container';
+const DRAGGING = 'dome-color-dragging';
+const DRAGZONE = 'dome-color-dragzone';
+
 const CONTAINER = 'dome-xSplitter-container';
 const NOCURSOR = 'dome-xSplitter-no-cursor';
 const HCURSOR = 'dome-xSplitter-h-cursor';
 const VCURSOR = 'dome-xSplitter-v-cursor';
 
 const HIDDEN = 'dome-xSplitter-hidden';
-const BLOCK = 'dome-xSplitter-block';
 const HFLEX = 'dome-xSplitter-hflex';
 const VFLEX = 'dome-xSplitter-vflex';
 
-const PANEL = 'dome-container';
+const BLOCK = 'dome-xSplitter-block';
 const HPANE = 'dome-xSplitter-hpane';
 const VPANE = 'dome-xSplitter-vpane';
 const HFOLD = 'dome-xSplitter-hfold';
@@ -81,8 +84,6 @@ const HLINE = 'dome-xSplitter-hline';
 const VLINE = 'dome-xSplitter-vline';
 const HGRAB = 'dome-xSplitter-hgrab';
 const VGRAB = 'dome-xSplitter-vgrab';
-const DRAGGING = 'dome-color-dragging';
-const DRAGZONE = 'dome-color-dragzone';
 
 type CSS = {
   container: string;
@@ -100,15 +101,15 @@ const getCSS = (
   if (!unfold) return {
     container: BLOCK,
     resizer: HIDDEN,
-    primary: (cssA === HFOLD || cssA === VFOLD) ? HIDDEN : PANEL,
-    secondary: (cssB === HFOLD || cssB === VFOLD) ? HIDDEN : PANEL,
+    primary: (cssA === HFOLD || cssA === VFOLD) ? HIDDEN : BLOCK,
+    secondary: (cssB === HFOLD || cssB === VFOLD) ? HIDDEN : BLOCK,
   };
   // POSITION
   if (position > 0) return {
     container: BLOCK,
     resizer: hsplit ? HLINE : VLINE,
-    primary: PANEL,
-    secondary: PANEL,
+    primary: BLOCK,
+    secondary: BLOCK,
   };
   // FLEX
   return {

ivette/src/dome/src/renderer/layout/style.css

@@ -93,6 +93,104 @@
     height: 100% ;
 }
 
+.dome-xSplitter-no-cursor { }
+.dome-xSplitter-h-cursor  { cursor: col-resize ; }
+.dome-xSplitter-v-cursor  { cursor: row-resize ; }
+
+.dome-xSplitter-hidden {
+    display: none;
+}
+
+.dome-xSplitter-block {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+.dome-xSplitter-hflex {
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.dome-xSplitter-vflex {
+    display: flex;
+    flex-flow: column nowrap;
+}
+
+.dome-xSplitter-hfold {
+    flex: none;
+    min-width: 30px;
+    height: 100%;
+    overflow: hidden;
+}
+
+.dome-xSplitter-vfold {
+    flex: none;
+    min-height: 30px;
+    width: 100%;
+    overflow: hidden;
+}
+
+.dome-xSplitter-hpane {
+    flex: auto;
+    width: auto;
+    height: 100%;
+    overflow: hidden;
+}
+
+.dome-xSplitter-vpane {
+    flex: auto;
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+}
+
+.dome-xSplitter-hline {
+    width: 1px;
+    height: 100%;
+}
+
+.dome-xSplitter-vline {
+    width: 100%;
+    height: 1px;
+}
+
+.dome-xSplitter-hgrab {
+    position: relative ;
+    z-index: 1 ;
+    left: -1px ;
+    width: 3px ;
+    height: 100% ;
+    cursor: col-resize ;
+    border: 0px ;
+}
+
+.dome-xSplitter-vgrab {
+    position: relative ;
+    z-index: 1 ;
+    top: -1px ;
+    height: 3px ;
+    width: 100% ;
+    border: 0px ;
+    cursor: row-resize ;
+}
+
+.dome-window-active .dome-xSplitter-hline,
+.dome-window-active .dome-xSplitter-vline
+{
+    background: #afafaf ;
+}
+
+.dome-window-inactive .dome-xSplitter-hline
+.dome-window-inactive .dome-xSplitter-vline
+{
+    background: #d6d6d6 ;
+}
+
+/* --- DEPRECATED --- */
+
 .dome-xSplitPane {
     position: relative ;
 }
@@ -117,10 +215,6 @@
     cursor: row-resize ;
 }
 
-.dome-xSplitter-no-cursor { }
-.dome-xSplitter-h-cursor  { cursor: col-resize ; }
-.dome-xSplitter-v-cursor  { cursor: row-resize ; }
-
 .dome-window-active .dome-xSplitLine {
     background: #afafaf ;
 }

ivette/src/renderer/Application.tsx

@@ -24,6 +24,8 @@ import Properties from './Properties';
 import Locations from './Locations';
 import Values from './Values';
 
+import { LSplit } from 'dome/layout/split';
+
 // --------------------------------------------------------------------------
 // --- Selection Controls
 // --------------------------------------------------------------------------
@@ -81,7 +83,7 @@ export default (() => {
           onClick={flipViewbar}
         />
       </Toolbar.ToolBar>
-      <Splitter dir="LEFT" settings="frame-c.sidebar.position" unfold={sidebar}>
+      <LSplit unfold={sidebar}>
         <Sidebar.SideBar>
           <div className="sidebar-ruler" />
           <Globals key="globals" />
@@ -121,7 +123,7 @@ export default (() => {
             <Values />
           </Group>
         </LabView>
-      </Splitter>
+      </LSplit>
       <Toolbar.ToolBar>
         <Controller.Status />
         <Toolbar.Filler />