dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-18 21:55:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

tabs in settings modal

Browse Source
This commit is contained in:
Jan Prochazka
2022-02-26 14:26:01 +01:00
parent fbae2341d5
commit 41193bcc28
1 changed files with 50 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
packages/web/src/settings/SettingsModal.svelte
View File

@@ -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>