From c588525c1c8b2e44d437aca6d24d888d1075849e Mon Sep 17 00:00:00 2001 From: Johannes Rieken Date: Wed, 11 Jul 2018 16:03:33 +0200 Subject: [PATCH] add active selection styles --- .../ui/breadcrumbs/breadcrumbsWidget.ts | 18 +++++++--- src/vs/platform/theme/common/colorRegistry.ts | 6 ++-- src/vs/platform/theme/common/styler.ts | 12 ++++--- .../parts/editor/breadcrumbsControl.ts | 36 ++++++------------- .../parts/editor/media/breadcrumbscontrol.css | 3 +- 5 files changed, 37 insertions(+), 38 deletions(-) diff --git a/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts b/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts index 01d1a6876ff..d588691b0ca 100644 --- a/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts +++ b/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts @@ -45,7 +45,9 @@ export class SimpleBreadcrumbsItem extends BreadcrumbsItem { export interface IBreadcrumbsWidgetStyles { breadcrumbsBackground?: Color; breadcrumbsForeground?: Color; - breadcrumbsFocusedForeground?: Color; + breadcrumbsFocusForeground?: Color; + breadcrumbsFocusAndSelectionBackground?: Color; + breadcrumbsFocusAndSelectionForeground?: Color; } export interface IBreadcrumbsItemEvent { @@ -126,8 +128,14 @@ export class BreadcrumbsWidget { if (style.breadcrumbsForeground) { content += `.monaco-breadcrumbs .monaco-breadcrumb-item { color: ${style.breadcrumbsForeground}}\n`; } - if (style.breadcrumbsFocusedForeground) { - content += `.monaco-breadcrumbs .monaco-breadcrumb-item.focused { color: ${style.breadcrumbsFocusedForeground}}\n`; + if (style.breadcrumbsFocusForeground) { + content += `.monaco-breadcrumbs .monaco-breadcrumb-item.focused { color: ${style.breadcrumbsFocusForeground}}\n`; + } + if (style.breadcrumbsFocusAndSelectionBackground) { + content += `.monaco-breadcrumbs .monaco-breadcrumb-item.focused.selected { background-color: ${style.breadcrumbsFocusAndSelectionBackground}}\n`; + } + if (style.breadcrumbsFocusAndSelectionForeground) { + content += `.monaco-breadcrumbs .monaco-breadcrumb-item.focused.selected { color: ${style.breadcrumbsFocusAndSelectionForeground}}\n`; } if (this._styleElement.innerHTML !== content) { this._styleElement.innerHTML = content; @@ -178,11 +186,11 @@ export class BreadcrumbsWidget { this._onDidFocusItem.fire({ type: 'focus', item: this._items[this._focusedItemIdx], node: this._nodes[this._focusedItemIdx] }); } - getSelected(): BreadcrumbsItem { + getSelection(): BreadcrumbsItem { return this._items[this._selectedItemIdx]; } - setSelected(item: BreadcrumbsItem): void { + setSelection(item: BreadcrumbsItem): void { this._select(this._items.indexOf(item)); } diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index b57f7ea9355..facc14315a1 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -223,8 +223,10 @@ export const scrollbarSliderActiveBackground = registerColor('scrollbarSlider.ac export const progressBarBackground = registerColor('progressBar.background', { dark: Color.fromHex('#0E70C0'), light: Color.fromHex('#0E70C0'), hc: contrastBorder }, nls.localize('progressBarBackground', "Background color of the progress bar that can show for long running operations.")); -export const breadcrumbsForegound = registerColor('breadcrumb.focusForeground', { light: Color.fromHex('#6C6C6C').transparent(.7), dark: Color.fromHex('#CCCCCC').transparent(.7), hc: Color.white.transparent(.7) }, nls.localize('breadcrumbsFocusForeground', "Color of focused breadcrumb items.")); -export const breadcrumbsFocusedForegound = registerColor('breadcrumb.breadcrumbsFocusedForegound', { light: '#6C6C6C', dark: '#CCCCCC', hc: Color.white }, nls.localize('breadcrumbsFocusForeground', "Color of focused breadcrumb items.")); +export const breadcrumbsForeground = registerColor('breadcrumb.breadcrumbsForeground', { light: Color.fromHex('#6C6C6C').transparent(.7), dark: Color.fromHex('#CCCCCC').transparent(.7), hc: Color.white.transparent(.7) }, nls.localize('breadcrumbsFocusForeground', "Color of focused breadcrumb items.")); +export const breadcrumbsFocusForeground = registerColor('breadcrumb.breadcrumbsFocusForeground', { light: '#6C6C6C', dark: '#CCCCCC', hc: Color.white }, nls.localize('breadcrumbsFocusForeground', "Color of focused breadcrumb items.")); +export const breadcrumbsActiveSelectionForeground = registerColor('breadcrumb.breadcrumbsActiveSelectionForeground', { light: '#6C6C6C', dark: '#CCCCCC', hc: Color.white }, nls.localize('breadcrumbsSelectedForegound', "Color of selected breadcrumb items.")); +export const breadcrumbsActiveSelectionBackground = registerColor('breadcrumb.breadcrumbsActiveSelectionBackground', { light: '#F3F3F3', dark: '#252526', hc: Color.black }, nls.localize('breadcrumbsSelectedBackground', "Background color of selected breadcrumb items.")); /** * Editor background color. diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index 72296db3038..e4fc74f5980 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -6,7 +6,7 @@ 'use strict'; import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService'; -import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForegound, breadcrumbsFocusedForegound } from 'vs/platform/theme/common/colorRegistry'; +import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionBackground, breadcrumbsActiveSelectionForeground } from 'vs/platform/theme/common/colorRegistry'; import { IDisposable } from 'vs/base/common/lifecycle'; import { Color } from 'vs/base/common/color'; import { mixin } from 'vs/base/common/objects'; @@ -266,13 +266,17 @@ export function attachStylerCallback(themeService: IThemeService, colors: { [nam export interface IBreadcrumbsWidgetStyleOverrides extends IStyleOverrides { breadcrumbsBackground?: ColorIdentifier; breadcrumbsForeground?: ColorIdentifier; - breadcrumbsFocusedForeground?: ColorIdentifier; + breadcrumbsFocusForeground?: ColorIdentifier; + breadcrumbsFocusAndSelectionBackground?: ColorIdentifier; + breadcrumbsFocusAndSelectionForeground?: ColorIdentifier; } export const defaultBreadcrumbsStyles = { breadcrumbsBackground: editorBackground, - breadcrumbsForeground: breadcrumbsForegound, - breadcrumbsFocusedForeground: breadcrumbsFocusedForegound + breadcrumbsForeground: breadcrumbsForeground, + breadcrumbsFocusForeground: breadcrumbsFocusForeground, + breadcrumbsFocusAndSelectionBackground: breadcrumbsActiveSelectionBackground, + breadcrumbsFocusAndSelectionForeground: breadcrumbsActiveSelectionForeground, }; export function attachBreadcrumbsStyler(widget: IThemable, themeService: IThemeService, style?: IBreadcrumbsWidgetStyleOverrides): IDisposable { diff --git a/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts b/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts index 0a44732dac5..b638895f20d 100644 --- a/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts +++ b/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts @@ -153,8 +153,8 @@ export class BreadcrumbsControl { dom.append(container, this._domNode); this._widget = new BreadcrumbsWidget(this._domNode); - this._widget.onDidSelectItem(this._onDidSelectItem, this, this._disposables); - this._widget.onDidFocusItem(this._onDidSelectItem, this, this._disposables); + this._widget.onDidSelectItem(this._onSelectEvent, this, this._disposables); + this._widget.onDidFocusItem(this._onFocusEvent, this, this._disposables); this._widget.onDidChangeFocus(this._updateCkBreadcrumbsActive, this, this._disposables); this._disposables.push(attachBreadcrumbsStyler(this._widget, this._themeService)); @@ -203,35 +203,17 @@ export class BreadcrumbsControl { this._breadcrumbsDisposables = [model, listener]; } - focus(): void { - this._widget.domFocus(); - } - - focusNext(): void { - this._widget.focusNext(); - } - - focusPrev(): void { - this._widget.focusPrev(); - } - - select(): void { - const item = this._widget.getFocused(); - if (item) { - this._widget.setSelected(item); + private _onFocusEvent(event: IBreadcrumbsItemEvent): void { + if (event.item && this._breadcrumbsPickerShowing) { + return this._widget.setSelection(event.item); } } - private _onDidSelectItem(event: IBreadcrumbsItemEvent): void { + private _onSelectEvent(event: IBreadcrumbsItemEvent): void { if (!event.item) { return; } - if (event.type === 'focus' && !this._breadcrumbsPickerShowing) { - // focus change only moves the picker when already active - return; - } - this._editorGroup.focus(); this._contextViewService.showContextView({ getAnchor() { @@ -254,6 +236,7 @@ export class BreadcrumbsControl { res.layout({ width: 250, height: 300 }); let listener = res.onDidPickElement(data => { this._contextViewService.hideContextView(); + this._widget.setSelection(undefined); if (!data) { return; } @@ -571,13 +554,13 @@ KeybindingsRegistry.registerCommandAndKeybindingRule({ id: 'breadcrumbs.selectFocused', weight: KeybindingsRegistry.WEIGHT.workbenchContrib(), primary: KeyCode.Enter, - secondary: [KeyCode.UpArrow, KeyCode.Space], + secondary: [KeyCode.DownArrow, KeyCode.Space], when: ContextKeyExpr.and(BreadcrumbsControl.CK_BreadcrumbsVisible, BreadcrumbsControl.CK_BreadcrumbsActive), handler(accessor) { const groups = accessor.get(IEditorGroupsService); const breadcrumbs = accessor.get(IBreadcrumbsService); const widget = breadcrumbs.getWidget(groups.activeGroup.id); - widget.setSelected(widget.getFocused()); + widget.setSelection(widget.getFocused()); } }); KeybindingsRegistry.registerCommandAndKeybindingRule({ @@ -590,6 +573,7 @@ KeybindingsRegistry.registerCommandAndKeybindingRule({ const groups = accessor.get(IEditorGroupsService); const breadcrumbs = accessor.get(IBreadcrumbsService); breadcrumbs.getWidget(groups.activeGroup.id).setFocused(undefined); + breadcrumbs.getWidget(groups.activeGroup.id).setSelection(undefined); groups.activeGroup.activeControl.focus(); } }); diff --git a/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css b/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css index 9b5a6a29318..80166b8d642 100644 --- a/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css @@ -12,7 +12,8 @@ } .monaco-workbench>.part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumb-item .symbol-icon{ - padding-right: 4px; + margin-left: 4px; + padding-right: 2px; } .monaco-workbench>.part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumbs .monaco-breadcrumb-item:nth-child(2) { -- GitLab