Skip to content

Commit

Permalink
add active selection styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrieken
jrieken committed Jul 11, 2018
1 parent 0000304 commit c588525
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 38 deletions.
18 changes: 13 additions & 5 deletions src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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));
}

Expand Down
6 changes: 4 additions & 2 deletions src/vs/platform/theme/common/colorRegistry.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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."));

This comment has been minimized.

Sign in to view

Copy link
@bpasero

bpasero Aug 6, 2018

Member

@jrieken why not simply breadcrumb.foreground (and others like breadcrumb.breadcrumbsFocusForeground => breadcrumb.focusForeground), is the repetition of breadcrumb.breadcrumbs really needed for the color keys?

This comment has been minimized.

Sign in to view

Copy link
@jrieken

jrieken Aug 6, 2018

Author Member

Probably not. Should we tackle this for the July release?

This comment has been minimized.

Sign in to view

Copy link
@bpasero

bpasero Aug 6, 2018

Member

@jrieken yeah would be great, hard to change later otherwise
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.
Expand Down
12 changes: 8 additions & 4 deletions src/vs/platform/theme/common/styler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 = <IBreadcrumbsWidgetStyleOverrides>{
breadcrumbsBackground: editorBackground,
breadcrumbsForeground: breadcrumbsForegound,
breadcrumbsFocusedForeground: breadcrumbsFocusedForegound
breadcrumbsForeground: breadcrumbsForeground,
breadcrumbsFocusForeground: breadcrumbsFocusForeground,
breadcrumbsFocusAndSelectionBackground: breadcrumbsActiveSelectionBackground,
breadcrumbsFocusAndSelectionForeground: breadcrumbsActiveSelectionForeground,
};

export function attachBreadcrumbsStyler(widget: IThemable, themeService: IThemeService, style?: IBreadcrumbsWidgetStyleOverrides): IDisposable {
Expand Down
36 changes: 10 additions & 26 deletions src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));

Expand Down Expand Up @@ -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() {
Expand All @@ -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;
}
Expand Down Expand Up @@ -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({
Expand All @@ -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();
}
});
Expand Down
3 changes: 2 additions & 1 deletion src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit c588525

Please sign in to comment.