Skip to content

refactor(settings): 字体选择器触发器并入语言/主题共享样式 #577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vastsa merged 1 commit into from
Sep 18, 2026
+42 −67
Merged

refactor(settings): 字体选择器触发器并入语言/主题共享样式 #577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/desktop/src/components/settings/FontFamilyRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,11 +166,11 @@ export function FontFamilyRow({
const needle = query.trim().toLowerCase();
if (!needle) return options;
return options.filter((option) => {
const localized =
option.group === "default" ? defaultLabel.toLowerCase() : option.label.toLowerCase();
return (
localized.includes(needle) || option.label.toLowerCase().includes(needle)
);
const haystack =
option.group === "default"
? `${defaultLabel} ${option.label}`.toLowerCase()
: option.label.toLowerCase();
return haystack.includes(needle);
});
}, [defaultLabel, options, query]);

Expand Down
75 changes: 19 additions & 56 deletions apps/desktop/src/styles/settings.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -760,51 +760,10 @@
font-size: var(--text-sm-plus);
}

/* Global UI font picker (Appearance card). Pill trigger mirrors language /
theme: hug the current label, capped by the settings control column. The
menu portals to document.body as a fixed floating layer so the settings
card's overflow cannot clip it. */
.settings-font {
position: relative;
width: max-content;
max-width: 100%;
min-width: 0;
}

.settings-font-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
width: max-content;
max-width: 100%;
min-width: 0;
height: 30px;
padding: 0 10px 0 12px;
border-radius: var(--radius-full);
background: var(--ds-raised);
box-shadow: var(--ds-raised-shadow);
color: var(--ds-text-primary);
font-size: var(--text-sm-plus);
}

.settings-font-trigger:hover {
background: var(--ds-bg-hover);
}

.settings-font-trigger-label {
min-width: 0;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}

.settings-font-trigger > svg {
flex: 0 0 auto;
color: var(--ds-text-muted);
}

/* Global UI font picker (Appearance card). The closed pill shares the
language / theme trigger definition below; the menu portals to
document.body as a fixed floating layer so the settings card's overflow
cannot clip it. */
.settings-font-menu {
position: fixed;
z-index: 60;
Expand Down Expand Up @@ -931,15 +890,15 @@
text-align: center;
}

/* Language and theme pickers (Appearance) plus the short-list menu selects on
the remaining tabs. Pill trigger matches the font picker; the closed control
hugs the current label (capped by the row) so a short value does not stretch
the column. The menu is an AnchoredMenu so the settings card cannot clip it,
and one definition here means a design change reaches every Settings picker
together. */
/* Appearance pickers (language, theme, font) plus the short-list menu selects
on the remaining tabs. The closed control hugs the current label (capped by
the row) so a short value does not stretch the column. Language and theme
menus are AnchoredMenu; the font menu portals itself. One definition here
means a design change reaches every Settings picker together. */
.settings-language-anchor,
.settings-theme-anchor,
.settings-menu-select-anchor {
.settings-menu-select-anchor,
.settings-font {
position: relative;
width: max-content;
max-width: 100%;
Expand All @@ -952,7 +911,8 @@

.settings-language-trigger,
.settings-theme-trigger,
.settings-menu-select-trigger {
.settings-menu-select-trigger,
.settings-font-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
Expand All @@ -975,7 +935,8 @@

.settings-language-trigger:hover,
.settings-theme-trigger:hover,
.settings-menu-select-trigger:hover {
.settings-menu-select-trigger:hover,
.settings-font-trigger:hover {
background: var(--ds-bg-hover);
}

Expand All @@ -987,7 +948,8 @@

.settings-language-trigger-label,
.settings-theme-trigger-label,
.settings-menu-select-trigger-label {
.settings-menu-select-trigger-label,
.settings-font-trigger-label {
min-width: 0;
flex: 0 1 auto;
overflow: hidden;
Expand All @@ -1002,7 +964,8 @@

.settings-language-trigger > svg,
.settings-theme-trigger > svg,
.settings-menu-select-trigger > svg {
.settings-menu-select-trigger > svg,
.settings-font-trigger > svg {
flex: 0 0 auto;
color: var(--ds-text-muted);
}
Expand Down
20 changes: 16 additions & 4 deletions apps/desktop/test/settings-font-picker.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,25 @@ test("the closed trigger and search use the localized system-default label", ()
rowSource,
/selectedOption\?\.group === "default" \|\| selectedValue === ""/,
);
assert.match(rowSource, /option\.group === "default" \? defaultLabel\.toLowerCase\(\)/);
assert.match(
rowSource,
/option\.group === "default"[\s\S]*?`\$\{defaultLabel\} \$\{option\.label\}`\.toLowerCase\(\)/,
);
});

test("the font trigger hugs the current label like language and theme", () => {
assert.match(styles, /\.settings-font\s*\{[^}]*width:\s*max-content;/s);
assert.match(styles, /\.settings-font-trigger\s*\{[^}]*width:\s*max-content;/s);
assert.match(styles, /\.settings-font-trigger-label\s*\{[^}]*flex:\s*0 1 auto;/s);
assert.match(
styles,
/\.settings-language-anchor,\s*\.settings-theme-anchor,\s*\.settings-menu-select-anchor,\s*\.settings-font\s*\{[^}]*width:\s*max-content/s,
);
assert.match(
styles,
/\.settings-language-trigger,\s*\.settings-theme-trigger,\s*\.settings-menu-select-trigger,\s*\.settings-font-trigger\s*\{[^}]*width:\s*max-content/s,
);
assert.match(
styles,
/\.settings-language-trigger-label,\s*\.settings-theme-trigger-label,\s*\.settings-menu-select-trigger-label,\s*\.settings-font-trigger-label\s*\{[^}]*flex:\s*0 1 auto/s,
);
assert.doesNotMatch(styles, /\.settings-font-trigger\s*\{[^}]*min-width:\s*200px;/s);
});

Expand Down
4 changes: 2 additions & 2 deletions apps/desktop/test/settings-general.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,11 +406,11 @@ test("marketplace source settings live inside the Plugins marketplace surface",
test("settings compact pickers hug the current label on the shared menu select", () => {
assert.match(
stylesSource,
/\.settings-language-anchor,\s*\.settings-theme-anchor,\s*\.settings-menu-select-anchor\s*\{[^}]*width:\s*max-content/s,
/\.settings-language-anchor,\s*\.settings-theme-anchor,\s*\.settings-menu-select-anchor,\s*\.settings-font\s*\{[^}]*width:\s*max-content/s,
);
assert.match(
stylesSource,
/\.settings-language-trigger,\s*\.settings-theme-trigger,\s*\.settings-menu-select-trigger\s*\{[^}]*width:\s*max-content/s,
/\.settings-language-trigger,\s*\.settings-theme-trigger,\s*\.settings-menu-select-trigger,\s*\.settings-font-trigger\s*\{[^}]*width:\s*max-content/s,
);
});

Expand Down
Loading