diff --git a/packages/web/src/commands/stdCommands.ts b/packages/web/src/commands/stdCommands.ts index 4e69d4fbe..938d56bff 100644 --- a/packages/web/src/commands/stdCommands.ts +++ b/packages/web/src/commands/stdCommands.ts @@ -16,7 +16,6 @@ import { import registerCommand from './registerCommand'; import { get } from 'svelte/store'; import AboutModal from '../modals/AboutModal.svelte'; -import SettingsModal from '../settings/SettingsModal.svelte'; import SqlGeneratorModal from '../modals/SqlGeneratorModal.svelte'; import { showModal } from '../modals/modalTools'; import newQuery, { newDiagram, newPerspective, newQueryDesign } from '../query/newQuery'; @@ -74,7 +73,14 @@ registerCommand({ category: __t('command.theme', { defaultMessage: 'Theme' }), name: __t('command.theme.change', { defaultMessage: 'Change' }), toolbarName: __t('command.theme.changeToolbar', { defaultMessage: 'Change theme' }), - onClick: () => showModal(SettingsModal, { selectedTab: 'theme' }), + onClick: () => openNewTab({ + title: 'Settings', + icon: 'icon settings', + tabComponent: 'SettingsTab', + props: { + selectedItem: 'theme', + }, + }), // getSubCommands: () => get(extensions).themes.map(themeCommand), }); diff --git a/packages/web/src/elements/SettingsMenuControl.svelte b/packages/web/src/elements/SettingsMenuControl.svelte index 7669682be..7e85e66b2 100644 --- a/packages/web/src/elements/SettingsMenuControl.svelte +++ b/packages/web/src/elements/SettingsMenuControl.svelte @@ -118,6 +118,10 @@ transition: background-color 0.2s ease; } + .menu-item:first-child { + border-top: 1px solid var(--theme-border); + } + .menu-item:hover { background-color: var(--theme-bg-hover); } diff --git a/packages/web/src/settings/GeneralSettings.svelte b/packages/web/src/settings/GeneralSettings.svelte index acff0fedb..365a7587d 100644 --- a/packages/web/src/settings/GeneralSettings.svelte +++ b/packages/web/src/settings/GeneralSettings.svelte @@ -49,6 +49,32 @@ label={_t('settings.tabGroup.showServerName', { })} defaultValue={false} /> + + +
{_t('settings.localization', { defaultMessage: 'Localization' })}
- import FormCheckboxField from "../forms/FormCheckboxField.svelte"; - import FormSelectField from "../forms/FormSelectField.svelte"; - import FormTextField from "../forms/FormTextField.svelte"; - import { _t } from "../translations"; - import { isProApp } from "../utility/proTools"; - - - - -
-
{_t('settings.other', { defaultMessage: 'Other' })}
- - - - - -{#if isProApp()} - -{/if} -
- - - \ No newline at end of file diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte deleted file mode 100644 index cc4706c37..000000000 --- a/packages/web/src/settings/SettingsModal.svelte +++ /dev/null @@ -1,850 +0,0 @@ - - - - -
{_t('settings.title', { defaultMessage: 'Settings' })}
- - - - - {#if electron} -
{_t('settings.appearance', { defaultMessage: 'Appearance' })}
- { - restartWarning = true; - }} - /> - {#if restartWarning} -
- - {_t('settings.nativeMenuRestartWarning', { - defaultMessage: 'Native menu settings will be applied after app restart', - })} -
- {/if} - {/if} - - -
{_t('settings.localization', { defaultMessage: 'Localization' })}
- - - { - setSelectedLanguage(e.detail); - showModal(ConfirmModal, { - message: _t('settings.localization.reloadWarning', { - defaultMessage: 'Application will be reloaded to apply new language settings', - }), - onConfirm: () => { - setTimeout(() => { - internalRedirectTo(electron ? '/index.html' : '/'); - }, 100); - }, - }); - }} - /> - - -
{_t('settings.dataGrid.title', { defaultMessage: 'Data grid' })}
- - {#if isProApp()} - - {/if} - - - - - - - - - - - - - - -
{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}
- -
-
- -
-
- - ({ label: mode.label, value: mode.value }))} - value={$currentEditorKeybindigMode} - on:change={e => ($currentEditorKeybindigMode = e.detail)} - /> - -
-
- - ($currentEditorWrapEnabled = e.target.checked)} - /> - -
-
- - - - - - - - - - - -
- -
{_t('settings.connection', { defaultMessage: 'Connection' })}
- - { - $lockedDatabaseMode = !$lockedDatabaseMode; - }, - }} - > - ($lockedDatabaseMode = e.target.checked)} /> - - - - - - -
{_t('settings.session', { defaultMessage: 'Query sessions' })}
- - -
- - -
{_t('settings.appearance', { defaultMessage: 'Application theme' })}
- - { - if ($currentTheme) { - $currentTheme = null; - } else { - $currentTheme = getSystemTheme(); - } - }, - }} - > - { - if (e.target['checked']) { - $currentTheme = null; - } else { - $currentTheme = getSystemTheme(); - } - }} - /> - - -
- {#each $extensions.themes as theme} - - {/each} -
- -
- {_t('settings.appearance.moreThemes', { defaultMessage: 'More themes are available as' })} - plugins -
- {_t('settings.appearance.afterInstalling', { - defaultMessage: - 'After installing theme plugin (try search "theme" in available extensions) new themes will be available here.', - })} -
- -
{_t('settings.appearance.editorTheme', { defaultMessage: 'Editor theme' })}
- -
-
- - ({ label: theme, value: theme }))} - value={$currentEditorTheme} - on:change={e => ($currentEditorTheme = e.detail)} - /> - -
- -
- - x.value == $currentEditorFontSize) ? $currentEditorFontSize : 'custom'} - on:change={e => ($currentEditorFontSize = e.detail)} - /> - -
- -
- - ($currentEditorFontSize = e.target['value'])} - disabled={!!FONT_SIZES.find(x => x.value == $currentEditorFontSize) && - $currentEditorFontSize != 'custom'} - /> - -
- -
- -
-
- -
- -
-
- -
{_t('settings.defaultActions', { defaultMessage: 'Default actions' })}
- - - - - - - - - - - - - -
- -
{_t('settings.behaviour', { defaultMessage: 'Behaviour' })}
- - - - - -
- - {_t('settings.behaviour.singleClickPreview', { - defaultMessage: - 'When you single-click or select a file in the "Tables, Views, Functions" view, it is shown in a preview mode and reuses an existing tab (preview tab). This is useful if you are quickly browsing tables and don\'t want every visited table to have its own tab. When you start editing the table or use double-click to open the table from the "Tables" view, a new tab is dedicated to that table.', - })} -
- - - -
{_t('settings.confirmations', { defaultMessage: 'Confirmations' })}
- - - -
- -
{_t('settings.other', { defaultMessage: 'Other' })}
- - - - - - {#if isProApp()} - - {/if} -
- - -
{_t('settings.other.license', { defaultMessage: 'License' })}
- { - licenseKeyCheckResult = await apiCall('config/check-license', { licenseKey: value }); - }} - /> - {#if licenseKeyCheckResult} -
- {#if licenseKeyCheckResult.status == 'ok'} -
- - {_t('settings.other.licenseKey.valid', { defaultMessage: 'License key is valid' })} -
- {#if licenseKeyCheckResult.validTo} -
- {_t('settings.other.licenseKey.validTo', { defaultMessage: 'License valid to:' })} - {licenseKeyCheckResult.validTo} -
- {/if} - {#if licenseKeyCheckResult.expiration} -
- {_t('settings.other.licenseKey.expiration', { defaultMessage: 'License key expiration:' })} - {safeFormatDate(licenseKeyCheckResult.expiration)} -
- {/if} - {:else if licenseKeyCheckResult.status == 'error'} -
- - {licenseKeyCheckResult.errorMessage ?? - _t('settings.other.licenseKey.invalid', { defaultMessage: 'License key is invalid' })} - {#if licenseKeyCheckResult.expiration} -
- {_t('settings.other.licenseKey.expiration', { defaultMessage: 'License key expiration:' })} - {safeFormatDate(licenseKeyCheckResult.expiration)} -
- {/if} -
- {#if licenseKeyCheckResult.isExpired} -
- { - licenseKeyCheckResult = await apiCall('config/get-new-license', { oldLicenseKey: licenseKey }); - if (licenseKeyCheckResult.licenseKey) { - apiCall('config/update-settings', { 'other.licenseKey': licenseKeyCheckResult.licenseKey }); - } - }} - /> -
- {/if} - {/if} -
- {/if} -
- - -
{_t('settings.externalTools', { defaultMessage: 'External tools' })}
- - - - - -
- - - - -
-
- -
- - -
-
-
- - diff --git a/packages/web/src/tabs/SettingsTab.svelte b/packages/web/src/tabs/SettingsTab.svelte index e4e89c8f9..290530b96 100644 --- a/packages/web/src/tabs/SettingsTab.svelte +++ b/packages/web/src/tabs/SettingsTab.svelte @@ -11,7 +11,6 @@ import DefaultActionsSettings from "../settings/DefaultActionsSettings.svelte"; import BehaviourSettings from "../settings/BehaviourSettings.svelte"; import ExternalToolsSettings from "../settings/ExternalToolsSettings.svelte"; - import OtherSettings from "../settings/OtherSettings.svelte"; import LicenseSettings from "../settings/LicenseSettings.svelte"; import { isProApp } from "../utility/proTools"; import { _t } from "../translations"; @@ -20,6 +19,8 @@ import SQLEditorSettings from "../settings/SQLEditorSettings.svelte"; import AiSettingsTab from "../settings/AiSettingsTab.svelte"; + export let selectedItem = 'general'; + const menuItems = [ { label: _t('settings.general', { defaultMessage: 'General' }), @@ -98,16 +99,7 @@ props: {}, testid: 'settings-ai', }, - { - label: _t('settings.other', { defaultMessage: 'Other' }), - identifier: 'other', - component: OtherSettings, - props: {}, - testid: 'settings-other', - }, ]; - - let selectedItem = 'general';