dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-25 14:26:00 +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"> <script lang="ts">
import _ from 'lodash'; import _ from 'lodash';
import FormStyledButton from '../buttons/FormStyledButton.svelte'; import FormStyledButton from '../buttons/FormStyledButton.svelte';
import TabControl from '../elements/TabControl.svelte';
import FormCheckboxField from '../forms/FormCheckboxField.svelte'; import FormCheckboxField from '../forms/FormCheckboxField.svelte';
import FormTextField from '../forms/FormTextField.svelte'; import FormTextField from '../forms/FormTextField.svelte';
@@ -11,56 +12,65 @@
import ModalBase from '../modals/ModalBase.svelte'; import ModalBase from '../modals/ModalBase.svelte';
import { closeCurrentModal } from '../modals/modalTools'; import { closeCurrentModal } from '../modals/modalTools';
import getElectron from '../utility/getElectron'; import getElectron from '../utility/getElectron';
import { showSnackbarInfo } from '../utility/snackbar';
const electron = getElectron(); const electron = getElectron();
let restartWarning = false; let restartWarning = false;
</script> </script>
<SettingsFormProvider> <SettingsFormProvider>
<ModalBase {...$$restProps}> <ModalBase {...$$restProps} noPadding>
<div slot="header">Settings</div> <div slot="header">Settings</div>
<FormValues let:values> <FormValues let:values>
{#if electron} <TabControl
<div class="heading">Appearance</div> isInline
<FormCheckboxField tabs={[
name="app.useNativeMenu" { label: 'General', slot: 1 },
label="Use system native menu" { label: 'Themes', slot: 2 },
on:change={() => { ]}
restartWarning = true; >
}} <svelte:fragment slot="1">
/> {#if electron}
{#if restartWarning} <div class="heading">Appearance</div>
<div class="ml-5 mb-3"> <FormCheckboxField
<FontIcon icon="img warn" /> Native menu settings will be applied after app restart name="app.useNativeMenu"
</div> label="Use system native menu"
{/if} on:change={() => {
{/if} 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> <div class="heading">Data grid</div>
<FormTextField <FormTextField
name="dataGrid.pageSize" name="dataGrid.pageSize"
label="Page size (number of rows for incremental loading, must be between 5 and 1000)" label="Page size (number of rows for incremental loading, must be between 5 and 1000)"
defaultValue="100" 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.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> <div class="heading">Connection</div>
<FormCheckboxField <FormCheckboxField
name="connection.autoRefresh" name="connection.autoRefresh"
label="Automatic refresh of database model on background" label="Automatic refresh of database model on background"
defaultValue={false} defaultValue={false}
/> />
<FormTextField <FormTextField
name="connection.autoRefreshInterval" name="connection.autoRefreshInterval"
label="Interval between automatic refreshes in seconds" label="Interval between automatic refreshes in seconds"
defaultValue="30" defaultValue="30"
disabled={values['connection.autoRefresh'] === false} disabled={values['connection.autoRefresh'] === false}
/> />
</svelte:fragment>
</TabControl>
</FormValues> </FormValues>
<div slot="footer"> <div slot="footer">
@@ -74,5 +84,7 @@
.heading { .heading {
font-size: 20px; font-size: 20px;
margin: 5px; margin: 5px;
margin-left: var(--dim-large-form-margin);
margin-top: var(--dim-large-form-margin);
} }
</style> </style>