trending/dbx
1
0
Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-02 02:34:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(import): apply dark color scheme to column mapping select

Browse Source
This commit is contained in:
lxk955
2026-10-02 02:10:15 +08:00
committed by GitHub
parent 312673cadf
commit c246a2cbea
6 changed files with 59 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/components/import/TableImportDialog.vue
+7 -7
View File
@@ -1559,10 +1559,10 @@ watch(rawProgressPercent, (percent) => {
<div v-if="supportsImportConflictPolicy" class="space-y-1.5 rounded-md border p-3">
<Label for="table-import-conflict-policy" class="text-xs">{{ t("tableImport.conflictPolicy") }}</Label>
<select id="table-import-conflict-policy" v-model="conflictPolicy" data-testid="table-import-conflict-policy" class="flex h-8 w-full rounded-md border border-input bg-background px-2 text-xs">
<option value="error">{{ t("tableImport.conflictError") }}</option>
<option value="skip">{{ t("tableImport.skipDuplicateRows") }}</option>
<option v-if="targetMode === 'existing'" value="updateExisting" :disabled="!canUpdateExistingRows">
<select id="table-import-conflict-policy" v-model="conflictPolicy" data-testid="table-import-conflict-policy" class="flex h-8 w-full rounded-md border border-input bg-background text-foreground px-2 text-xs [color-scheme:light] dark:[color-scheme:dark]">
<option value="error" class="bg-popover text-popover-foreground">{{ t("tableImport.conflictError") }}</option>
<option value="skip" class="bg-popover text-popover-foreground">{{ t("tableImport.skipDuplicateRows") }}</option>
<option v-if="targetMode === 'existing'" value="updateExisting" :disabled="!canUpdateExistingRows" class="bg-popover text-popover-foreground">
{{ t("tableImport.updateExistingRows") }}
</option>
</select>
@@ -1622,11 +1622,11 @@ watch(rawProgressPercent, (percent) => {
<select
v-else
:value="columnMapping[sourceColumn] || SKIP_VALUE"
class="h-7 w-full min-w-0 rounded-md border bg-background px-2 text-xs font-mono shadow-none hover:bg-muted/30 focus-visible:ring-1 focus-visible:ring-ring/25"
class="h-7 w-full min-w-0 rounded-md border border-input bg-background text-foreground px-2 text-xs font-mono shadow-none hover:bg-muted/30 focus-visible:ring-1 focus-visible:ring-ring/25 [color-scheme:light] dark:[color-scheme:dark]"
@change="(e) => updateMapping(sourceColumn, (e.target as HTMLSelectElement).value)"
>
<option :value="SKIP_VALUE">{{ t("tableImport.skipColumn") }}</option>
<option v-for="column in targetColumns" :key="column.name" :value="column.name">
<option :value="SKIP_VALUE" class="bg-popover text-popover-foreground">{{ t("tableImport.skipColumn") }}</option>
<option v-for="column in targetColumns" :key="column.name" :value="column.name" class="bg-popover text-popover-foreground">
{{ column.name }}
</option>
</select>
apps/desktop/src/components/import/__tests__/TableImportDialogTheme.spec.ts
Vendored
+37
View File
@@ -0,0 +1,37 @@
import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";
// Fixes #10142: In dark mode, native select dropdown menus in TableImportDialog
// (such as column mapping and conflict policy) rendered with a bright white
// popup background and light-colored text in Chromium/WebView2 because native
// select/option elements did not specify color-scheme or popover colors.
const tableImportDialogSource = readFileSync(new URL("../TableImportDialog.vue", import.meta.url), "utf8");
const tokensCssSource = readFileSync(new URL("../../../styles/tokens.css", import.meta.url), "utf8");
const globalsCssSource = readFileSync(new URL("../../../styles/globals.css", import.meta.url), "utf8");
describe("TableImportDialog theme and select color consistency (#10142)", () => {
it("declares color-scheme: light in :root and color-scheme: dark in .dark within tokens.css", () => {
expect(tokensCssSource).toMatch(/:root\s*\{[^}]*color-scheme:\s*light;/);
expect(tokensCssSource).toMatch(/\.dark\s*\{[^}]*color-scheme:\s*dark;/);
});
it("declares select color-scheme and option background in globals.css", () => {
expect(globalsCssSource).toMatch(/select\s*\{[^}]*color-scheme:\s*light;/);
expect(globalsCssSource).toMatch(/\.dark select[^}]*color-scheme:\s*dark;/);
expect(globalsCssSource).toMatch(/select option\s*\{[^}]*background-color:\s*var\(--popover\);[^}]*color:\s*var\(--popover-foreground\);/);
});
it("applies color-scheme and text-foreground to native select controls in TableImportDialog.vue", () => {
expect(tableImportDialogSource).toContain('id="table-import-conflict-policy"');
expect(tableImportDialogSource).toMatch(/id="table-import-conflict-policy"[^>]*\[color-scheme:light\] dark:\[color-scheme:dark\]/);
expect(tableImportDialogSource).toMatch(/id="table-import-conflict-policy"[^>]*text-foreground/);
expect(tableImportDialogSource).toMatch(/class="[^"]*h-7 w-full min-w-0 rounded-md[^"]*\[color-scheme:light\] dark:\[color-scheme:dark\]/);
expect(tableImportDialogSource).toMatch(/class="[^"]*h-7 w-full min-w-0 rounded-md[^"]*text-foreground/);
});
it("applies bg-popover and text-popover-foreground to option elements in TableImportDialog.vue", () => {
expect(tableImportDialogSource).toMatch(/<option[^>]*class="[^"]*bg-popover text-popover-foreground[^"]*"[^>]*>\s*\{\{ t\("tableImport\.skipColumn"\) \}\}\s*<\/option>/);
expect(tableImportDialogSource).toMatch(/<option[^>]*class="[^"]*bg-popover text-popover-foreground[^"]*"[^>]*>\s*\{\{\s*column\.name\s*\}\}\s*<\/option>/);
});
});
apps/desktop/src/styles/globals.css
+11
View File
@@ -1579,6 +1579,17 @@ html.dbx-data-grid-native-selection-blocked [role="textbox"] * {
cursor: pointer;
user-select: none;
}
select {
color-scheme: light;
}
.dark select,
html.dark select {
color-scheme: dark;
}
select option {
background-color: var(--popover);
color: var(--popover-foreground);
}
[role="tab"] {
user-select: none;
}
apps/desktop/src/styles/tokens.css
+2
View File
@@ -105,6 +105,7 @@
}
:root {
color-scheme: light;
--background: rgb(255 255 255);
--foreground: rgb(10 10 10);
--dbx-foreground-rgb: 10, 10, 10;
@@ -169,6 +170,7 @@
}
.dark {
color-scheme: dark;
--background: rgb(19 20 22);
--foreground: rgb(215 215 219);
--dbx-foreground-rgb: 215, 215, 219;
crates/dbx-core/assets/docs-export.css
Generated
+1 -1
View File
File diff suppressed because one or more lines are too long
crates/dbx-core/assets/docs-export.manifest.json
+1 -1
View File
@@ -39,7 +39,7 @@
"apps/desktop/src/lib/app/localeOptions.ts": "ce38be921d938dbd97d22fde6035699fe40380be3eb4af2caa5371bacca0d945",
"apps/desktop/src/lib/common/utils.ts": "76c4b2af1e03edeb8db389d9b2c1b56b72a57a1b5198d4e224671c1445c527da",
"apps/desktop/src/lib/diagram/erDiagram.ts": "c22416a9a5ec5e619acc2d8bc5451254a25abe29fc518e9fb4f611e076fe7b1f",
"apps/desktop/src/styles/tokens.css": "5b8f747a1eb93905dd797ed2c97b4aa3d18ebed866c2e1f150ff0d9cf52162f5",
"apps/desktop/src/styles/tokens.css": "ad954638ab9bf59640ee78b8d088d6c4565d3cedf78b93f73087d06b9fa9f2c3",
"apps/desktop/tsconfig.json": "ee02ba8f2f257b86235cd3053e8d6fbfefd7c39e0807b4ea5e36e133a78e836c",
"apps/desktop/vite.docs-export.config.ts": "833bc2cbd99f9c0740cbc1584640458492bad75c9518db4d1ce0edd6958881ec"
},