Merge pull request #1280 from dbgate/feature/settings-tab-update2

Feature/settings tab update2

packages/web/src/elements/SettingsMenuControl.svelte

@@ -31,7 +31,7 @@
 </script>
 
 <div class="main" class:maxHeight100 class:flex1>
-  <HorizontalSplitter initialValue="20%">
+  <HorizontalSplitter initialValue="170px">
     <svelte:fragment slot="1">
       <div class="menu">
         {#each _.compact(items) as item, index}

packages/web/src/settings/GeneralSettings.svelte

@@ -1,87 +1,27 @@
 <script lang="ts">
     import { internalRedirectTo } from '../clientAuth';
-  import CheckboxField from '../forms/CheckboxField.svelte';
     import FormCheckboxField from '../forms/FormCheckboxField.svelte';
     import FormFieldTemplateLarge from '../forms/FormFieldTemplateLarge.svelte';
     import FormSelectField from '../forms/FormSelectField.svelte';
-  import FormTextField from '../forms/FormTextField.svelte';
     import SelectField from '../forms/SelectField.svelte';
     import FontIcon from '../icons/FontIcon.svelte';
     import { showModal } from '../modals/modalTools';
-  import { EDITOR_KEYBINDINGS_MODES } from '../query/AceEditor.svelte';
-  import { currentEditorKeybindigMode, currentEditorWrapEnabled } from '../stores';
     import { _t, getSelectedLanguage, setSelectedLanguage } from '../translations';
     import { isMac } from '../utility/common';
     import getElectron from '../utility/getElectron';
-  import { isProApp } from '../utility/proTools';
     import ConfirmModal from '../modals/ConfirmModal.svelte';
 
     const electron = getElectron();
     let restartWarning = false;
 </script>
 <div class="wrapper">
-    <div class="heading">{_t('settings.general', { defaultMessage: 'General' })}</div>
-{#if electron}
-    <div class="heading">{_t('settings.appearance', { defaultMessage: 'Appearance' })}</div>
-    <FormCheckboxField
-        name="app.useNativeMenu"
-        label={isMac()
-        ? _t('settings.useNativeWindowTitle', { defaultMessage: 'Use native window title' })
-        : _t('settings.useSystemNativeMenu', { defaultMessage: 'Use system native menu' })}
-        on:change={() => {
-        restartWarning = true;
-        }}
-    />
-    {#if restartWarning}
-        <div class="ml-5 mb-3">
-        <FontIcon icon="img warn" />
-        {_t('settings.nativeMenuRestartWarning', {
-            defaultMessage: 'Native menu settings will be applied after app restart',
-        })}
-        </div>
-    {/if}
-{/if}
 
-<FormCheckboxField
+    <div class="heading">{_t('settings.application', { defaultMessage: 'Application' })}</div>
-name="tabGroup.showServerName"
+    <FormFieldTemplateLarge
-label={_t('settings.tabGroup.showServerName', {
+        label={_t('settings.localization.language', { defaultMessage: 'Language' })}
-    defaultMessage: 'Show server name alongside database name in title of the tab group',
+        type="combo"
-})}
+    >
-defaultValue={false}
+        <SelectField
-/>
-
-<FormSelectField
-label={_t('settings.other.autoUpdateApplication', { defaultMessage: 'Auto update application' })}
-name="app.autoUpdateMode"
-isNative
-defaultValue=""
-options={[
-    {
-    value: 'skip',
-    label: _t('settings.other.autoUpdateApplication.skip', {
-        defaultMessage: 'Do not check for new versions',
-    }),
-    },
-    {
-    value: '',
-    label: _t('settings.other.autoUpdateApplication.check', { defaultMessage: 'Check for new versions' }),
-    },
-    {
-    value: 'download',
-    label: _t('settings.other.autoUpdateApplication.download', {
-        defaultMessage: 'Check and download new versions',
-    }),
-    },
-]}
-/>
-
-<div class="heading">{_t('settings.localization', { defaultMessage: 'Localization' })}</div>
-
-<FormFieldTemplateLarge
-label={_t('settings.localization.language', { defaultMessage: 'Language' })}
-type="combo"
->
-<SelectField
     isNative
     data-testid="SettingsModal_languageSelect"
     options={[
@@ -112,7 +52,64 @@ type="combo"
     });
     }}
 />
-</FormFieldTemplateLarge>
+    </FormFieldTemplateLarge>
+
+    <FormSelectField
+        label={_t('settings.other.autoUpdateApplication', { defaultMessage: 'Auto update application' })}
+        name="app.autoUpdateMode"
+        isNative
+        defaultValue=""
+        options={[
+            {
+            value: 'skip',
+            label: _t('settings.other.autoUpdateApplication.skip', {
+                defaultMessage: 'Do not check for new versions',
+            }),
+            },
+            {
+            value: '',
+            label: _t('settings.other.autoUpdateApplication.check', { defaultMessage: 'Check for new versions' }),
+            },
+            {
+            value: 'download',
+            label: _t('settings.other.autoUpdateApplication.download', {
+                defaultMessage: 'Check and download new versions',
+            }),
+            },
+        ]}
+    />
+
+    <div class="heading">{_t('settings.appearance', { defaultMessage: 'Appearance' })}</div>
+
+    {#if electron}
+        
+        <FormCheckboxField
+            name="app.useNativeMenu"
+            label={isMac()
+            ? _t('settings.useNativeWindowTitle', { defaultMessage: 'Use native window title' })
+            : _t('settings.useSystemNativeMenu', { defaultMessage: 'Use system native menu' })}
+            on:change={() => {
+            restartWarning = true;
+            }}
+        />
+        {#if restartWarning}
+            <div class="ml-5 mb-3">
+            <FontIcon icon="img warn" />
+            {_t('settings.nativeMenuRestartWarning', {
+                defaultMessage: 'Native menu settings will be applied after app restart',
+            })}
+            </div>
+        {/if}
+    {/if}
+
+    <FormCheckboxField
+    name="tabGroup.showServerName"
+    label={_t('settings.tabGroup.showServerName', {
+        defaultMessage: 'Show server name alongside database name in title of the tab group',
+    })}
+    defaultValue={false}
+    />
+
 </div>
 
 <style>

packages/web/src/settings/ThemeSettings.svelte

@@ -36,7 +36,7 @@ ORDER BY
 </script>
 
 <div class="wrapper">
-  <div class="heading">{_t('settings.appearance', { defaultMessage: 'Application theme' })}</div>
+  <div class="heading">{_t('settings.applicationTheme', { defaultMessage: 'Application theme' })}</div>
 
   <FormFieldTemplateLarge
   label={_t('settings.appearance.useSystemTheme', { defaultMessage: 'Use system theme' })}