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

fix(desktop): align data tab table info display and column widths

Browse Source
This commit is contained in:
zipg authored and GitHub committed 2026-09-04 20:39:02 +08:00
1 parent 3ee0640fc2
commit 2ba123dd97
4 files changed
+40 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/grid/DataGrid.vue
+21 -13
View File
@@ -11138,7 +11138,8 @@ watch(cellDetailPanelLayout, (layout) => {
watch([showCellDetail, activeCellDetail, cellDetailPanelIsBottom, detailPanelHeight], scheduleActiveCellEditTextareaResize); watch([showCellDetail, activeCellDetail, cellDetailPanelIsBottom, detailPanelHeight], scheduleActiveCellEditTextareaResize);
const ddlDrawerStyle = computed(() => ({ const ddlDrawerStyle = computed(() => ({
width: `${ddlWidth.value}px`, width: `min(${ddlWidth.value}px, 100%)`,
maxWidth: "100%",
})); }));
const detailPanelStyle = computed(() => const detailPanelStyle = computed(() =>
@@ -11153,17 +11154,24 @@ const mongoJsonPreviewStyle = computed(() => ({
width: `${mongoJsonPreviewWidth.value}px`, width: `${mongoJsonPreviewWidth.value}px`,
})); }));
const contentGridStyle = computed(() => const contentGridStyle = computed(() => {
cellDetailPanelIsBottom.value && showCellDetail.value && activeCellDetail.value const hasRightCellDetail = !cellDetailPanelIsBottom.value && showCellDetail.value && activeCellDetail.value;
? { const tableInfoAvailableWidth = hasRightCellDetail ? `max(0px, calc(100% - ${detailPanelHeight.value}px))` : "100%";
gridTemplateColumns: "minmax(0, 1fr) auto", const tableInfoTrack = showTableInfo.value ? `minmax(0, min(${ddlWidth.value}px, ${tableInfoAvailableWidth}))` : "0px";
gridTemplateRows: `minmax(${CELL_DETAIL_TABLE_MIN_VISIBLE_HEIGHT}px, 1fr) minmax(0, min(${detailPanelHeight.value}px, 70vh, ${CELL_DETAIL_PANEL_MAX_HEIGHT}px, calc(100% - ${CELL_DETAIL_TABLE_MIN_VISIBLE_HEIGHT}px)))`, const detailTrack = hasRightCellDetail ? `minmax(0, min(${detailPanelHeight.value}px, 100%))` : "0px";
}
: { if (cellDetailPanelIsBottom.value && showCellDetail.value && activeCellDetail.value) {
gridTemplateColumns: "minmax(0, 1fr) auto auto", return {
gridTemplateRows: "minmax(0, 1fr)", gridTemplateColumns: `minmax(0, 1fr) ${tableInfoTrack}`,
}, gridTemplateRows: `minmax(${CELL_DETAIL_TABLE_MIN_VISIBLE_HEIGHT}px, 1fr) minmax(0, min(${detailPanelHeight.value}px, 70vh, ${CELL_DETAIL_PANEL_MAX_HEIGHT}px, calc(100% - ${CELL_DETAIL_TABLE_MIN_VISIBLE_HEIGHT}px)))`,
); };
}
return {
gridTemplateColumns: `minmax(0, 1fr) ${tableInfoTrack} ${detailTrack}`,
gridTemplateRows: "minmax(0, 1fr)",
};
});
function toggleCellDetailPanelLayout() { function toggleCellDetailPanelLayout() {
const nextLayout = cellDetailPanelIsBottom.value ? "right" : "bottom"; const nextLayout = cellDetailPanelIsBottom.value ? "right" : "bottom";
@@ -14188,7 +14196,7 @@ function openGridSnapshot() {
<div <div
v-if="showTableInfo" v-if="showTableInfo"
data-native-clipboard data-native-clipboard
class="table-info-drawer relative col-start-2 row-start-1 border-l flex flex-col bg-background min-w-0" class="table-info-drawer relative col-start-2 row-start-1 border-l flex flex-col bg-background min-w-0 max-w-full"
:class="[{ 'row-span-2': cellDetailPanelIsBottom }, { 'ddl-drawer-resizing': isResizingDdl }]" :class="[{ 'row-span-2': cellDetailPanelIsBottom }, { 'ddl-drawer-resizing': isResizingDdl }]"
:style="ddlDrawerStyle" :style="ddlDrawerStyle"
@contextmenu="onDrawerContextMenu" @contextmenu="onDrawerContextMenu"
apps/desktop/src/components/layout/ContentArea.vue
+16 -16
View File
@@ -798,23 +798,25 @@ watch(
// Table toolbox handlers // Table toolbox handlers
function handleTableImport() { function handleTableImport() {
const tab = props.activeTab; const tab = props.activeTab;
if (!tab.tableMeta || !tab.connectionId) return; const tableMeta = activeDataTabTableMeta.value;
if (!tableMeta || !tab.connectionId) return;
connectionStore.tableImportSource = { connectionStore.tableImportSource = {
connectionId: tab.connectionId, connectionId: tab.connectionId,
database: tab.database, database: tab.database,
schema: tab.tableMeta.schema, schema: tableMeta.schema,
tableName: tab.tableMeta.tableName, tableName: tableMeta.tableName,
}; };
} }
function handleTableDataGenerate() { function handleTableDataGenerate() {
const tab = props.activeTab; const tab = props.activeTab;
if (!tab.tableMeta || !tab.connectionId) return; const tableMeta = activeDataTabTableMeta.value;
if (!tableMeta || !tab.connectionId) return;
connectionStore.tableDataGenerateSource = { connectionStore.tableDataGenerateSource = {
connectionId: tab.connectionId, connectionId: tab.connectionId,
database: tab.database, database: tab.database,
schema: tab.tableMeta.schema, schema: tableMeta.schema,
tableName: tab.tableMeta.tableName, tableName: tableMeta.tableName,
}; };
} }
@@ -1976,19 +1978,17 @@ defineExpose({
<span v-if="activeConnection?.name?.trim()" data-data-header-connection class="inline-flex min-w-12 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground" :title="activeConnection.name"> <span v-if="activeConnection?.name?.trim()" data-data-header-connection class="inline-flex min-w-12 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground" :title="activeConnection.name">
{{ activeConnection.name }} {{ activeConnection.name }}
</span> </span>
<span class="inline-flex min-w-12 items-center truncate rounded border border-border bg-muted/50 px-2 py-0.5 font-medium" :title="activeTab.tableMeta?.tableName || activeTab.title"> <span class="inline-flex min-w-12 items-center truncate rounded border border-border bg-muted/50 px-2 py-0.5 font-medium" :title="activeDataTabTableMeta?.tableName || activeTab.title">
{{ activeTab.tableMeta?.tableName || activeTab.title }} {{ activeDataTabTableMeta?.tableName || activeTab.title }}
</span> </span>
<span class="inline-flex min-w-12 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground" :title="[activeTab.tableMeta?.schema, databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t)].filter(Boolean).join('@')"> <span class="inline-flex min-w-12 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground" :title="[activeDataTabTableMeta?.schema, databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t)].filter(Boolean).join('@')">
<template v-if="activeTab.tableMeta?.schema">{{ activeTab.tableMeta.schema }}@</template>{{ databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t) }} <template v-if="activeDataTabTableMeta?.schema">{{ activeDataTabTableMeta.schema }}@</template>{{ databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t) }}
</span>
<span v-if="showDataColumnsChip && activeTab.mode === 'data' && activeTab.tableMeta" class="inline-flex shrink-0 items-center rounded border border-border bg-muted/30 px-2 py-0.5 font-medium text-muted-foreground tabular-nums">
{{ activeTab.tableMeta.columns.length }} {{ t("tree.columns") }}
</span> </span>
<span v-if="showDataColumnsChip && activeDataTabTableMeta" class="inline-flex shrink-0 items-center rounded border border-border bg-muted/30 px-2 py-0.5 font-medium text-muted-foreground tabular-nums"> {{ activeDataTabTableMeta.columns.length }} {{ t("tree.columns") }} </span>
<span class="ml-auto" /> <span class="ml-auto" />
<DataGridColumnLayoutPopover v-if="activeTab.result?.columns.length" :grid="dataGridRef" trigger-class="px-1.5" /> <DataGridColumnLayoutPopover v-if="activeTab.result?.columns.length" :grid="dataGridRef" trigger-class="px-1.5" />
<Button <Button
v-if="showDataTableInfoButton && activeTab.result && activeTab.tableMeta && activeTab.connectionId" v-if="showDataTableInfoButton && activeTab.result && activeDataTabTableMeta && activeTab.connectionId"
variant="ghost" variant="ghost"
size="sm" size="sm"
class="h-5 text-xs px-1.5 shrink-0" class="h-5 text-xs px-1.5 shrink-0"
@@ -1997,7 +1997,7 @@ defineExpose({
@click="dataGridRef?.toggleDdl()" @click="dataGridRef?.toggleDdl()"
><TableProperties class="h-3.5 w-3.5" /><span v-if="!dataToolbarCompact">{{ t("grid.tableInfo") }}</span></Button ><TableProperties class="h-3.5 w-3.5" /><span v-if="!dataToolbarCompact">{{ t("grid.tableInfo") }}</span></Button
> >
<DropdownMenu v-if="activeTab.result && activeTab.tableMeta && activeTab.connectionId"> <DropdownMenu v-if="activeTab.result && activeDataTabTableMeta && activeTab.connectionId">
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="ghost" size="sm" class="h-5 text-xs px-1.5 shrink-0" :title="t('tableToolbox.title')" <Button variant="ghost" size="sm" class="h-5 text-xs px-1.5 shrink-0" :title="t('tableToolbox.title')"
><Toolbox class="h-3.5 w-3.5" /><span v-if="!dataToolbarCompact">{{ t("tableToolbox.title") }}</span></Button ><Toolbox class="h-3.5 w-3.5" /><span v-if="!dataToolbarCompact">{{ t("tableToolbox.title") }}</span></Button
@@ -2240,7 +2240,7 @@ defineExpose({
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<ToolbarOverflowMenu v-if="showDataToolbarOverflow" :label="t('toolbar.moreActions')"> <ToolbarOverflowMenu v-if="showDataToolbarOverflow" :label="t('toolbar.moreActions')">
<DropdownMenuItem v-if="activeTab.result && activeTab.tableMeta && activeTab.connectionId" @select="dataGridRef?.toggleDdl()"> <DropdownMenuItem v-if="activeTab.result && activeDataTabTableMeta && activeTab.connectionId" @select="dataGridRef?.toggleDdl()">
<TableProperties class="h-3.5 w-3.5" /> <TableProperties class="h-3.5 w-3.5" />
{{ t("grid.tableInfo") }} {{ t("grid.tableInfo") }}
</DropdownMenuItem> </DropdownMenuItem>
apps/desktop/src/components/layout/__tests__/ContentArea.dataHeader.spec.ts
Vendored
+2 -2
View File
@@ -21,7 +21,7 @@ describe("ContentArea data-mode header", () => {
}); });
it("keeps the full table and schema names reachable via title tooltips", () => { it("keeps the full table and schema names reachable via title tooltips", () => {
expect(contentAreaSource).toContain(':title="activeTab.tableMeta?.tableName || activeTab.title"'); expect(contentAreaSource).toContain(':title="activeDataTabTableMeta?.tableName || activeTab.title"');
expect(contentAreaSource).toContain("[activeTab.tableMeta?.schema, databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t)].filter(Boolean).join('@')"); expect(contentAreaSource).toContain("[activeDataTabTableMeta?.schema, databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t)].filter(Boolean).join('@')");
}); });
}); });
packages/app-tests/dataTabHeaderConnection.test.ts
Vendored
+1 -1
View File
@@ -22,7 +22,7 @@ function dataModeTemplate(): string {
test("data tab header shows the active connection before the table context", () => { test("data tab header shows the active connection before the table context", () => {
const template = dataModeTemplate(); const template = dataModeTemplate();
const connectionIndex = template.indexOf("data-data-header-connection"); const connectionIndex = template.indexOf("data-data-header-connection");
const tableIndex = template.indexOf("activeTab.tableMeta?.tableName"); const tableIndex = template.indexOf("activeDataTabTableMeta?.tableName");
assert.ok(connectionIndex >= 0 && connectionIndex < tableIndex); assert.ok(connectionIndex >= 0 && connectionIndex < tableIndex);
assert.match(template, /v-if="activeConnection\?\.name\?\.trim\(\)"/); assert.match(template, /v-if="activeConnection\?\.name\?\.trim\(\)"/);