diff --git a/src/vs/base/browser/ui/actionbar/actionbar.ts b/src/vs/base/browser/ui/actionbar/actionbar.ts index 04926e08bdc..a49c5ee254f 100644 --- a/src/vs/base/browser/ui/actionbar/actionbar.ts +++ b/src/vs/base/browser/ui/actionbar/actionbar.ts @@ -688,7 +688,7 @@ export class ActionBar extends EventEmitter implements IActionRunner { } export class SelectActionItem extends BaseActionItem { - private selectBox: SelectBox; + protected selectBox: SelectBox; protected toDispose: lifecycle.IDisposable[]; constructor(ctx: any, action: IAction, options: string[], selected: number) { diff --git a/src/vs/base/browser/ui/findinput/findInput.ts b/src/vs/base/browser/ui/findinput/findInput.ts index 389d89484ea..db237c00470 100644 --- a/src/vs/base/browser/ui/findinput/findInput.ts +++ b/src/vs/base/browser/ui/findinput/findInput.ts @@ -8,7 +8,7 @@ import 'vs/css!./findInput'; import * as nls from 'vs/nls'; import * as dom from 'vs/base/browser/dom'; -import { IMessage as InputBoxMessage, IInputValidator, InputBox } from 'vs/base/browser/ui/inputbox/inputBox'; +import { IMessage as InputBoxMessage, IInputValidator, InputBox, IInputBoxStyles } from 'vs/base/browser/ui/inputbox/inputBox'; import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview'; import { Widget } from 'vs/base/browser/ui/widget'; import Event, { Emitter } from 'vs/base/common/event'; @@ -28,7 +28,7 @@ export interface IFindInputOptions extends IFindInputStyles { appendRegexLabel?: string; } -export interface IFindInputStyles { +export interface IFindInputStyles extends IInputBoxStyles { checkedBorderColor?: Color; } @@ -43,7 +43,10 @@ export class FindInput extends Widget { private placeholder: string; private validation: IInputValidator; private label: string; + private checkedBorderColor: Color; + private inputBackground: Color; + private inputForeground: Color; private regex: RegexCheckbox; private wholeWords: WholeWordsCheckbox; @@ -73,7 +76,10 @@ export class FindInput extends Widget { this.placeholder = options.placeholder || ''; this.validation = options.validation; this.label = options.label || NLS_DEFAULT_LABEL; + this.checkedBorderColor = options.checkedBorderColor; + this.inputBackground = options.inputBackground; + this.inputForeground = options.inputForeground; this.regex = null; this.wholeWords = null; @@ -141,15 +147,24 @@ export class FindInput extends Widget { public style(styles: IFindInputStyles) { this.checkedBorderColor = styles.checkedBorderColor; + this.inputBackground = styles.inputBackground; + this.inputForeground = styles.inputForeground; + this._applyStyles(); } protected _applyStyles() { if (this.domNode) { - const styles = { checkedBorderColor: this.checkedBorderColor }; + const styles: IFindInputStyles = { + checkedBorderColor: this.checkedBorderColor, + inputBackground: this.inputBackground, + inputForeground: this.inputForeground + }; + this.regex.style(styles); this.wholeWords.style(styles); this.caseSensitive.style(styles); + this.inputBox.style(styles); } } @@ -215,7 +230,9 @@ export class FindInput extends Widget { validationOptions: { validation: this.validation || null, showMessage: true - } + }, + inputBackground: this.inputBackground, + inputForeground: this.inputForeground })); this.regex = this._register(new RegexCheckbox({ diff --git a/src/vs/base/browser/ui/inputbox/inputBox.ts b/src/vs/base/browser/ui/inputbox/inputBox.ts index 0fbe41621ce..4d0a79b7a0d 100644 --- a/src/vs/base/browser/ui/inputbox/inputBox.ts +++ b/src/vs/base/browser/ui/inputbox/inputBox.ts @@ -30,6 +30,11 @@ export interface IInputOptions extends IInputBoxStyles { actions?: IAction[]; } +export interface IInputBoxStyles { + inputBackground?: Color; + inputForeground?: Color; +} + export interface IInputValidator { (value: string): IMessage; } @@ -56,11 +61,6 @@ export interface IRange { end: number; } -export interface IInputBoxStyles { - inputBackground?: Color; - inputForeground?: Color; -} - export class InputBox extends Widget { private contextViewProvider: IContextViewProvider; private element: HTMLElement; @@ -76,6 +76,9 @@ export class InputBox extends Widget { private state = 'idle'; private cachedHeight: number; + private inputBackground: Color; + private inputForeground: Color; + private _onDidChange = this._register(new Emitter()); public onDidChange: Event = this._onDidChange.event; @@ -91,6 +94,8 @@ export class InputBox extends Widget { this.cachedHeight = null; this.placeholder = this.options.placeholder || ''; this.ariaLabel = this.options.ariaLabel || ''; + this.inputBackground = this.options.inputBackground; + this.inputForeground = this.options.inputForeground; if (this.options.validationOptions) { this.validation = this.options.validationOptions.validation; @@ -381,16 +386,16 @@ export class InputBox extends Widget { } public style(styles: IInputBoxStyles) { - this.options.inputBackground = styles.inputBackground; - this.options.inputForeground = styles.inputForeground; + this.inputBackground = styles.inputBackground; + this.inputForeground = styles.inputForeground; this._applyStyles(); } protected _applyStyles() { if (this.element) { - const background = this.options.inputBackground ? this.options.inputBackground.toString() : null; - const foreground = this.options.inputForeground ? this.options.inputForeground.toString() : null; + const background = this.inputBackground ? this.inputBackground.toString() : null; + const foreground = this.inputForeground ? this.inputForeground.toString() : null; this.element.style.backgroundColor = background; this.element.style.color = foreground; diff --git a/src/vs/base/browser/ui/selectBox/selectBox.ts b/src/vs/base/browser/ui/selectBox/selectBox.ts index 274f2b2b487..e36cf92fbb6 100644 --- a/src/vs/base/browser/ui/selectBox/selectBox.ts +++ b/src/vs/base/browser/ui/selectBox/selectBox.ts @@ -10,6 +10,12 @@ import Event, { Emitter } from 'vs/base/common/event'; import { Widget } from 'vs/base/browser/ui/widget'; import * as dom from 'vs/base/browser/dom'; import * as arrays from 'vs/base/common/arrays'; +import { Color } from "vs/base/common/color"; + +export interface ISelectBoxStyles { + selectBackground?: Color; + selectForeground?: Color; +} export class SelectBox extends Widget { @@ -19,8 +25,10 @@ export class SelectBox extends Widget { private container: HTMLElement; private _onDidSelect: Emitter; private toDispose: IDisposable[]; + private selectBackground: Color; + private selectForeground: Color; - constructor(options: string[], selected: number) { + constructor(options: string[], selected: number, styles?: ISelectBoxStyles) { super(); this.selectElement = document.createElement('select'); @@ -30,6 +38,11 @@ export class SelectBox extends Widget { this.toDispose = []; this._onDidSelect = new Emitter(); + if (styles) { + this.selectBackground = styles.selectBackground; + this.selectForeground = styles.selectForeground; + } + this.toDispose.push(dom.addStandardDisposableListener(this.selectElement, 'change', (e) => { this.selectElement.title = e.target.value; this._onDidSelect.fire(e.target.value); @@ -81,6 +94,25 @@ export class SelectBox extends Widget { dom.addClass(container, 'select-container'); container.appendChild(this.selectElement); this.setOptions(this.options, this.selected); + + this._applyStyles(); + } + + public style(styles: ISelectBoxStyles) { + this.selectBackground = styles.selectBackground; + this.selectForeground = styles.selectForeground; + + this._applyStyles(); + } + + protected _applyStyles() { + if (this.selectElement) { + const background = this.selectBackground ? this.selectBackground.toString() : null; + const foreground = this.selectForeground ? this.selectForeground.toString() : null; + + this.selectElement.style.backgroundColor = background; + this.selectElement.style.color = foreground; + } } private createOption(value: string, disabled?: boolean): HTMLOptionElement { diff --git a/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts b/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts index cc3c9cbf57d..e2d68585f91 100644 --- a/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts +++ b/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts @@ -15,7 +15,7 @@ import { IQuickNavigateConfiguration, IAutoFocus, IEntryRunContext, IModel, Mode import { Filter, Renderer, DataSource, IModelProvider, AccessibilityProvider } from 'vs/base/parts/quickopen/browser/quickOpenViewer'; import { Dimension, Builder, $ } from 'vs/base/browser/builder'; import { ISelectionEvent, IFocusEvent, ITree, ContextMenuEvent } from 'vs/base/parts/tree/browser/tree'; -import { InputBox, MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; +import { InputBox, MessageType, IInputBoxStyles } from 'vs/base/browser/ui/inputbox/inputBox'; import Severity from 'vs/base/common/severity'; import { Tree } from 'vs/base/parts/tree/browser/treeImpl'; import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar'; @@ -26,6 +26,7 @@ import { IActionProvider } from 'vs/base/parts/tree/browser/actionsRenderer'; import { KeyCode, KeyMod } from 'vs/base/common/keyCodes'; import { IDisposable, dispose } from 'vs/base/common/lifecycle'; import { ScrollbarVisibility } from 'vs/base/common/scrollable'; +import { Color } from "vs/base/common/color"; export interface IQuickOpenCallbacks { onOk: () => void; @@ -36,7 +37,7 @@ export interface IQuickOpenCallbacks { onFocusLost?: () => boolean /* veto close */; } -export interface IQuickOpenOptions { +export interface IQuickOpenOptions extends IQuickOpenStyles { minItemsToShow?: number; maxItemsToShow?: number; inputPlaceHolder: string; @@ -45,6 +46,10 @@ export interface IQuickOpenOptions { keyboardSupport?: boolean; } +export interface IQuickOpenStyles extends IInputBoxStyles { + +} + export interface IShowOptions { quickNavigateConfiguration?: IQuickNavigateConfiguration; autoFocus?: IAutoFocus; @@ -99,6 +104,9 @@ export class QuickOpenWidget implements IModelProvider { private model: IModel; private inputChangingTimeoutHandle: number; + private inputBackground: Color; + private inputForeground: Color; + constructor(container: HTMLElement, callbacks: IQuickOpenCallbacks, options: IQuickOpenOptions, usageLogger?: IQuickOpenUsageLogger) { this.toUnbind = []; this.container = container; @@ -106,6 +114,9 @@ export class QuickOpenWidget implements IModelProvider { this.options = options; this.usageLogger = usageLogger; this.model = null; + + this.inputBackground = options.inputBackground; + this.inputForeground = options.inputForeground; } public getElement(): Builder { @@ -145,7 +156,9 @@ export class QuickOpenWidget implements IModelProvider { this.inputContainer = inputContainer; this.inputBox = new InputBox(inputContainer.getHTMLElement(), null, { placeholder: this.options.inputPlaceHolder || '', - ariaLabel: DEFAULT_INPUT_ARIA_LABEL + ariaLabel: DEFAULT_INPUT_ARIA_LABEL, + inputBackground: this.inputBackground, + inputForeground: this.inputForeground }); // ARIA @@ -297,6 +310,22 @@ export class QuickOpenWidget implements IModelProvider { return this.builder.getHTMLElement(); } + public style(styles: IQuickOpenStyles) { + this.inputBackground = styles.inputBackground; + this.inputForeground = styles.inputForeground; + + this._applyStyles(); + } + + protected _applyStyles() { + if (this.inputBox) { + this.inputBox.style({ + inputBackground: this.inputBackground, + inputForeground: this.inputForeground + }); + } + } + private shouldOpenInBackground(e: StandardKeyboardEvent): boolean { if (e.keyCode !== KeyCode.RightArrow) { return false; // only for right arrow diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index a1c5573ef66..68dde0a50be 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -30,4 +30,8 @@ export function attachStyler(themeService: IThemeService, widget: IThemable, opt export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService): IDisposable { return attachStyler(themeService, widget, { inputBackground, inputForeground }); +} + +export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeService): IDisposable { + return attachStyler(themeService, widget, { selectBackground: inputBackground, selectForeground: inputForeground }); } \ No newline at end of file diff --git a/src/vs/workbench/electron-browser/media/shell.css b/src/vs/workbench/electron-browser/media/shell.css index 0b99abcd27c..c678647bfbc 100644 --- a/src/vs/workbench/electron-browser/media/shell.css +++ b/src/vs/workbench/electron-browser/media/shell.css @@ -206,28 +206,6 @@ /* TODO@theme (widgets) */ -.monaco-shell.vs input { - background-color: white; -} - -.monaco-shell.vs-dark input, -.monaco-shell.vs-dark textarea { - background-color: #3C3C3C; -} - -.monaco-shell.vs input:disabled { - background-color: #E1E1E1; -} - -.monaco-shell.vs-dark input:disabled { - background-color: #333; -} - -.monaco-shell.hc-black input, -.monaco-shell.hc-black textarea { - background-color: #000; -} - /* START Keyboard Focus Indication Styles */ .monaco-shell.vs [tabindex="0"]:focus, diff --git a/src/vs/workbench/parts/debug/browser/breakpointWidget.ts b/src/vs/workbench/parts/debug/browser/breakpointWidget.ts index c26e9bb3c4e..c6f34eedb79 100644 --- a/src/vs/workbench/parts/debug/browser/breakpointWidget.ts +++ b/src/vs/workbench/parts/debug/browser/breakpointWidget.ts @@ -18,7 +18,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView import { IDebugService, IBreakpoint, IRawBreakpoint } from 'vs/workbench/parts/debug/common/debug'; import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { once } from 'vs/base/common/functional'; -import { attachInputBoxStyler } from 'vs/platform/theme/common/styler'; +import { attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler'; import { IThemeService } from 'vs/platform/theme/common/themeService'; const $ = dom.$; @@ -72,6 +72,7 @@ export class BreakpointWidget extends ZoneWidget { this.hitCountContext = breakpoint && breakpoint.hitCondition && !breakpoint.condition; const selected = this.hitCountContext ? 1 : 0; const selectBox = new SelectBox([nls.localize('expression', "Expression"), nls.localize('hitCount', "Hit Count")], selected); + this.toDispose.push(attachSelectBoxStyler(selectBox, this.themeService)); selectBox.render(dom.append(container, $('.breakpoint-select-container'))); selectBox.onDidSelect(e => { this.hitCountContext = e === 'Hit Count'; diff --git a/src/vs/workbench/parts/debug/browser/debugActionItems.ts b/src/vs/workbench/parts/debug/browser/debugActionItems.ts index 13d294878ce..57df2f5b6f8 100644 --- a/src/vs/workbench/parts/debug/browser/debugActionItems.ts +++ b/src/vs/workbench/parts/debug/browser/debugActionItems.ts @@ -16,6 +16,8 @@ import { EventEmitter } from 'vs/base/common/eventEmitter'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { ICommandService } from 'vs/platform/commands/common/commands'; import { IDebugService } from 'vs/workbench/parts/debug/common/debug'; +import { IThemeService } from "vs/platform/theme/common/themeService"; +import { attachSelectBoxStyler } from "vs/platform/theme/common/styler"; const $ = dom.$; @@ -34,12 +36,15 @@ export class StartDebugActionItem extends EventEmitter implements IActionItem { private context: any, private action: IAction, @IDebugService private debugService: IDebugService, + @IThemeService themeService: IThemeService, @IConfigurationService private configurationService: IConfigurationService, @ICommandService private commandService: ICommandService ) { super(); this.toDispose = []; this.selectBox = new SelectBox([], -1); + this.toDispose.push(attachSelectBoxStyler(this.selectBox, themeService)); + this.registerListeners(); } @@ -150,10 +155,13 @@ export class StartDebugActionItem extends EventEmitter implements IActionItem { export class FocusProcessActionItem extends SelectActionItem { constructor( action: IAction, - @IDebugService private debugService: IDebugService + @IDebugService private debugService: IDebugService, + @IThemeService themeService: IThemeService ) { super(null, action, [], -1); + this.toDispose.push(attachSelectBoxStyler(this.selectBox, themeService)); + this.debugService.getViewModel().onDidFocusStackFrame(() => { const process = this.debugService.getViewModel().focusedProcess; if (process) { diff --git a/src/vs/workbench/parts/output/browser/outputActions.ts b/src/vs/workbench/parts/output/browser/outputActions.ts index ef225a8f426..3c4bdd1bb1a 100644 --- a/src/vs/workbench/parts/output/browser/outputActions.ts +++ b/src/vs/workbench/parts/output/browser/outputActions.ts @@ -13,6 +13,8 @@ import { IPartService } from 'vs/workbench/services/part/common/partService'; import { IPanelService } from 'vs/workbench/services/panel/common/panelService'; import { TogglePanelAction } from 'vs/workbench/browser/panel'; import { IDisposable, dispose } from 'vs/base/common/lifecycle'; +import { attachSelectBoxStyler } from "vs/platform/theme/common/styler"; +import { IThemeService } from "vs/platform/theme/common/themeService"; export class ToggleOutputAction extends TogglePanelAction { @@ -105,11 +107,15 @@ export class SwitchOutputActionItem extends SelectActionItem { constructor( action: IAction, - @IOutputService private outputService: IOutputService + @IOutputService private outputService: IOutputService, + @IThemeService themeService: IThemeService ) { super(null, action, [], 0); + this.toDispose.push(this.outputService.onOutputChannel(() => this.setOptions(this.getOptions(), this.getSelected(undefined)))); this.toDispose.push(this.outputService.onActiveOutputChannel(activeChannelId => this.setOptions(this.getOptions(), this.getSelected(activeChannelId)))); + this.toDispose.push(attachSelectBoxStyler(this.selectBox, themeService)); + this.setOptions(this.getOptions(), this.getSelected(this.outputService.getActiveChannel().id)); } diff --git a/src/vs/workbench/parts/search/browser/searchWidget.ts b/src/vs/workbench/parts/search/browser/searchWidget.ts index 681999ee35e..8d1a8f348cd 100644 --- a/src/vs/workbench/parts/search/browser/searchWidget.ts +++ b/src/vs/workbench/parts/search/browser/searchWidget.ts @@ -219,6 +219,7 @@ export class SearchWidget extends Widget { let searchInputContainer = dom.append(parent, dom.$('.search-container.input-box')); this.searchInput = this._register(new FindInput(searchInputContainer, this.contextViewService, inputOptions)); + this._register(attachInputBoxStyler(this.searchInput, this.themeService)); this.searchInput.onKeyUp((keyboardEvent: IKeyboardEvent) => this.onSearchInputKeyUp(keyboardEvent)); this.searchInput.setValue(options.value || ''); this.searchInput.setRegex(!!options.isRegex); diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalActions.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalActions.ts index 74bf985f218..a7a15154fab 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalActions.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalActions.ts @@ -15,6 +15,8 @@ import { TogglePanelAction } from 'vs/workbench/browser/panel'; import { IPartService } from 'vs/workbench/services/part/common/partService'; import { IPanelService } from 'vs/workbench/services/panel/common/panelService'; import { IMessageService, Severity } from 'vs/platform/message/common/message'; +import { attachSelectBoxStyler } from "vs/platform/theme/common/styler"; +import { IThemeService } from "vs/platform/theme/common/themeService"; export class ToggleTerminalAction extends TogglePanelAction { @@ -331,12 +333,15 @@ export class SwitchTerminalInstanceActionItem extends SelectActionItem { constructor( action: IAction, - @ITerminalService private terminalService: ITerminalService + @ITerminalService private terminalService: ITerminalService, + @IThemeService themeService: IThemeService ) { super(null, action, terminalService.getInstanceLabels(), terminalService.activeTerminalInstanceIndex); + this.toDispose.push(terminalService.onInstancesChanged(this._updateItems, this)); this.toDispose.push(terminalService.onActiveInstanceChanged(this._updateItems, this)); this.toDispose.push(terminalService.onInstanceTitleChanged(this._updateItems, this)); + this.toDispose.push(attachSelectBoxStyler(this.selectBox, themeService)); } private _updateItems(): void {