From 9713c9b88eef86cd4b509d28ab8c71ad8f19ffc2 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sun, 28 Mar 2021 20:11:58 +0200
Subject: [PATCH] sqlgen design

---
 .../src/elements/HorizontalSplitter.svelte    |  2 +
 .../web/src/modals/SqlGeneratorModal.svelte   | 49 ++++++++++---------
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/packages/web/src/elements/HorizontalSplitter.svelte b/packages/web/src/elements/HorizontalSplitter.svelte
index ec58177e..1ca32888 100644
--- a/packages/web/src/elements/HorizontalSplitter.svelte
+++ b/packages/web/src/elements/HorizontalSplitter.svelte
@@ -1,5 +1,7 @@
 <script context="module">
   export function computeSplitterSize(initialValue, clientSize) {
+    if (_.isString(initialValue) && initialValue.startsWith('~') && initialValue.endsWith('px'))
+      return clientSize - parseInt(initialValue.slice(1, -2));
     if (_.isString(initialValue) && initialValue.endsWith('px')) return parseInt(initialValue.slice(0, -2));
     if (_.isString(initialValue) && initialValue.endsWith('%'))
       return (clientSize * parseFloat(initialValue.slice(0, -1))) / 100;
diff --git a/packages/web/src/modals/SqlGeneratorModal.svelte b/packages/web/src/modals/SqlGeneratorModal.svelte
index 1a794030..a5a674f9 100644
--- a/packages/web/src/modals/SqlGeneratorModal.svelte
+++ b/packages/web/src/modals/SqlGeneratorModal.svelte
@@ -27,6 +27,7 @@
 
   import ModalBase from './ModalBase.svelte';
   import { closeCurrentModal } from './modalTools';
+  import WidgetTitle from '../widgets/WidgetTitle.svelte';
 
   export let conid;
   export let database;
@@ -90,25 +91,31 @@
 
     <HorizontalSplitter initialValue="300px" bind:size={managerSize}>
       <svelte:fragment slot="1">
-        <WidgetColumnBar>
-          <WidgetColumnBarItem title="Choose objects" name="objects" height="60%">
-            <SearchBoxWrapper>
-              <SearchInput placeholder="Search tables or objects" bind:value={objectsFilter} />
-            </SearchBoxWrapper>
+        <div>
+          <WidgetTitle>Choose objects</WidgetTitle>
+          <SearchBoxWrapper>
+            <SearchInput placeholder="Search tables or objects" bind:value={objectsFilter} />
+          </SearchBoxWrapper>
 
-            <WidgetsInnerContainer>
-              <AppObjectList
-                list={objectList.map(x => ({ ...x, conid, database }))}
-                module={databaseObjectAppObject}
-                groupFunc={data => _.startCase(data.objectTypeField)}
-                isExpandable={data => data.objectTypeField == 'tables' || data.objectTypeField == 'views'}
-                filter={objectsFilter}
-                {checkedObjectsStore}
-              />
-            </WidgetsInnerContainer>
-          </WidgetColumnBarItem>
+          <WidgetsInnerContainer>
+            <AppObjectList
+              list={objectList.map(x => ({ ...x, conid, database }))}
+              module={databaseObjectAppObject}
+              groupFunc={data => _.startCase(data.objectTypeField)}
+              isExpandable={data => data.objectTypeField == 'tables' || data.objectTypeField == 'views'}
+              filter={objectsFilter}
+              {checkedObjectsStore}
+            />
+          </WidgetsInnerContainer>
+        </div>
+      </svelte:fragment>
 
-          <WidgetColumnBarItem title="Settings" name="settings">
+      <svelte:fragment slot="2">
+        <HorizontalSplitter initialValue="~300px">
+          <svelte:fragment slot="1">
+            <SqlEditor readOnly value={sqlPreview} />
+          </svelte:fragment>
+          <svelte:fragment slot="2">
             <WidgetsInnerContainer>
               <FormValues let:values>
                 <FormCheckboxField label="Drop tables" name="dropTables" />
@@ -143,12 +150,8 @@
           <HashCheckBox label='Create' hashName={`gensql.create${objTypePascal}`} onChange={onChange} /> -->
               </FormValues>
             </WidgetsInnerContainer>
-          </WidgetColumnBarItem>
-        </WidgetColumnBar>
-      </svelte:fragment>
-
-      <svelte:fragment slot="2">
-        <SqlEditor readOnly value={sqlPreview} />
+          </svelte:fragment>
+        </HorizontalSplitter>
       </svelte:fragment>
     </HorizontalSplitter>