perspective collapsible splitters

packages/web/src/elements/HorizontalSplitter.svelte

@@ -11,6 +11,7 @@
 
 <script>
   import _ from 'lodash';
+  import FontIcon from '../icons/FontIcon.svelte';
 
   import splitterDrag from '../utility/splitterDrag';
 
@@ -18,6 +19,12 @@
   export let initialValue = undefined;
   export let hideFirst = false;
 
+  export let allowCollapseChild1 = false;
+  export let allowCollapseChild2 = false;
+
+  let collapsed1 = false;
+  let collapsed2 = false;
+
   export let size = 0;
   let clientWidth;
 
@@ -25,18 +32,76 @@
 </script>
 
 <div class="container" bind:clientWidth>
-  {#if !hideFirst}
-    <div class="child1" style={isSplitter ? `width:${size}px; min-width:${size}px; max-width:${size}px}` : `flex:1`}>
-      <slot name="1" />
-    </div>
-  {/if}
-  {#if isSplitter}
-    {#if !hideFirst}
-      <div class="horizontal-split-handle" use:splitterDrag={'clientX'} on:resizeSplitter={e => (size += e.detail)} />
-    {/if}
-    <div class="child2">
+  {#if collapsed1}
+    <div class="child1" style={`flex:1`}>
       <slot name="2" />
     </div>
+  {:else if collapsed2}
+    <div class="child1" style={`flex:1`}>
+      <slot name="1" />
+    </div>
+  {:else}
+    {#if !hideFirst}
+      <div class="child1" style={isSplitter ? `width:${size}px; min-width:${size}px; max-width:${size}px}` : `flex:1`}>
+        <slot name="1" />
+      </div>
+    {/if}
+    {#if isSplitter}
+      {#if !hideFirst}
+        <div class="horizontal-split-handle" use:splitterDrag={'clientX'} on:resizeSplitter={e => (size += e.detail)} />
+      {/if}
+      <div class="child2">
+        <slot name="2" />
+      </div>
+    {/if}
+  {/if}
+
+  {#if allowCollapseChild1 && !collapsed2 && isSplitter}
+    {#if collapsed1}
+      <div
+        class="collapse"
+        style={`left: 0px`}
+        on:click={() => {
+          collapsed1 = false;
+        }}
+      >
+        <FontIcon icon="icon chevron-double-right" />
+      </div>
+    {:else}
+      <div
+        class="collapse"
+        style={`left: ${size - 16}px`}
+        on:click={() => {
+          collapsed1 = true;
+        }}
+      >
+        <FontIcon icon="icon chevron-double-left" />
+      </div>
+    {/if}
+  {/if}
+
+  {#if allowCollapseChild2 && !collapsed1 && isSplitter}
+    {#if collapsed2}
+      <div
+        class="collapse"
+        style={`right: 0px`}
+        on:click={() => {
+          collapsed2 = false;
+        }}
+      >
+        <FontIcon icon="icon chevron-double-left" />
+      </div>
+    {:else}
+      <div
+        class="collapse"
+        style={`left: ${size}px`}
+        on:click={() => {
+          collapsed2 = true;
+        }}
+      >
+        <FontIcon icon="icon chevron-double-right" />
+      </div>
+    {/if}
   {/if}
 </div>
 
@@ -63,4 +128,21 @@
     position: relative;
     overflow: hidden;
   }
+
+  .collapse {
+    position: absolute;
+    bottom: 16px;
+    height: 40px;
+    width: 16px;
+    background: var(--theme-bg-2);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .collapse:hover {
+    color: var(--theme-font-hover);
+    background: var(--theme-bg-3);
+    cursor: pointer;
+  }
 </style>

packages/web/src/elements/VerticalSplitter.svelte

@@ -41,7 +41,7 @@
     {/if}
   {/if}
 
-  {#if allowCollapseChild1 && !collapsed2}
+  {#if allowCollapseChild1 && !collapsed2 && isSplitter}
     {#if collapsed1}
       <div
         class="collapse"
@@ -65,7 +65,7 @@
     {/if}
   {/if}
 
-  {#if allowCollapseChild2 && !collapsed1}
+  {#if allowCollapseChild2 && !collapsed1 && isSplitter}
     {#if collapsed2}
       <div
         class="collapse"

packages/web/src/perspectives/PerspectiveView.svelte

@@ -160,7 +160,7 @@
   // $: console.log('VIEW ROOT', root);
 </script>
 
-<HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>
+<HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize} allowCollapseChild1>
   <div class="left" slot="1">
     <WidgetColumnBar>
       <WidgetColumnBarItem title="Choose data" name="perspectiveTree" height={'70%'}>