From 48ba3cf86909fbd3c5986cd1273a5ea5bc249d5f Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Tue, 11 Jan 2022 10:54:39 -0800 Subject: [PATCH] consolidate stylings and fix color when item is active and focused --- .../parts/auxiliarybar/auxiliaryBarPart.ts | 24 ----- .../browser/parts/panel/panelPart.ts | 89 ++++++++++--------- 2 files changed, 46 insertions(+), 67 deletions(-) diff --git a/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts b/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts index 3de80136a594..0dd451980cbf 100644 --- a/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts +++ b/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts @@ -156,30 +156,6 @@ registerThemingParticipant((theme, collector) => { `); } - // Title focus - const focusBorderColor = theme.getColor(focusBorder); - if (focusBorderColor) { - collector.addRule(` - .monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before { - border-top-color: ${focusBorderColor}; - } - `); - collector.addRule(` - .monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus { - outline: none; - } - `); - } - - const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER); - if (titleActiveBorder) { - collector.addRule(` - .monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .active-item-indicator:before { - border-top-color: ${titleActiveBorder}; - } - `); - } - // Styling with Outline color (e.g. high contrast theme) const outline = theme.getColor(activeContrastBorder); if (outline) { diff --git a/src/vs/workbench/browser/parts/panel/panelPart.ts b/src/vs/workbench/browser/parts/panel/panelPart.ts index e2818f6ad82e..2adcb5e29dc2 100644 --- a/src/vs/workbench/browser/parts/panel/panelPart.ts +++ b/src/vs/workbench/browser/parts/panel/panelPart.ts @@ -1015,49 +1015,6 @@ registerThemingParticipant((theme, collector) => { `); } - // Title focus - const focusBorderColor = theme.getColor(focusBorder); - if (focusBorderColor) { - collector.addRule(` - .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before { - border-top-color: ${focusBorderColor}; - } - `); - collector.addRule(` - .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus { - outline: none; - } - `); - } - - const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER); - if (titleActiveBorder) { - collector.addRule(` - .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .active-item-indicator:before { - border-top-color: ${titleActiveBorder}; - } - `); - } - - // Styling with Outline color (e.g. high contrast theme) - const outline = theme.getColor(activeContrastBorder); - if (outline) { - collector.addRule(` - .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label, - .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label { - outline-color: ${outline}; - outline-width: 1px; - outline-style: solid; - border-bottom: none; - outline-offset: -2px; - } - - .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label { - outline-style: dashed; - } - `); - } - const inputBorder = theme.getColor(PANEL_INPUT_BORDER); if (inputBorder) { collector.addRule(` @@ -1066,4 +1023,50 @@ registerThemingParticipant((theme, collector) => { } `); } + + + // Base Panel Styles + // Title focus + const focusBorderColor = theme.getColor(focusBorder); + if (focusBorderColor) { + collector.addRule(` + .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before { + border-top-color: ${focusBorderColor}; + } + `); + collector.addRule(` + .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus { + outline: none; + } + `); + } + + const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER); + if (titleActiveBorder) { + collector.addRule(` + .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before, + .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before { + border-top-color: ${titleActiveBorder}; + } + `); + } + + // Styling with Outline color (e.g. high contrast theme) + const outline = theme.getColor(activeContrastBorder); + if (outline) { + collector.addRule(` + .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label, + .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label { + outline-color: ${outline}; + outline-width: 1px; + outline-style: solid; + border-bottom: none; + outline-offset: -2px; + } + + .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label { + outline-style: dashed; + } + `); + } });