github/dbx
4
0
Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-23 04:55:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: use Geist Variable 12.5px for data grid tables

Browse Source
This commit is contained in:
t8y2
2026-06-16 11:10:05 +08:00
parent 9a2a21c09a
commit 05a98f6f4f
3 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/components/grid/DataGrid.vue
+9 -10
View File
@@ -6929,7 +6929,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
<div class="relative" :style="{ width: `${totalWidth}px`, height: `${canvasContentHeight}px` }">
<canvas
ref="canvasRef"
class="canvas-grid-surface dbx-editor-font-family sticky left-0 top-0 z-0 block text-xs font-normal"
class="canvas-grid-surface dbx-data-grid-font-family sticky left-0 top-0 z-0 block text-[12.5px]/[1rem] font-normal"
:style="{ width: `${canvasSurfaceWidth}px`, height: `${canvasViewportHeight}px` }"
@mousemove="onCanvasMouseMove"
@mouseleave="onCanvasMouseLeave"
@@ -6937,8 +6937,8 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
@contextmenu="onCanvasContext"
@dblclick="onCanvasDblClick"
/>
<div ref="canvasOverlayRef" class="canvas-grid-overlay dbx-editor-font-family sticky left-0 top-0 z-10 overflow-hidden" :style="canvasOverlayStyle">
<div v-if="canvasEditingCell" class="absolute pointer-events-auto z-20" :class="{ 'tabular-nums': canvasEditingCellIsNumeric }" :style="canvasEditingCellStyle" @mousedown.stop @click.stop>
<div ref="canvasOverlayRef" class="canvas-grid-overlay dbx-data-grid-font-family sticky left-0 top-0 z-10 overflow-hidden" :style="canvasOverlayStyle">
<div v-if="canvasEditingCell" class="absolute pointer-events-auto z-20 tabular-nums" :style="canvasEditingCellStyle" @mousedown.stop @click.stop>
<TemporalCellEditor v-if="temporalEditorKindForColumn(canvasEditingCell.actualColIdx)" v-model="editValue" :kind="temporalEditorKindForColumn(canvasEditingCell.actualColIdx)!" @cancel="cancelEdit" @commit="commitGridEdit" />
<EnumCellEditor
v-else-if="isEnumGridColumn(canvasEditingCell.actualColIdx)"
@@ -6954,7 +6954,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
autocapitalize="off"
autocorrect="off"
spellcheck="false"
class="cell-edit-input absolute inset-0 bg-background border-2 border-primary px-2.5 py-0 text-xs leading-[22px] outline-none z-10"
class="cell-edit-input absolute inset-0 bg-background border-2 border-primary px-2.5 py-0 text-[12.5px] leading-[22px] outline-none z-10"
@blur="commitEditFromBlur"
@click.stop
@keydown.stop="onEditKeydown"
@@ -7000,7 +7000,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
<RecycleScroller
v-else-if="hasVisibleRows"
ref="scrollerRef"
class="data-grid-scroller dbx-editor-font-family flex-1 overflow-x-auto overscroll-none"
class="data-grid-scroller dbx-data-grid-font-family flex-1 overflow-x-auto overscroll-none text-[12.5px]"
:class="{ 'is-scrolling': isScrolling }"
:items="displayItems"
:item-size="26"
@@ -7040,7 +7040,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
<div
v-for="col in renderedGridColumns"
:key="col.actualColIdx"
class="group/cell shrink-0 px-3 py-1 border-r border-border whitespace-nowrap overflow-hidden text-ellipsis relative select-none flex items-center"
class="group/cell shrink-0 px-3 py-1 border-r border-border whitespace-nowrap overflow-hidden text-ellipsis relative select-none flex items-center tabular-nums text-[12.5px]"
:style="renderedColumnStyle(col.visibleColIdx)"
:class="{
'text-muted-foreground italic': isNull(item.data[col.actualColIdx]),
@@ -7051,7 +7051,6 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
'row-cell-selected-dirty': rowCellsUseSelectionVisual(item.id) && !cellIsSelected(item.displayIndex, col.visibleColIdx) && item.isDirtyCol[col.actualColIdx],
'bg-yellow-200/60 dark:bg-yellow-500/20': cellIsSearchMatch(item.displayIndex, col.actualColIdx),
'ring-2 ring-inset ring-yellow-500 bg-yellow-300/60 dark:bg-yellow-500/40': cellIsCurrentMatch(item.displayIndex, col.actualColIdx),
'tabular-nums': typeof item.data[col.actualColIdx] === 'number',
'cursor-text hover:bg-accent/50': !isScrolling && canEditCellItem(item, col.actualColIdx),
'line-through': item.isDeleted,
}"
@@ -7071,7 +7070,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
autocapitalize="off"
autocorrect="off"
spellcheck="false"
class="cell-edit-input absolute inset-0 bg-background border-2 border-primary px-2.5 py-0 text-xs leading-[22px] outline-none z-10"
class="cell-edit-input absolute inset-0 bg-background border-2 border-primary px-2.5 py-0 text-[12.5px] leading-[22px] outline-none z-10"
@blur="commitEditFromBlur"
@click.stop
@keydown.stop="onEditKeydown"
@@ -8075,8 +8074,8 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
.canvas-grid-surface {
cursor: cell;
font-family: var(--dbx-editor-font-family, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace));
font-size: 0.75rem;
font-family: var(--dbx-data-grid-font-family);
font-size: 12.5px;
font-weight: 400;
line-height: 1rem;
outline: none;
apps/desktop/src/lib/canvasDataGridRenderer.ts
+3 -3
View File
@@ -87,7 +87,7 @@ function setCanvasNumericVariant(ctx: CanvasRenderingContext2D, value: "normal"
}
function canvasTabularFontFamily(fontFamily: string): string {
return fontFamily;
return fontFamily.replace(/"Geist Variable"/g, '"Geist Variable Tabular"');
}
const FIT_CANVAS_TEXT_CACHE_MAX = 10000;
@@ -362,8 +362,8 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
const value = item.data[actualColIdx];
ctx.textAlign = "left";
ctx.fillStyle = value === null ? theme.mutedForeground : theme.foreground;
ctx.font = value === null ? italicFont : typeof value === "number" ? tabularFont : normalFont;
setCanvasNumericVariant(ctx, typeof value === "number" ? "tabular-nums" : "normal");
ctx.font = value === null ? italicFont : tabularFont;
setCanvasNumericVariant(ctx, value === null ? "normal" : "tabular-nums");
const textLeft = alignCanvasPixel(x + 12, dpr);
const paddedMaxWidth = Math.max(0, x + colWidth - textLeft - 12);
const isEditingThisCell = editingCell?.rowId === item.id && editingCell.col === actualColIdx;
apps/desktop/src/styles/globals.css
+9
View File
@@ -275,6 +275,15 @@ body.dbx-table-reference-dragging * {
font-family: var(--dbx-editor-font-family, var(--font-mono, monospace));
}
:root {
--dbx-data-grid-font-family: "Geist Variable", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.dbx-data-grid-font-family {
font-family: var(--dbx-data-grid-font-family);
font-size: 12.5px;
}
/* Splitpanes */
.splitpanes--horizontal .splitpanes__pane {
transition: none !important;