From 41193bcc283ecf88199d231ca2778772d38b30af Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sat, 26 Feb 2022 14:26:01 +0100
Subject: [PATCH] tabs in settings modal

---
 .../web/src/settings/SettingsModal.svelte     | 88 +++++++++++--------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte
index 818e78c46..7e639a1cf 100644
--- a/packages/web/src/settings/SettingsModal.svelte
+++ b/packages/web/src/settings/SettingsModal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import _ from 'lodash';
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import TabControl from '../elements/TabControl.svelte';
 
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
@@ -11,56 +12,65 @@
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
   import getElectron from '../utility/getElectron';
-  import { showSnackbarInfo } from '../utility/snackbar';
 
   const electron = getElectron();
   let restartWarning = false;
 </script>
 
 <SettingsFormProvider>
-  <ModalBase {...$$restProps}>
+  <ModalBase {...$$restProps} noPadding>
     <div slot="header">Settings</div>
 
     <FormValues let:values>
-      {#if electron}
-        <div class="heading">Appearance</div>
-        <FormCheckboxField
-          name="app.useNativeMenu"
-          label="Use system native menu"
-          on:change={() => {
-            restartWarning = true;
-          }}
-        />
-        {#if restartWarning}
-          <div class="ml-5 mb-3">
-            <FontIcon icon="img warn" /> Native menu settings will be applied after app restart
-          </div>
-        {/if}
-      {/if}
+      <TabControl
+        isInline
+        tabs={[
+          { label: 'General', slot: 1 },
+          { label: 'Themes', slot: 2 },
+        ]}
+      >
+        <svelte:fragment slot="1">
+          {#if electron}
+            <div class="heading">Appearance</div>
+            <FormCheckboxField
+              name="app.useNativeMenu"
+              label="Use system native menu"
+              on:change={() => {
+                restartWarning = true;
+              }}
+            />
+            {#if restartWarning}
+              <div class="ml-5 mb-3">
+                <FontIcon icon="img warn" /> Native menu settings will be applied after app restart
+              </div>
+            {/if}
+          {/if}
 
-      <div class="heading">Data grid</div>
-      <FormTextField
-        name="dataGrid.pageSize"
-        label="Page size (number of rows for incremental loading, must be between 5 and 1000)"
-        defaultValue="100"
-      />
-      <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} />
-      <!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
+          <div class="heading">Data grid</div>
+          <FormTextField
+            name="dataGrid.pageSize"
+            label="Page size (number of rows for incremental loading, must be between 5 and 1000)"
+            defaultValue="100"
+          />
+          <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} />
+          <!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
 
-      <FormCheckboxField name="dataGrid.thousandsSeparator" label="Use thousands separator for numbers" />
+          <FormCheckboxField name="dataGrid.thousandsSeparator" label="Use thousands separator for numbers" />
 
-      <div class="heading">Connection</div>
-      <FormCheckboxField
-        name="connection.autoRefresh"
-        label="Automatic refresh of database model on background"
-        defaultValue={false}
-      />
-      <FormTextField
-        name="connection.autoRefreshInterval"
-        label="Interval between automatic refreshes in seconds"
-        defaultValue="30"
-        disabled={values['connection.autoRefresh'] === false}
-      />
+          <div class="heading">Connection</div>
+          <FormCheckboxField
+            name="connection.autoRefresh"
+            label="Automatic refresh of database model on background"
+            defaultValue={false}
+          />
+          <FormTextField
+            name="connection.autoRefreshInterval"
+            label="Interval between automatic refreshes in seconds"
+            defaultValue="30"
+            disabled={values['connection.autoRefresh'] === false}
+          />
+        </svelte:fragment>
+      </TabControl>
     </FormValues>
 
     <div slot="footer">
@@ -74,5 +84,7 @@
   .heading {
     font-size: 20px;
     margin: 5px;
+    margin-left: var(--dim-large-form-margin);
+    margin-top: var(--dim-large-form-margin);
   }
 </style>