mirror of
https://github.com/Microsoft/vscode
synced 2024-08-27 21:09:43 +00:00
theming - keybindings button and widget
This commit is contained in:
parent
a7c753cf40
commit
408ede050d
|
@ -10,11 +10,13 @@ import { inputBackground, inputForeground, ColorIdentifier, selectForeground, se
|
||||||
import { IDisposable } from 'vs/base/common/lifecycle';
|
import { IDisposable } from 'vs/base/common/lifecycle';
|
||||||
import { SIDE_BAR_SECTION_HEADER_BACKGROUND } from 'vs/workbench/common/theme';
|
import { SIDE_BAR_SECTION_HEADER_BACKGROUND } from 'vs/workbench/common/theme';
|
||||||
|
|
||||||
|
export type styleFn = (colors: { [name: string]: ColorIdentifier }) => void;
|
||||||
|
|
||||||
export interface IThemable {
|
export interface IThemable {
|
||||||
style(colors: { [name: string]: ColorIdentifier }): void;
|
style: styleFn;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function attachStyler(themeService: IThemeService, widget: IThemable, optionsMapping: { [optionsKey: string]: ColorIdentifier | ColorFunction }): IDisposable {
|
function doAttachStyler(themeService: IThemeService, optionsMapping: { [optionsKey: string]: ColorIdentifier | ColorFunction }, widgetOrCallback: IThemable | styleFn): IDisposable {
|
||||||
function applyStyles(theme: ITheme): void {
|
function applyStyles(theme: ITheme): void {
|
||||||
const styles = Object.create(null);
|
const styles = Object.create(null);
|
||||||
for (let key in optionsMapping) {
|
for (let key in optionsMapping) {
|
||||||
|
@ -26,7 +28,11 @@ export function attachStyler(themeService: IThemeService, widget: IThemable, opt
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
widget.style(styles);
|
if (typeof widgetOrCallback === 'function') {
|
||||||
|
widgetOrCallback(styles);
|
||||||
|
} else {
|
||||||
|
widgetOrCallback.style(styles);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
applyStyles(themeService.getTheme());
|
applyStyles(themeService.getTheme());
|
||||||
|
@ -35,9 +41,9 @@ export function attachStyler(themeService: IThemeService, widget: IThemable, opt
|
||||||
}
|
}
|
||||||
|
|
||||||
export function attachCheckboxStyler(widget: IThemable, themeService: IThemeService, style?: { inputActiveOptionBorderColor?: ColorIdentifier }): IDisposable {
|
export function attachCheckboxStyler(widget: IThemable, themeService: IThemeService, style?: { inputActiveOptionBorderColor?: ColorIdentifier }): IDisposable {
|
||||||
return attachStyler(themeService, widget, {
|
return doAttachStyler(themeService, {
|
||||||
inputActiveOptionBorder: (style && style.inputActiveOptionBorderColor) || inputActiveOptionBorder
|
inputActiveOptionBorder: (style && style.inputActiveOptionBorderColor) || inputActiveOptionBorder
|
||||||
});
|
}, widget);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?:
|
export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?:
|
||||||
|
@ -52,7 +58,7 @@ export function attachInputBoxStyler(widget: IThemable, themeService: IThemeServ
|
||||||
inputValidationErrorBorder?: ColorIdentifier,
|
inputValidationErrorBorder?: ColorIdentifier,
|
||||||
inputValidationErrorBackground?: ColorIdentifier
|
inputValidationErrorBackground?: ColorIdentifier
|
||||||
}): IDisposable {
|
}): IDisposable {
|
||||||
return attachStyler(themeService, widget, {
|
return doAttachStyler(themeService, {
|
||||||
inputBackground: (style && style.inputBackground) || inputBackground,
|
inputBackground: (style && style.inputBackground) || inputBackground,
|
||||||
inputForeground: (style && style.inputForeground) || inputForeground,
|
inputForeground: (style && style.inputForeground) || inputForeground,
|
||||||
inputBorder: (style && style.inputBorder) || inputBorder,
|
inputBorder: (style && style.inputBorder) || inputBorder,
|
||||||
|
@ -62,15 +68,15 @@ export function attachInputBoxStyler(widget: IThemable, themeService: IThemeServ
|
||||||
inputValidationWarningBackground: (style && style.inputValidationWarningBackground) || inputValidationWarningBackground,
|
inputValidationWarningBackground: (style && style.inputValidationWarningBackground) || inputValidationWarningBackground,
|
||||||
inputValidationErrorBorder: (style && style.inputValidationErrorBorder) || inputValidationErrorBorder,
|
inputValidationErrorBorder: (style && style.inputValidationErrorBorder) || inputValidationErrorBorder,
|
||||||
inputValidationErrorBackground: (style && style.inputValidationErrorBackground) || inputValidationErrorBackground
|
inputValidationErrorBackground: (style && style.inputValidationErrorBackground) || inputValidationErrorBackground
|
||||||
});
|
}, widget);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeService, style?: { selectBackground?: ColorIdentifier, selectForeground?: ColorIdentifier, selectBorder?: ColorIdentifier }): IDisposable {
|
export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeService, style?: { selectBackground?: ColorIdentifier, selectForeground?: ColorIdentifier, selectBorder?: ColorIdentifier }): IDisposable {
|
||||||
return attachStyler(themeService, widget, {
|
return doAttachStyler(themeService, {
|
||||||
selectBackground: (style && style.selectBackground) || selectBackground,
|
selectBackground: (style && style.selectBackground) || selectBackground,
|
||||||
selectForeground: (style && style.selectForeground) || selectForeground,
|
selectForeground: (style && style.selectForeground) || selectForeground,
|
||||||
selectBorder: (style && style.selectBorder) || selectBorder
|
selectBorder: (style && style.selectBorder) || selectBorder
|
||||||
});
|
}, widget);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function attachFindInputBoxStyler(widget: IThemable, themeService: IThemeService, style?:
|
export function attachFindInputBoxStyler(widget: IThemable, themeService: IThemeService, style?:
|
||||||
|
@ -86,7 +92,7 @@ export function attachFindInputBoxStyler(widget: IThemable, themeService: ITheme
|
||||||
inputValidationErrorBorder?: ColorIdentifier,
|
inputValidationErrorBorder?: ColorIdentifier,
|
||||||
inputValidationErrorBackground?: ColorIdentifier
|
inputValidationErrorBackground?: ColorIdentifier
|
||||||
}): IDisposable {
|
}): IDisposable {
|
||||||
return attachStyler(themeService, widget, {
|
return doAttachStyler(themeService, {
|
||||||
inputBackground: (style && style.inputBackground) || inputBackground,
|
inputBackground: (style && style.inputBackground) || inputBackground,
|
||||||
inputForeground: (style && style.inputForeground) || inputForeground,
|
inputForeground: (style && style.inputForeground) || inputForeground,
|
||||||
inputBorder: (style && style.inputBorder) || inputBorder,
|
inputBorder: (style && style.inputBorder) || inputBorder,
|
||||||
|
@ -97,7 +103,7 @@ export function attachFindInputBoxStyler(widget: IThemable, themeService: ITheme
|
||||||
inputValidationWarningBackground: (style && style.inputValidationWarningBackground) || inputValidationWarningBackground,
|
inputValidationWarningBackground: (style && style.inputValidationWarningBackground) || inputValidationWarningBackground,
|
||||||
inputValidationErrorBorder: (style && style.inputValidationErrorBorder) || inputValidationErrorBorder,
|
inputValidationErrorBorder: (style && style.inputValidationErrorBorder) || inputValidationErrorBorder,
|
||||||
inputValidationErrorBackground: (style && style.inputValidationErrorBackground) || inputValidationErrorBackground
|
inputValidationErrorBackground: (style && style.inputValidationErrorBackground) || inputValidationErrorBackground
|
||||||
});
|
}, widget);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeService, style?: {
|
export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeService, style?: {
|
||||||
|
@ -129,7 +135,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer
|
||||||
listSelectionOutline?: ColorIdentifier,
|
listSelectionOutline?: ColorIdentifier,
|
||||||
listHoverOutline?: ColorIdentifier
|
listHoverOutline?: ColorIdentifier
|
||||||
}): IDisposable {
|
}): IDisposable {
|
||||||
return attachStyler(themeService, widget, {
|
return doAttachStyler(themeService, {
|
||||||
foreground: (style && style.foreground) || foreground,
|
foreground: (style && style.foreground) || foreground,
|
||||||
background: (style && style.background) || editorBackground,
|
background: (style && style.background) || editorBackground,
|
||||||
borderColor: style && style.borderColor || contrastBorder,
|
borderColor: style && style.borderColor || contrastBorder,
|
||||||
|
@ -157,7 +163,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer
|
||||||
listFocusOutline: (style && style.listFocusOutline) || activeContrastBorder,
|
listFocusOutline: (style && style.listFocusOutline) || activeContrastBorder,
|
||||||
listSelectionOutline: (style && style.listSelectionOutline) || activeContrastBorder,
|
listSelectionOutline: (style && style.listSelectionOutline) || activeContrastBorder,
|
||||||
listHoverOutline: (style && style.listHoverOutline) || activeContrastBorder
|
listHoverOutline: (style && style.listHoverOutline) || activeContrastBorder
|
||||||
});
|
}, widget);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function attachListStyler(widget: IThemable, themeService: IThemeService, style?: {
|
export function attachListStyler(widget: IThemable, themeService: IThemeService, style?: {
|
||||||
|
@ -176,7 +182,7 @@ export function attachListStyler(widget: IThemable, themeService: IThemeService,
|
||||||
listSelectionOutline?: ColorIdentifier,
|
listSelectionOutline?: ColorIdentifier,
|
||||||
listHoverOutline?: ColorIdentifier,
|
listHoverOutline?: ColorIdentifier,
|
||||||
}): IDisposable {
|
}): IDisposable {
|
||||||
return attachStyler(themeService, widget, {
|
return doAttachStyler(themeService, {
|
||||||
listFocusBackground: (style && style.listFocusBackground) || listFocusBackground,
|
listFocusBackground: (style && style.listFocusBackground) || listFocusBackground,
|
||||||
listActiveSelectionBackground: (style && style.listActiveSelectionBackground) || lighten(listActiveSelectionBackground, 0.1),
|
listActiveSelectionBackground: (style && style.listActiveSelectionBackground) || lighten(listActiveSelectionBackground, 0.1),
|
||||||
listActiveSelectionForeground: (style && style.listActiveSelectionForeground) || listActiveSelectionForeground,
|
listActiveSelectionForeground: (style && style.listActiveSelectionForeground) || listActiveSelectionForeground,
|
||||||
|
@ -191,20 +197,24 @@ export function attachListStyler(widget: IThemable, themeService: IThemeService,
|
||||||
listSelectionOutline: (style && style.listSelectionOutline) || activeContrastBorder,
|
listSelectionOutline: (style && style.listSelectionOutline) || activeContrastBorder,
|
||||||
listHoverOutline: (style && style.listHoverOutline) || activeContrastBorder,
|
listHoverOutline: (style && style.listHoverOutline) || activeContrastBorder,
|
||||||
listInactiveFocusOutline: style && style.listInactiveFocusOutline // not defined by default, only opt-in
|
listInactiveFocusOutline: style && style.listInactiveFocusOutline // not defined by default, only opt-in
|
||||||
});
|
}, widget);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function attachHeaderViewStyler(widget: IThemable, themeService: IThemeService, options?: { noContrastBorder?: boolean }): IDisposable {
|
export function attachHeaderViewStyler(widget: IThemable, themeService: IThemeService, options?: { noContrastBorder?: boolean }): IDisposable {
|
||||||
return attachStyler(themeService, widget, {
|
return doAttachStyler(themeService, {
|
||||||
headerBackground: SIDE_BAR_SECTION_HEADER_BACKGROUND,
|
headerBackground: SIDE_BAR_SECTION_HEADER_BACKGROUND,
|
||||||
headerHighContrastBorder: (options && options.noContrastBorder) ? null : contrastBorder
|
headerHighContrastBorder: (options && options.noContrastBorder) ? null : contrastBorder
|
||||||
});
|
}, widget);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function attachButtonStyler(widget: IThemable, themeService: IThemeService, style?: { buttonForeground?: ColorIdentifier, buttonBackground?: ColorIdentifier, buttonHoverBackground?: ColorIdentifier }): IDisposable {
|
export function attachButtonStyler(widget: IThemable, themeService: IThemeService, style?: { buttonForeground?: ColorIdentifier, buttonBackground?: ColorIdentifier, buttonHoverBackground?: ColorIdentifier }): IDisposable {
|
||||||
return attachStyler(themeService, widget, {
|
return doAttachStyler(themeService, {
|
||||||
buttonForeground: (style && style.buttonForeground) || buttonForeground,
|
buttonForeground: (style && style.buttonForeground) || buttonForeground,
|
||||||
buttonBackground: (style && style.buttonBackground) || buttonBackground,
|
buttonBackground: (style && style.buttonBackground) || buttonBackground,
|
||||||
buttonHoverBackground: (style && style.buttonHoverBackground) || buttonHoverBackground
|
buttonHoverBackground: (style && style.buttonHoverBackground) || buttonHoverBackground
|
||||||
});
|
}, widget);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function attachStylerCallback(themeService: IThemeService, colors: { [name: string]: ColorIdentifier }, callback: styleFn): IDisposable {
|
||||||
|
return doAttachStyler(themeService, colors, callback);
|
||||||
}
|
}
|
|
@ -21,8 +21,9 @@ import { Dimension } from 'vs/base/browser/builder';
|
||||||
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
|
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
|
||||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||||
import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition } from 'vs/editor/browser/editorBrowser';
|
import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition } from 'vs/editor/browser/editorBrowser';
|
||||||
import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
|
import { attachInputBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler';
|
||||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||||
|
import { editorWidgetBackground, widgetShadow } from "vs/platform/theme/common/colorRegistry";
|
||||||
|
|
||||||
class KeybindingInputWidget extends Widget {
|
class KeybindingInputWidget extends Widget {
|
||||||
|
|
||||||
|
@ -128,8 +129,11 @@ export class DefineKeybindingWidget extends Widget {
|
||||||
|
|
||||||
private _onHide = this._register(new Emitter<void>());
|
private _onHide = this._register(new Emitter<void>());
|
||||||
|
|
||||||
constructor(parent: HTMLElement, @IKeybindingService private keybindingService: IKeybindingService,
|
constructor(
|
||||||
@IInstantiationService private instantiationService: IInstantiationService
|
parent: HTMLElement,
|
||||||
|
@IKeybindingService private keybindingService: IKeybindingService,
|
||||||
|
@IInstantiationService private instantiationService: IInstantiationService,
|
||||||
|
@IThemeService private themeService: IThemeService
|
||||||
) {
|
) {
|
||||||
super();
|
super();
|
||||||
this.create();
|
this.create();
|
||||||
|
@ -186,6 +190,16 @@ export class DefineKeybindingWidget extends Widget {
|
||||||
this._domNode.setHeight(DefineKeybindingWidget.HEIGHT);
|
this._domNode.setHeight(DefineKeybindingWidget.HEIGHT);
|
||||||
dom.append(this._domNode.domNode, dom.$('.message', null, nls.localize('defineKeybinding.initial', "Press desired key combination and ENTER. ESCAPE to cancel.")));
|
dom.append(this._domNode.domNode, dom.$('.message', null, nls.localize('defineKeybinding.initial', "Press desired key combination and ENTER. ESCAPE to cancel.")));
|
||||||
|
|
||||||
|
this._register(attachStylerCallback(this.themeService, { editorWidgetBackground, widgetShadow }, colors => {
|
||||||
|
this._domNode.domNode.style.backgroundColor = colors.editorWidgetBackground;
|
||||||
|
|
||||||
|
if (colors.widgetShadow) {
|
||||||
|
this._domNode.domNode.style.boxShadow = `0 2px 8px ${colors.widgetShadow}`;
|
||||||
|
} else {
|
||||||
|
this._domNode.domNode.style.boxShadow = null;
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
this._keybindingInputWidget = this._register(this.instantiationService.createInstance(KeybindingInputWidget, this._domNode.domNode, {}));
|
this._keybindingInputWidget = this._register(this.instantiationService.createInstance(KeybindingInputWidget, this._domNode.domNode, {}));
|
||||||
this._register(this._keybindingInputWidget.onKeybinding(keybinding => this.printKeybinding(keybinding)));
|
this._register(this._keybindingInputWidget.onKeybinding(keybinding => this.printKeybinding(keybinding)));
|
||||||
this._register(this._keybindingInputWidget.onEnter(() => this.hide()));
|
this._register(this._keybindingInputWidget.onEnter(() => this.hide()));
|
||||||
|
|
|
@ -34,18 +34,6 @@
|
||||||
margin: 0px 4px;
|
margin: 0px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Theming */
|
|
||||||
.defineKeybindingWidget {
|
|
||||||
background-color: #EFEFF2;
|
|
||||||
box-shadow: 0 2px 8px #A8A8A8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hc-black .defineKeybindingWidget,
|
|
||||||
.vs-dark .defineKeybindingWidget {
|
|
||||||
background-color: #2D2D30;
|
|
||||||
box-shadow: 0 2px 8px #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Editor decorations */
|
/* Editor decorations */
|
||||||
.monaco-editor .inlineKeybindingInfo:before {
|
.monaco-editor .inlineKeybindingInfo:before {
|
||||||
margin: 0.2em 0.1em 0 0.1em;
|
margin: 0.2em 0.1em 0 0.1em;
|
||||||
|
|
|
@ -238,8 +238,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.monaco-editor .floating-click-widget {
|
.monaco-editor .floating-click-widget {
|
||||||
background: #007ACC;
|
|
||||||
color: white;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -23,10 +23,11 @@ import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace
|
||||||
import { ConfigurationTarget } from 'vs/workbench/services/configuration/common/configurationEditing';
|
import { ConfigurationTarget } from 'vs/workbench/services/configuration/common/configurationEditing';
|
||||||
import { ActionsOrientation, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
|
import { ActionsOrientation, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
|
||||||
import { Action } from 'vs/base/common/actions';
|
import { Action } from 'vs/base/common/actions';
|
||||||
import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
|
import { attachInputBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler';
|
||||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||||
import { Position } from 'vs/editor/common/core/position';
|
import { Position } from 'vs/editor/common/core/position';
|
||||||
import { ICursorPositionChangedEvent } from 'vs/editor/common/controller/cursorEvents';
|
import { ICursorPositionChangedEvent } from 'vs/editor/common/controller/cursorEvents';
|
||||||
|
import { buttonBackground, buttonForeground } from "vs/platform/theme/common/colorRegistry";
|
||||||
|
|
||||||
export class SettingsGroupTitleWidget extends Widget implements IViewZone {
|
export class SettingsGroupTitleWidget extends Widget implements IViewZone {
|
||||||
|
|
||||||
|
@ -360,10 +361,15 @@ export class FloatingClickWidget extends Widget implements IOverlayWidget {
|
||||||
private _onClick: Emitter<void> = this._register(new Emitter<void>());
|
private _onClick: Emitter<void> = this._register(new Emitter<void>());
|
||||||
public onClick: Event<void> = this._onClick.event;
|
public onClick: Event<void> = this._onClick.event;
|
||||||
|
|
||||||
constructor(private editor: ICodeEditor, private label: string, private keyBindingAction: string,
|
constructor(
|
||||||
@IKeybindingService keybindingService: IKeybindingService
|
private editor: ICodeEditor,
|
||||||
|
private label: string,
|
||||||
|
private keyBindingAction: string,
|
||||||
|
@IKeybindingService keybindingService: IKeybindingService,
|
||||||
|
@IThemeService private themeService: IThemeService
|
||||||
) {
|
) {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
if (keyBindingAction) {
|
if (keyBindingAction) {
|
||||||
let keybinding = keybindingService.lookupKeybinding(keyBindingAction);
|
let keybinding = keybindingService.lookupKeybinding(keyBindingAction);
|
||||||
if (keybinding) {
|
if (keybinding) {
|
||||||
|
@ -374,6 +380,11 @@ export class FloatingClickWidget extends Widget implements IOverlayWidget {
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
this._domNode = DOM.$('.floating-click-widget');
|
this._domNode = DOM.$('.floating-click-widget');
|
||||||
|
this._register(attachStylerCallback(this.themeService, { buttonBackground, buttonForeground }, colors => {
|
||||||
|
this._domNode.style.backgroundColor = colors.buttonBackground;
|
||||||
|
this._domNode.style.color = colors.buttonForeground;
|
||||||
|
}));
|
||||||
|
|
||||||
DOM.append(this._domNode, DOM.$('')).textContent = this.label;
|
DOM.append(this._domNode, DOM.$('')).textContent = this.label;
|
||||||
this.onclick(this._domNode, e => this._onClick.fire());
|
this.onclick(this._domNode, e => this._onClick.fire());
|
||||||
this.editor.addOverlayWidget(this);
|
this.editor.addOverlayWidget(this);
|
||||||
|
|
Loading…
Reference in a new issue