tabs in settings modal

This commit is contained in:
Jan Prochazka
2022-02-26 14:26:01 +01:00
parent fbae2341d5
commit 41193bcc28

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,17 +12,24 @@
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>
<TabControl
isInline
tabs={[
{ label: 'General', slot: 1 },
{ label: 'Themes', slot: 2 },
]}
>
<svelte:fragment slot="1">
{#if electron} {#if electron}
<div class="heading">Appearance</div> <div class="heading">Appearance</div>
<FormCheckboxField <FormCheckboxField
@@ -61,6 +69,8 @@
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>