From 0fd390648673838bb1b10d3bb723b6721db450f0 Mon Sep 17 00:00:00 2001 From: Yukon <126093594+baseGame@users.noreply.github.com> Date: Tue, 22 Sep 2026 12:21:08 +0800 Subject: [PATCH] Restore Options dialog tree and section chrome to capture scale MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Raise Options tree rows, group labels, card headers, and control chrome toward ~18–20px CSS with capture borders and label line-heights (DPR≈2). --- src/styles/main.css | 95 ++++++++++++++++++++ src/styles/peekOptionsDensity.test.ts | 27 ++++-- src/views/SettingsView.vue | 122 ++++++++++++++++---------- 3 files changed, 192 insertions(+), 52 deletions(-) diff --git a/src/styles/main.css b/src/styles/main.css index da1da5d5..29300b26 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -3660,3 +3660,98 @@ html[data-show-path-bars='0'] .path-pair-bar { padding: 0 5px !important; font-size: 11px !important; } + +/* Options / Settings dialog chrome at capture CSS scale (tree rows ~18px; controls ~20px) */ +.settings-view { + gap: 6px !important; + padding: 4px 6px !important; + font-size: 11px !important; + line-height: 16px !important; +} + +.settings-view .options-section-nav { + gap: 4px !important; + padding: 2px 4px !important; + border: 1px solid #a0a0a0 !important; + border-radius: 0 !important; +} + +.settings-view .options-tree-group-label { + padding: 4px 6px 2px !important; + font-size: 11px !important; + line-height: 16px !important; +} + +.settings-view .options-section-button { + min-height: 18px !important; + padding: 2px 6px !important; + font-size: 11px !important; + line-height: 16px !important; +} + +.settings-view .options-hint { + font-size: 11px !important; + line-height: 16px !important; +} + +.settings-view .stack-row input, +.settings-view .stack-row select, +.settings-view .open-with-draft input { + height: 20px !important; + min-height: 20px !important; + padding: 0 6px !important; + border: 1px solid #a0a0a0 !important; + border-radius: 0 !important; + font-size: 11px !important; + line-height: 16px !important; +} + +.settings-view .auto-save-limit-row, +.settings-view .font-size-row, +.settings-view .tweak-row { + gap: 6px !important; + min-height: 20px !important; + line-height: 16px !important; +} + +.settings-view .shortcut-row, +.settings-view .shared-session-list li { + min-height: 20px !important; + padding: 2px 6px !important; + border: 1px solid #a0a0a0 !important; + border-radius: 0 !important; +} + +.settings-view .n-card { + --n-padding-top: 4px !important; + --n-padding-bottom: 4px !important; + --n-padding-left: 6px !important; + --n-padding-right: 6px !important; + --n-title-font-size: 12px !important; + --n-border-radius: 0 !important; + + border: 1px solid #a0a0a0 !important; + border-radius: 0 !important; + font-size: 11px !important; + line-height: 16px !important; +} + +.settings-view .n-card-header { + min-height: 20px !important; + padding: 2px 6px !important; + font-size: 12px !important; + line-height: 16px !important; +} + +.settings-view .n-input, +.settings-view .n-base-selection, +.settings-view .n-input-number, +.settings-view .n-button { + --n-height: 20px !important; + --n-font-size: 11px !important; + --n-border-radius: 0 !important; + + min-height: 20px !important; + border-radius: 0 !important; + line-height: 16px !important; +} diff --git a/src/styles/peekOptionsDensity.test.ts b/src/styles/peekOptionsDensity.test.ts index 234eeead..fa229822 100644 --- a/src/styles/peekOptionsDensity.test.ts +++ b/src/styles/peekOptionsDensity.test.ts @@ -61,13 +61,28 @@ describe('peek panel densify', () => { }) describe('options dialog densify', () => { - it('uses a dense tree/content Options layout and keeps wired section ids', () => { - expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?grid-template-columns:\s*160px/) - expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?padding:\s*5px/) - expect(settingsView).toMatch(/\.options-section-button\s*\{[\s\S]*?min-height:\s*16px/) + it('keeps Options tree/content chrome at capture CSS scale and wired section ids', () => { + expect(css).toMatch(/\.settings-view\s*\{[\s\S]*?padding:\s*4px 6px/) + expect(css).toMatch(/\.settings-view \.options-section-nav[\s\S]*?border:\s*1px solid #a0a0a0/) + expect(css).toMatch(/\.settings-view \.options-section-button[\s\S]*?min-height:\s*18px/) + expect(css).toMatch(/\.settings-view \.options-tree-group-label[\s\S]*?font-size:\s*11px/) + expect(css).toMatch(/\.settings-view \.n-card-header[\s\S]*?min-height:\s*20px/) + + expect(settingsView).toMatch(/data-options-density="capture-1to1"/) + expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?grid-template-columns:\s*176px/) + expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?padding:\s*4px 6px/) + expect(settingsView).toMatch(/\.options-section-button\s*\{[\s\S]*?min-height:\s*18px/) + expect(settingsView).toMatch(/\.options-tree-group-label\s*\{[\s\S]*?font-size:\s*11px/) + expect(settingsView).toMatch(/\.options-hint\s*\{[\s\S]*?line-height:\s*16px/) expect(settingsView).toMatch( /\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?height:\s*20px/, ) + expect(settingsView).toMatch( + /\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/, + ) + expect(settingsView).toMatch(/:deep\(\.n-card-header\)\s*\{[\s\S]*?min-height:\s*20px/) + expect(settingsView).not.toMatch(/font-size:\s*9px/) + expect(settingsView).not.toMatch(/min-height:\s*9px/) expect(settingsView).toMatch(/data-testid="options-content"/) expect(settingsView).toMatch(/data-testid="options-section-nav"/) expect(settingsView).toMatch(/options-section-\$\{section\.id\}/) @@ -123,9 +138,9 @@ describe('options dialog densify', () => { expect(settingsView).toMatch(/data-testid="folder-merge-show-center-pane"/) expect(settingsView).toMatch(/data-testid="folder-merge-compare-to-output"/) expect(settingsView).toMatch(/\.shortcut-config\s*\{[\s\S]*?gap:\s*4px/) - expect(settingsView).toMatch(/\.shortcut-row\s*\{[\s\S]*?padding:\s*2px 4px/) + expect(settingsView).toMatch(/\.shortcut-row\s*\{[\s\S]*?padding:\s*2px 6px/) expect(settingsView).toMatch(/\.shortcut-row\s*\{[\s\S]*?border-radius:\s*0/) - expect(settingsView).toMatch(/\.shared-session-list li\s*\{[\s\S]*?padding:\s*2px 4px/) + expect(settingsView).toMatch(/\.shared-session-list li\s*\{[\s\S]*?padding:\s*2px 6px/) expect(settingsView).toMatch(/\.shared-session-list li\s*\{[\s\S]*?border-radius:\s*0/) }) }) diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue index 930256b2..57f66c59 100644 --- a/src/views/SettingsView.vue +++ b/src/views/SettingsView.vue @@ -1465,7 +1465,10 @@ function parseShortcutText(value: string): string[] { :subtitle="$t('ui.manageMatchingRulesDefaultViewsAndRuleReferences')" :inspector-label="$t('ui.settingsInspector')" > -
+