diff --git a/apps/desktop/src/components/editor/EditorSettingsDialog.vue b/apps/desktop/src/components/editor/EditorSettingsDialog.vue index d54ce39f9c..d57aec8158 100644 --- a/apps/desktop/src/components/editor/EditorSettingsDialog.vue +++ b/apps/desktop/src/components/editor/EditorSettingsDialog.vue @@ -88,6 +88,7 @@ import { type DeleteConnectionTabHandlingMode, type DataTabReuseMode, type DataGridFilterEditorView, + type DataGridToolbarLayout, type MultiStatementDefaultView, type OpenTabsRestoreMode, type AppCloseUnsavedTabsMode, @@ -665,6 +666,7 @@ const editShowIndexIndicatorsInHeader = ref(settingsStore.editorSettings.showInd const editCompactColumnHeaderActions = ref(settingsStore.editorSettings.compactColumnHeaderActions); const editDataGridQuickEntry = ref(settingsStore.editorSettings.dataGridQuickEntry); const editDataGridFilterEditorView = ref(settingsStore.editorSettings.dataGridFilterEditorView); +const editDataGridToolbarLayout = ref(settingsStore.editorSettings.dataGridToolbarLayout); const editDataGridKeepFilterEditorExpanded = ref(settingsStore.editorSettings.dataGridKeepFilterEditorExpanded); const dataGridFilterViewPreviewExpanded = ref(true); const editDataGridTextFilterPanelHeight = ref(settingsStore.editorSettings.dataGridTextFilterPanelHeight); @@ -1006,6 +1008,7 @@ function currentEditorSettingsDraft(): EditorSettingsDraft { compactColumnHeaderActions: editCompactColumnHeaderActions.value, dataGridQuickEntry: editDataGridQuickEntry.value, dataGridFilterEditorView: editDataGridFilterEditorView.value, + dataGridToolbarLayout: editDataGridToolbarLayout.value, dataGridKeepFilterEditorExpanded: editDataGridKeepFilterEditorExpanded.value, dataGridTextFilterPanelHeight: editDataGridTextFilterPanelHeight.value, defaultAutoKeepResults: editDefaultAutoKeepResults.value, @@ -1649,6 +1652,7 @@ function syncEditorSettingsDraftFromStore() { editCompactColumnHeaderActions.value = settingsStore.editorSettings.compactColumnHeaderActions; editDataGridQuickEntry.value = settingsStore.editorSettings.dataGridQuickEntry; editDataGridFilterEditorView.value = settingsStore.editorSettings.dataGridFilterEditorView; + editDataGridToolbarLayout.value = settingsStore.editorSettings.dataGridToolbarLayout; editDataGridKeepFilterEditorExpanded.value = settingsStore.editorSettings.dataGridKeepFilterEditorExpanded; editDataGridTextFilterPanelHeight.value = settingsStore.editorSettings.dataGridTextFilterPanelHeight; editDefaultAutoKeepResults.value = settingsStore.editorSettings.defaultAutoKeepResults; @@ -1780,6 +1784,7 @@ const editorSettingsDraftRefs: EditorSettingsDraftRefMap = { compactColumnHeaderActions: editCompactColumnHeaderActions, dataGridQuickEntry: editDataGridQuickEntry, dataGridFilterEditorView: editDataGridFilterEditorView, + dataGridToolbarLayout: editDataGridToolbarLayout, dataGridKeepFilterEditorExpanded: editDataGridKeepFilterEditorExpanded, dataGridTextFilterPanelHeight: editDataGridTextFilterPanelHeight, defaultAutoKeepResults: editDefaultAutoKeepResults, @@ -2302,6 +2307,7 @@ function resetDefaultsForTab(tab: SettingsCategory) { editCompactColumnHeaderActions.value = DEFAULT_EDITOR_SETTINGS.compactColumnHeaderActions; editDataGridQuickEntry.value = DEFAULT_EDITOR_SETTINGS.dataGridQuickEntry; editDataGridFilterEditorView.value = DEFAULT_EDITOR_SETTINGS.dataGridFilterEditorView; + editDataGridToolbarLayout.value = DEFAULT_EDITOR_SETTINGS.dataGridToolbarLayout; editDataGridKeepFilterEditorExpanded.value = DEFAULT_EDITOR_SETTINGS.dataGridKeepFilterEditorExpanded; editDataGridTextFilterPanelHeight.value = DEFAULT_EDITOR_SETTINGS.dataGridTextFilterPanelHeight; editDefaultAutoKeepResults.value = DEFAULT_EDITOR_SETTINGS.defaultAutoKeepResults; @@ -2407,6 +2413,7 @@ function resetAllDefaults() { editCompactColumnHeaderActions.value = DEFAULT_EDITOR_SETTINGS.compactColumnHeaderActions; editDataGridQuickEntry.value = DEFAULT_EDITOR_SETTINGS.dataGridQuickEntry; editDataGridFilterEditorView.value = DEFAULT_EDITOR_SETTINGS.dataGridFilterEditorView; + editDataGridToolbarLayout.value = DEFAULT_EDITOR_SETTINGS.dataGridToolbarLayout; editDataGridKeepFilterEditorExpanded.value = DEFAULT_EDITOR_SETTINGS.dataGridKeepFilterEditorExpanded; editDataGridTextFilterPanelHeight.value = DEFAULT_EDITOR_SETTINGS.dataGridTextFilterPanelHeight; editDefaultAutoKeepResults.value = DEFAULT_EDITOR_SETTINGS.defaultAutoKeepResults; @@ -7537,6 +7544,21 @@ onUnmounted(() => { +
+
+ +

{{ t("settings.dataGridToolbarLayoutDescription") }}

+
+ +
diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue index 57e8f85f2f..3d71c07adf 100644 --- a/apps/desktop/src/components/grid/DataGrid.vue +++ b/apps/desktop/src/components/grid/DataGrid.vue @@ -758,6 +758,7 @@ const compactColumnHeaderActions = computed(() => settingsStore.editorSettings.c const dataGridRenderMode = computed(() => settingsStore.editorSettings.dataGridRenderMode); const dataGridSearchMode = computed(() => settingsStore.editorSettings.dataGridSearchMode); const compactDataGridToolbar = computed(() => dataGridTopbarOverflowCompact.value || isDataGridToolbarCompact(dataGridTopbarWidth.value, dataGridViewportWidth.value, DATA_GRID_CONDITION_TOOLBAR_MIN_WIDTH)); +const splitDataGridToolbar = computed(() => settingsStore.editorSettings.dataGridToolbarLayout === "split"); const responsiveDataGridToolbarActionCount = computed(() => dataGridToolbarActionCollapseCount(dataGridTopbarWidth.value, dataGridViewportWidth.value, DATA_GRID_CONDITION_TOOLBAR_MIN_WIDTH)); const compactDataGridToolbarActionCount = computed(() => Math.max(responsiveDataGridToolbarActionCount.value, dataGridTopbarOverflowActionCount.value)); const infiniteScrollEnabled = computed(() => props.paginationEnabled && settingsStore.editorSettings.infiniteScroll); @@ -11974,12 +11975,18 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val
-
-
+
+
-
+