collapsible vertical splitter

packages/web/src/designer/ColumnLine.svelte

@@ -210,6 +210,6 @@
   }
   .icon-button:hover {
     background: var(--theme-bg-2);
-    color: var(--theme-icon-blue);
+    color: var(--theme-font-hover);
   }
 </style>

packages/web/src/elements/VerticalSplitter.svelte

@@ -1,5 +1,6 @@
 <script>
   import _ from 'lodash';
+  import FontIcon from '../icons/FontIcon.svelte';
 
   import splitterDrag from '../utility/splitterDrag';
   import { computeSplitterSize } from './HorizontalSplitter.svelte';
@@ -7,21 +8,85 @@
   export let isSplitter = true;
   export let initialValue = undefined;
 
+  export let allowCollapseChild1 = false;
+  export let allowCollapseChild2 = false;
+
   let size = 0;
   let clientHeight;
 
+  let collapsed1 = false;
+  let collapsed2 = false;
+
   $: size = computeSplitterSize(initialValue, clientHeight);
 </script>
 
 <div class="container" bind:clientHeight>
-  <div class="child1" style={isSplitter ? `height:${size}px; min-height:${size}px; max-height:${size}px}` : `flex:1`}>
+  {#if collapsed1}
-    <slot name="1" />
+    <div class="child1" style={`flex:1`}>
-  </div>
-  {#if isSplitter}
-    <div class="vertical-split-handle" use:splitterDrag={'clientY'} on:resizeSplitter={e => (size += e.detail)} />
-    <div class="child2">
       <slot name="2" />
     </div>
+  {:else if collapsed2}
+    <div class="child1" style={`flex:1`}>
+      <slot name="1" />
+    </div>
+  {:else}
+    <div class="child1" style={isSplitter ? `height:${size}px; min-height:${size}px; max-height:${size}px}` : `flex:1`}>
+      <slot name="1" />
+    </div>
+    {#if isSplitter}
+      <div class="vertical-split-handle" use:splitterDrag={'clientY'} on:resizeSplitter={e => (size += e.detail)} />
+      <div class="child2">
+        <slot name="2" />
+      </div>
+    {/if}
+  {/if}
+
+  {#if allowCollapseChild1 && !collapsed2}
+    {#if collapsed1}
+      <div
+        class="collapse"
+        style={`top: 0px`}
+        on:click={() => {
+          collapsed1 = false;
+        }}
+      >
+        <FontIcon icon="icon chevron-double-down" />
+      </div>
+    {:else}
+      <div
+        class="collapse"
+        style={`top: ${size - 16}px`}
+        on:click={() => {
+          collapsed1 = true;
+        }}
+      >
+        <FontIcon icon="icon chevron-double-up" />
+      </div>
+    {/if}
+  {/if}
+
+  {#if allowCollapseChild2 && !collapsed1}
+    {#if collapsed2}
+      <div
+        class="collapse"
+        style={`bottom: 0px`}
+        on:click={() => {
+          collapsed2 = false;
+        }}
+      >
+        <FontIcon icon="icon chevron-double-up" />
+      </div>
+    {:else}
+      <div
+        class="collapse"
+        style={`top: ${size}px`}
+        on:click={() => {
+          collapsed2 = true;
+        }}
+      >
+        <FontIcon icon="icon chevron-double-down" />
+      </div>
+    {/if}
   {/if}
 </div>
 
@@ -49,4 +114,20 @@
     position: relative;
     overflow: hidden;
   }
+
+  .collapse {
+    position: absolute;
+    right: 16px;
+    width: 40px;
+    height: 16px;
+    background: var(--theme-bg-2);
+    display: flex;
+    justify-content: center;
+  }
+
+  .collapse:hover {
+    color: var(--theme-font-hover);
+    background: var(--theme-bg-3);
+    cursor: pointer;
+  }
 </style>

packages/web/src/icons/FontIcon.svelte

@@ -103,6 +103,10 @@
     'icon chevron-left': 'mdi mdi-chevron-left',
     'icon chevron-right': 'mdi mdi-chevron-right',
     'icon chevron-up': 'mdi mdi-chevron-up',
+    'icon chevron-double-down': 'mdi mdi-chevron-double-down',
+    'icon chevron-double-left': 'mdi mdi-chevron-double-left',
+    'icon chevron-double-right': 'mdi mdi-chevron-double-right',
+    'icon chevron-double-up': 'mdi mdi-chevron-double-up',
     'icon menu-right': 'mdi mdi-menu-right',
     'icon plugin': 'mdi mdi-toy-brick',
     'icon menu': 'mdi mdi-menu',

packages/web/src/perspectives/PerspectiveView.svelte

@@ -183,7 +183,7 @@
   </div>
 
   <svelte:fragment slot="2">
-    <VerticalSplitter>
+    <VerticalSplitter allowCollapseChild1 allowCollapseChild2>
       <svelte:fragment slot="1">
         <PerspectiveDesigner {config} {conid} {database} {setConfig} dbInfos={$dbInfos} {root} />
       </svelte:fragment>