github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-15 06:51:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): responsive table info sidebar and SQL toolbar layout

Browse Source
This commit is contained in:
zipg authored and GitHub committed 2026-09-07 21:26:11 +08:00
1 parent e3b9bae67e
commit 96a3dc052a
5 files changed
+60 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/grid/DataGrid.vue
+2 -1
View File
@@ -14332,8 +14332,9 @@ function openGridSnapshot() {
<Copy class="w-3 h-3" />
<span class="table-info-action-label">{{ t("grid.copyDdl") }}</span>
</Button>
<Button variant="ghost" size="icon" class="h-6 w-6" :class="{ 'bg-accent': settingsStore.editorSettings.tableDdlWordWrap }" @click="toggleDdlWrap">
<Button variant="ghost" size="sm" class="table-info-action-button h-6 px-2 text-xs" :class="{ 'bg-accent': settingsStore.editorSettings.tableDdlWordWrap }" :title="t('settings.wordWrap')" :aria-label="t('settings.wordWrap')" @click="toggleDdlWrap">
<WrapText class="w-3 h-3" />
<span class="table-info-action-label">{{ t("settings.wordWrap") }}</span>
</Button>
</div>
<div v-else-if="activeTableInfoTab === 'indexes' && canManageMongoIndexes" class="table-info-actions flex min-w-0 shrink-0 items-center gap-1">
apps/desktop/src/components/layout/EditorToolbar.vue
+4
View File
@@ -87,6 +87,7 @@ const toolbarTier = ref<EditorToolbarTier>(0);
// Available width when the current tier was condensed into; anchors the
// step-down hysteresis so a static narrow layout cannot oscillate.
const condensedAtWidth = ref(0);
const expandedTierRequiredWidths: Partial<Record<EditorToolbarTier, number>> = {};
let toolbarResizeObserver: ResizeObserver | undefined;
function measureToolbarTier() {
@@ -99,9 +100,12 @@ function measureToolbarTier() {
availableWidth: element.clientWidth,
contentWidth: element.scrollWidth,
condensedAtWidth: condensedAtWidth.value,
expandedTierRequiredWidths,
});
if (next !== toolbarTier.value) {
if (next > toolbarTier.value) {
const currentTier = toolbarTier.value;
expandedTierRequiredWidths[currentTier] = Math.max(expandedTierRequiredWidths[currentTier] ?? 0, element.scrollWidth);
condensedAtWidth.value = element.clientWidth;
}
toolbarTier.value = next;
apps/desktop/src/components/objects/ObjectBrowser.vue
+3 -2
View File
@@ -3592,7 +3592,7 @@ function getObjectBrowserMenuItems(item: ObjectBrowserRow): ContextMenuItem[] {
</div>
</div>
<!-- Right-side panel: table info or source -->
<div v-if="sidePanelRow || isEventEditor" class="object-browser-side-panel relative flex min-h-0 shrink-0 flex-col border-l bg-background" :class="{ 'side-panel-resizing': isResizingSidePanel }" :style="{ width: `${sidePanelWidth}px` }">
<div v-if="sidePanelRow || isEventEditor" class="object-browser-side-panel relative flex min-h-0 min-w-0 shrink-0 flex-col border-l bg-background" :class="{ 'side-panel-resizing': isResizingSidePanel }" :style="{ width: `min(${sidePanelWidth}px, 100%)` }">
<div class="absolute left-0 top-0 bottom-0 z-20 w-1.5 -translate-x-1/2 cursor-col-resize hover:bg-primary/30" @mousedown.prevent="onSidePanelResizeStart" />
<!-- Table info mode -->
<template v-if="sidePanelMode === 'table-info'">
@@ -3604,8 +3604,9 @@ function getObjectBrowserMenuItems(item: ObjectBrowserRow): ContextMenuItem[] {
<Copy class="w-3 h-3" />
<span class="table-info-action-label">{{ t("grid.copyDdl") }}</span>
</Button>
<Button variant="ghost" size="icon" class="h-6 w-6" :class="{ 'bg-accent': settingsStore.editorSettings.tableDdlWordWrap }" @click="toggleTableDdlWordWrap">
<Button variant="ghost" size="sm" class="table-info-action-button h-6 px-2 text-xs" :class="{ 'bg-accent': settingsStore.editorSettings.tableDdlWordWrap }" :title="t('settings.wordWrap')" :aria-label="t('settings.wordWrap')" @click="toggleTableDdlWordWrap">
<WrapText class="w-3 h-3" />
<span class="table-info-action-label">{{ t("settings.wordWrap") }}</span>
</Button>
</div>
<Button v-if="canOpenTableStructureEditor" variant="ghost" size="sm" class="table-info-action-button h-6 px-2 text-xs" :title="t('contextMenu.editStructure')" :aria-label="t('contextMenu.editStructure')" @click="openTableStructureEditor">