github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-14 22:50:26 +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);
const ddlDrawerStyle = computed(() => ({
width: `${ddlWidth.value}px`,
width: `min(${ddlWidth.value}px, 100%)`,
maxWidth: "100%",
}));
const detailPanelStyle = computed(() =>
@@ -11153,17 +11154,24 @@ const mongoJsonPreviewStyle = computed(() => ({
width: `${mongoJsonPreviewWidth.value}px`,
}));
const contentGridStyle = computed(() =>
cellDetailPanelIsBottom.value && showCellDetail.value && activeCellDetail.value
? {
gridTemplateColumns: "minmax(0, 1fr) auto",
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)))`,
}
: {
gridTemplateColumns: "minmax(0, 1fr) auto auto",
gridTemplateRows: "minmax(0, 1fr)",
},
);
const contentGridStyle = computed(() => {
const hasRightCellDetail = !cellDetailPanelIsBottom.value && showCellDetail.value && activeCellDetail.value;
const tableInfoAvailableWidth = hasRightCellDetail ? `max(0px, calc(100% - ${detailPanelHeight.value}px))` : "100%";
const tableInfoTrack = showTableInfo.value ? `minmax(0, min(${ddlWidth.value}px, ${tableInfoAvailableWidth}))` : "0px";
const detailTrack = hasRightCellDetail ? `minmax(0, min(${detailPanelHeight.value}px, 100%))` : "0px";
if (cellDetailPanelIsBottom.value && showCellDetail.value && activeCellDetail.value) {
return {
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() {
const nextLayout = cellDetailPanelIsBottom.value ? "right" : "bottom";
@@ -14188,7 +14196,7 @@ function openGridSnapshot() {
<div
v-if="showTableInfo"
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 }]"
:style="ddlDrawerStyle"
@contextmenu="onDrawerContextMenu"
apps/desktop/src/components/layout/ContentArea.vue
+16 -16
View File
@@ -798,23 +798,25 @@ watch(
// Table toolbox handlers
function handleTableImport() {
const tab = props.activeTab;
if (!tab.tableMeta || !tab.connectionId) return;
const tableMeta = activeDataTabTableMeta.value;
if (!tableMeta || !tab.connectionId) return;
connectionStore.tableImportSource = {
connectionId: tab.connectionId,
database: tab.database,
schema: tab.tableMeta.schema,
tableName: tab.tableMeta.tableName,
schema: tableMeta.schema,
tableName: tableMeta.tableName,
};
}
function handleTableDataGenerate() {
const tab = props.activeTab;
if (!tab.tableMeta || !tab.connectionId) return;
const tableMeta = activeDataTabTableMeta.value;
if (!tableMeta || !tab.connectionId) return;
connectionStore.tableDataGenerateSource = {
connectionId: tab.connectionId,
database: tab.database,
schema: tab.tableMeta.schema,
tableName: tab.tableMeta.tableName,
schema: tableMeta.schema,
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">
{{ activeConnection.name }}
</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">
{{ 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">
{{ activeDataTabTableMeta?.tableName || activeTab.title }}
</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('@')">
<template v-if="activeTab.tableMeta?.schema">{{ activeTab.tableMeta.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 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="activeDataTabTableMeta?.schema">{{ activeDataTabTableMeta.schema }}@</template>{{ databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t) }}
</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" />
<DataGridColumnLayoutPopover v-if="activeTab.result?.columns.length" :grid="dataGridRef" trigger-class="px-1.5" />
<Button
v-if="showDataTableInfoButton && activeTab.result && activeTab.tableMeta && activeTab.connectionId"
v-if="showDataTableInfoButton && activeTab.result && activeDataTabTableMeta && activeTab.connectionId"
variant="ghost"
size="sm"
class="h-5 text-xs px-1.5 shrink-0"
@@ -1997,7 +1997,7 @@ defineExpose({
@click="dataGridRef?.toggleDdl()"
><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>
<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
@@ -2240,7 +2240,7 @@ defineExpose({
</PopoverContent>
</Popover>
<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" />
{{ t("grid.tableInfo") }}
</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", () => {
expect(contentAreaSource).toContain(':title="activeTab.tableMeta?.tableName || activeTab.title"');
expect(contentAreaSource).toContain("[activeTab.tableMeta?.schema, databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t)].filter(Boolean).join('@')");
expect(contentAreaSource).toContain(':title="activeDataTabTableMeta?.tableName || activeTab.title"');
expect(contentAreaSource).toContain("[activeDataTabTableMeta?.schema, databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t)].filter(Boolean).join('@')");
});
});