From 453811a2c2dfdce1e54c9fed8c033a600d27ba1a Mon Sep 17 00:00:00 2001 From: vince-fugnitto Date: Thu, 9 Sep 2021 09:52:36 -0400 Subject: [PATCH] monaco: fix focused quick-input The commit fixes the styling for the monaco `quick-input` by introducing additional colors (through the `ColorRegistry`) and applying specific styling when an entry is currently focused. The changes should: - properly apply a foreground color for focused entries (including label, keybinding, separator). - display properly when focused and fuzzy search results are present. Signed-off-by: vince-fugnitto --- .../browser/common-frontend-contribution.ts | 23 +++++++++++++++++++ packages/monaco/src/browser/style/index.css | 19 ++++++++++++++- 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts index 54743fe588b7d..579094c5062fb 100644 --- a/packages/core/src/browser/common-frontend-contribution.ts +++ b/packages/core/src/browser/common-frontend-contribution.ts @@ -1225,6 +1225,8 @@ export class CommonFrontendContribution implements FrontendApplicationContributi { id: 'list.hoverBackground', defaults: { dark: '#2A2D2E', light: '#F0F0F0' }, description: 'List/Tree background when hovering over items using the mouse.' }, { id: 'list.hoverForeground', description: 'List/Tree foreground when hovering over items using the mouse.' }, { id: 'list.filterMatchBackground', defaults: { dark: 'editor.findMatchHighlightBackground', light: 'editor.findMatchHighlightBackground' }, description: 'Background color of the filtered match.' }, + { id: 'list.highlightForeground', defaults: { dark: '#18A3FF', light: '#0066BF', hc: 'focusBorder' }, description: 'List/Tree foreground color of the match highlights when searching inside the list/tree.' }, + { id: 'list.focusHighlightForeground', defaults: { dark: 'list.highlightForeground', light: 'list.activeSelectionForeground', hc: 'list.highlightForeground' }, description: 'List/Tree foreground color of the match highlights on actively focused items when searching inside the list/tree.' }, { id: 'tree.inactiveIndentGuidesStroke', defaults: { dark: Color.transparent('tree.indentGuidesStroke', 0.4), light: Color.transparent('tree.indentGuidesStroke', 0.4), hc: Color.transparent('tree.indentGuidesStroke', 0.4) }, description: 'Tree stroke color for the inactive indentation guides.' }, // Editor Group & Tabs colors should be aligned with https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs @@ -1468,6 +1470,27 @@ export class CommonFrontendContribution implements FrontendApplicationContributi hc: 'sideBar.foreground' }, description: 'Quick Input foreground color. The Quick Input widget is the container for views like the color theme picker.' }, + { + id: 'quickInput.list.focusBackground', defaults: { + dark: undefined, + light: undefined, + hc: undefined + }, description: 'quickInput.list.focusBackground deprecation. Please use quickInputList.focusBackground instead' + }, + { + id: 'quickInputList.focusForeground', defaults: { + dark: 'list.activeSelectionForeground', + light: 'list.activeSelectionForeground', + hc: 'list.activeSelectionForeground' + }, description: 'Quick picker foreground color for the focused item' + }, + { + id: 'quickInputList.focusBackground', defaults: { + dark: 'list.activeSelectionBackground', + light: 'list.activeSelectionBackground', + hc: undefined + }, description: 'Quick picker background color for the focused item.' + }, // Panel colors should be aligned with https://code.visualstudio.com/api/references/theme-color#panel-colors { diff --git a/packages/monaco/src/browser/style/index.css b/packages/monaco/src/browser/style/index.css index 18c14ce1e08de..2efe857755ce6 100644 --- a/packages/monaco/src/browser/style/index.css +++ b/packages/monaco/src/browser/style/index.css @@ -140,7 +140,24 @@ } .quick-input-list .monaco-list-row.focused { - background-color: var(--theia-quickInput-list-focusBackground) !important; + background-color: var(--theia-quickInputList-focusBackground) !important; +} + +.quick-input-list .monaco-keybinding > .monaco-keybinding-key { + color: inherit !important; +} + +.quick-input-list .monaco-list-row.focused, +.quick-input-list .monaco-list-row.focused .monaco-highlighted-label, +.quick-input-list .monaco-list-row.focused .monaco-highlighted-label .codicon, +.quick-input-list .monaco-list-row.focused .quick-input-list-entry .quick-input-list-separator, +.quick-input-list .monaco-list-row.focused .monaco-highlighted-label .monaco-keybinding .monaco-keybinding-key, +.quick-input-list .monaco-list-row.focused .monaco-highlighted-label .monaco-keybinding .monaco-keybinding-key-separator { + color: var(--theia-quickInputList-focusForeground) !important; +} + +.quick-input-list .monaco-list-row.focused .monaco-highlighted-label .highlight { + color: var(--theia-list-focusHighlightForeground) !important; } .monaco-list-rows