diff --git a/src/vs/base/browser/ui/findinput/findInput.ts b/src/vs/base/browser/ui/findinput/findInput.ts index 6f9975aca08..26e4e8b23e3 100644 --- a/src/vs/base/browser/ui/findinput/findInput.ts +++ b/src/vs/base/browser/ui/findinput/findInput.ts @@ -48,6 +48,14 @@ export class FindInput extends Widget { private inputActiveOptionBorder: Color; private inputBackground: Color; private inputForeground: Color; + private inputBorder: Color; + + private infoBorder: Color; + private infoBackground: Color; + private warningBorder: Color; + private warningBackground: Color; + private errorBorder: Color; + private errorBackground: Color; private regex: RegexCheckbox; private wholeWords: WholeWordsCheckbox; @@ -81,6 +89,14 @@ export class FindInput extends Widget { this.inputActiveOptionBorder = options.inputActiveOptionBorder; this.inputBackground = options.inputBackground; this.inputForeground = options.inputForeground; + this.inputBorder = options.inputBorder; + + this.infoBorder = options.infoBorder; + this.infoBackground = options.infoBackground; + this.warningBorder = options.warningBorder; + this.warningBackground = options.warningBackground; + this.errorBorder = options.errorBorder; + this.errorBackground = options.errorBackground; this.regex = null; this.wholeWords = null; @@ -150,6 +166,14 @@ export class FindInput extends Widget { this.inputActiveOptionBorder = styles.inputActiveOptionBorder; this.inputBackground = styles.inputBackground; this.inputForeground = styles.inputForeground; + this.inputBorder = styles.inputBorder; + + this.infoBackground = styles.infoBackground; + this.infoBorder = styles.infoBorder; + this.warningBackground = styles.warningBackground; + this.warningBorder = styles.warningBorder; + this.errorBackground = styles.errorBackground; + this.errorBorder = styles.errorBorder; this.applyStyles(); } @@ -165,7 +189,14 @@ export class FindInput extends Widget { const inputBoxStyles: IInputBoxStyles = { inputBackground: this.inputBackground, - inputForeground: this.inputForeground + inputForeground: this.inputForeground, + inputBorder: this.inputBorder, + infoBackground: this.infoBackground, + infoBorder: this.infoBorder, + warningBackground: this.warningBackground, + warningBorder: this.warningBorder, + errorBackground: this.errorBackground, + errorBorder: this.errorBorder }; this.inputBox.style(inputBoxStyles); } @@ -235,7 +266,14 @@ export class FindInput extends Widget { showMessage: true }, inputBackground: this.inputBackground, - inputForeground: this.inputForeground + inputForeground: this.inputForeground, + inputBorder: this.inputBorder, + infoBackground: this.infoBackground, + infoBorder: this.infoBorder, + warningBackground: this.warningBackground, + warningBorder: this.warningBorder, + errorBackground: this.errorBackground, + errorBorder: this.errorBorder })); this.regex = this._register(new RegexCheckbox({ diff --git a/src/vs/base/browser/ui/inputbox/inputBox.css b/src/vs/base/browser/ui/inputbox/inputBox.css index ac638af2d30..646ce808b44 100644 --- a/src/vs/base/browser/ui/inputbox/inputBox.css +++ b/src/vs/base/browser/ui/inputbox/inputBox.css @@ -18,6 +18,10 @@ font-size: inherit; } +.monaco-inputbox.idle { + border: 1px solid transparent; +} + .monaco-inputbox > .wrapper > .input, .monaco-inputbox > .wrapper > .mirror { @@ -112,94 +116,4 @@ background-repeat: no-repeat; width: 16px; height: 16px; -} - -/* Theming */ - -.monaco-inputbox.idle { - border: 1px solid transparent; -} - -.monaco-inputbox.info { - border: 1px solid #009CCC; -} - -.monaco-inputbox-container .monaco-inputbox-message.info { - background: #D6ECF2; - border: 1px solid #009CCC; -} - -.monaco-inputbox.warning { - border: 1px solid #F2CB1D; -} - -.monaco-inputbox-container .monaco-inputbox-message.warning { - background: #F6F5D2; - border: 1px solid #F2CB1D; -} - -.monaco-inputbox.error { - border: 1px solid #E51400; -} - -.monaco-inputbox-container .monaco-inputbox-message.error { - background: #f2dede; - border: 1px solid #E51400; -} - -/* VS Dark */ - -.vs-dark .monaco-inputbox.info { - border-color: #55AAFF; -} - -.vs-dark .monaco-inputbox-container .monaco-inputbox-message.info { - background-color: #063B49; - border-color: #55AAFF; -} - -.vs-dark .monaco-inputbox.warning { - border-color: #B89500; -} - -.vs-dark .monaco-inputbox-container .monaco-inputbox-message.warning { - background-color: #352A05; - border-color: #B89500; -} - -.vs-dark .monaco-inputbox.error { - border-color: #BE1100; -} - -.vs-dark .monaco-inputbox-container .monaco-inputbox-message.error { - background-color: #5A1D1D; - border-color: #BE1100; -} - -/* High Contrast Theming */ -.hc-black .monaco-inputbox.idle { - border: 1px solid #6FC3DF; -} - -.hc-black .monaco-inputbox-container .monaco-inputbox-message.info { - background-color: #000; - border-color: #6FC3DF; -} - -.hc-black .monaco-inputbox.warning { - border-color: #B89500; -} - -.hc-black .monaco-inputbox-container .monaco-inputbox-message.warning { - background-color: #000; - border-color: #B89500; -} - -.hc-black .monaco-inputbox.error { - border-color: #BE1100; -} - -.hc-black .monaco-inputbox-container .monaco-inputbox-message.error { - background-color: #000; - border-color: #BE1100; } \ No newline at end of file diff --git a/src/vs/base/browser/ui/inputbox/inputBox.ts b/src/vs/base/browser/ui/inputbox/inputBox.ts index b96818078ce..59735f42ebe 100644 --- a/src/vs/base/browser/ui/inputbox/inputBox.ts +++ b/src/vs/base/browser/ui/inputbox/inputBox.ts @@ -35,6 +35,12 @@ export interface IInputBoxStyles { inputBackground?: Color; inputForeground?: Color; inputBorder?: Color; + infoBorder?: Color; + infoBackground?: Color; + warningBorder?: Color; + warningBackground?: Color; + errorBorder?: Color; + errorBackground?: Color; } export interface IInputValidator { @@ -65,7 +71,13 @@ export interface IRange { const defaultOpts = { inputBackground: Color.fromHex('#3C3C3C'), - inputForeground: Color.fromHex('#CCCCCC') + inputForeground: Color.fromHex('#CCCCCC'), + infoBorder: Color.fromHex('#55AAFF'), + infoBackground: Color.fromHex('#063B49'), + warningBorder: Color.fromHex('#B89500'), + warningBackground: Color.fromHex('#352A05'), + errorBorder: Color.fromHex('#BE1100'), + errorBackground: Color.fromHex('#5A1D1D') }; export class InputBox extends Widget { @@ -87,6 +99,13 @@ export class InputBox extends Widget { private inputForeground: Color; private inputBorder: Color; + private infoBorder: Color; + private infoBackground: Color; + private warningBorder: Color; + private warningBackground: Color; + private errorBorder: Color; + private errorBackground: Color; + private _onDidChange = this._register(new Emitter()); public onDidChange: Event = this._onDidChange.event; @@ -103,10 +122,18 @@ 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; this.inputBorder = this.options.inputBorder; + this.infoBorder = this.options.infoBorder; + this.infoBackground = this.options.infoBackground; + this.warningBorder = this.options.warningBorder; + this.warningBackground = this.options.warningBackground; + this.errorBorder = this.options.errorBorder; + this.errorBackground = this.options.errorBackground; + if (this.options.validationOptions) { this.validation = this.options.validationOptions.validation; this.showValidationMessage = this.options.validationOptions.showMessage || false; @@ -267,6 +294,9 @@ export class InputBox extends Widget { dom.removeClass(this.element, 'error'); dom.addClass(this.element, this.classForType(message.type)); + const styles = this.stylesForType(this.message.type); + this.element.style.border = styles.border ? `1px solid ${styles.border}` : null; + // ARIA Support let alertText: string; if (message.type === MessageType.ERROR) { @@ -293,6 +323,7 @@ export class InputBox extends Widget { dom.addClass(this.element, 'idle'); this._hideMessage(); + this.applyStyles(); } public isInputValid(): boolean { @@ -317,6 +348,14 @@ export class InputBox extends Widget { return !result; } + private stylesForType(type: MessageType): { border: Color; background: Color } { + switch (type) { + case MessageType.INFO: return { border: this.infoBorder, background: this.infoBackground }; + case MessageType.WARNING: return { border: this.warningBorder, background: this.warningBackground }; + default: return { border: this.errorBorder, background: this.errorBackground }; + } + } + private classForType(type: MessageType): string { switch (type) { case MessageType.INFO: return 'info'; @@ -355,7 +394,13 @@ export class InputBox extends Widget { let spanElement: HTMLElement = renderHtml(renderOptions); dom.addClass(spanElement, this.classForType(this.message.type)); + + const styles = this.stylesForType(this.message.type); + spanElement.style.backgroundColor = styles.background ? styles.background.toString() : null; + spanElement.style.border = styles.border ? `1px solid ${styles.border}` : null; + dom.append(div, spanElement); + return null; }, layout: layout @@ -400,6 +445,13 @@ export class InputBox extends Widget { this.inputForeground = styles.inputForeground; this.inputBorder = styles.inputBorder; + this.infoBackground = styles.infoBackground; + this.infoBorder = styles.infoBorder; + this.warningBackground = styles.warningBackground; + this.warningBorder = styles.warningBorder; + this.errorBackground = styles.errorBackground; + this.errorBorder = styles.errorBorder; + this.applyStyles(); } diff --git a/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts b/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts index d90c8773cc5..18c9cfe0278 100644 --- a/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts +++ b/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts @@ -170,7 +170,13 @@ export class QuickOpenWidget implements IModelProvider { ariaLabel: DEFAULT_INPUT_ARIA_LABEL, inputBackground: this.styles.inputBackground, inputForeground: this.styles.inputForeground, - inputBorder: this.styles.inputBorder + inputBorder: this.styles.inputBorder, + infoBackground: this.styles.infoBackground, + infoBorder: this.styles.infoBorder, + warningBackground: this.styles.warningBackground, + warningBorder: this.styles.warningBorder, + errorBackground: this.styles.errorBackground, + errorBorder: this.styles.errorBorder }); // ARIA @@ -349,7 +355,13 @@ export class QuickOpenWidget implements IModelProvider { this.inputBox.style({ inputBackground: this.styles.inputBackground, inputForeground: this.styles.inputForeground, - inputBorder: this.styles.inputBorder + inputBorder: this.styles.inputBorder, + infoBackground: this.styles.infoBackground, + infoBorder: this.styles.infoBorder, + warningBackground: this.styles.warningBackground, + warningBorder: this.styles.warningBorder, + errorBackground: this.styles.errorBackground, + errorBorder: this.styles.errorBorder }); } diff --git a/src/vs/editor/contrib/find/browser/findWidget.ts b/src/vs/editor/contrib/find/browser/findWidget.ts index f02660ba5f1..5f08915af94 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.ts +++ b/src/vs/editor/contrib/find/browser/findWidget.ts @@ -26,7 +26,7 @@ import { CONTEXT_FIND_INPUT_FOCUSSED } from 'vs/editor/contrib/find/common/findC import { ITheme, registerThemingParticipant, IThemeService } from 'vs/platform/theme/common/themeService'; import { Color } from 'vs/base/common/color'; import { IConfigurationChangedEvent } from "vs/editor/common/config/editorOptions"; -import { editorFindRangeHighlight, editorFindMatch, editorFindMatchHighlight, highContrastOutline, highContrastBorder, inputBackground, editorWidgetBackground, inputActiveOptionBorder, widgetShadow, inputForeground, inputBorder } from "vs/platform/theme/common/colorRegistry"; +import { editorFindRangeHighlight, editorFindMatch, editorFindMatchHighlight, highContrastOutline, highContrastBorder, inputBackground, editorWidgetBackground, inputActiveOptionBorder, widgetShadow, inputForeground, inputBorder, infoBackground, infoBorder, warningBackground, warningBorder, errorBackground, errorBorder } from "vs/platform/theme/common/colorRegistry"; export interface IFindController { replace(): void; @@ -352,7 +352,13 @@ export class FindWidget extends Widget implements IOverlayWidget { inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder), inputBackground: theme.getColor(inputBackground), inputForeground: theme.getColor(inputForeground), - inputBorder: theme.getColor(inputBorder) + inputBorder: theme.getColor(inputBorder), + infoBackground: theme.getColor(infoBackground), + infoBorder: theme.getColor(infoBorder), + warningBackground: theme.getColor(warningBackground), + warningBorder: theme.getColor(warningBorder), + errorBackground: theme.getColor(errorBackground), + errorBorder: theme.getColor(errorBorder) }; this._findInput.style(inputStyles); this._replaceInputBox.style(inputStyles); diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index b0b0eaf5bad..5282d67ae0c 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -126,6 +126,13 @@ export const focus = registerColor('focusedElementOutline', { hc: '#F38518' }, nls.localize('focusedElementOutline', "Overall outline/border color for focused elements. This color is only used if not overridden by a component.")); +export const infoBackground = registerColor('infoBackground', { dark: '#063B49', light: '#D6ECF2', hc: Color.black }, nls.localize('infoBackground', "Overall info background color. This color is only used if not overridden by a component.")); +export const infoBorder = registerColor('infoBorder', { dark: '#55AAFF', light: '#009CCC', hc: '#6FC3DF' }, nls.localize('infoBorder', "Overall info border color. This color is only used if not overridden by a component.")); +export const warningBackground = registerColor('warningBackground', { dark: '#352A05', light: '#F6F5D2', hc: Color.black }, nls.localize('warningBackground', "Overall warning background color. This color is only used if not overridden by a component.")); +export const warningBorder = registerColor('warningBorder', { dark: '#B89500', light: '#F2CB1D', hc: '#B89500' }, nls.localize('warningBorder', "Overall warning border color. This color is only used if not overridden by a component.")); +export const errorBackground = registerColor('errorBackground', { dark: '#5A1D1D', light: '#F2DEDE', hc: Color.black }, nls.localize('errorBackground', "Overall error background color. This color is only used if not overridden by a component.")); +export const errorBorder = registerColor('errorBorder', { dark: '#BE1100', light: '#E51400', hc: '#BE1100' }, nls.localize('errorBorder', "Overall error border color. This color is only used if not overridden by a component.")); + /** * Commonly used High contrast colors. */ diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index ccd8f3593e0..ad201288e55 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 { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, highContrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listFocusAndSelectionBackground, listFocusAndSelectionForeground, listInactiveFocusBackground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, listHoverOutline, listSelectionOutline, listFocusOutline, listInactiveFocusOutline, pickerGroupBorder, pickerGroupForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, highContrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listFocusAndSelectionBackground, listFocusAndSelectionForeground, listInactiveFocusBackground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, listHoverOutline, listSelectionOutline, listFocusOutline, listInactiveFocusOutline, pickerGroupBorder, pickerGroupForeground, widgetShadow, infoBorder, infoBackground, warningBorder, warningBackground, errorBorder, errorBackground } from 'vs/platform/theme/common/colorRegistry'; import { IDisposable } from "vs/base/common/lifecycle"; export interface IThemable { @@ -34,11 +34,28 @@ export function attachCheckboxStyler(widget: IThemable, themeService: IThemeServ }); } -export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: { inputBackground?: ColorIdentifier, inputForeground?: ColorIdentifier, inputBorder?: ColorIdentifier }): IDisposable { +export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: + { + inputBackground?: ColorIdentifier, + inputForeground?: ColorIdentifier, + inputBorder?: ColorIdentifier, + infoBorder?: ColorIdentifier, + infoBackground?: ColorIdentifier, + warningBorder?: ColorIdentifier, + warningBackground?: ColorIdentifier, + errorBorder?: ColorIdentifier, + errorBackground?: ColorIdentifier + }): IDisposable { return attachStyler(themeService, widget, { inputBackground: (style && style.inputBackground) || inputBackground, inputForeground: (style && style.inputForeground) || inputForeground, - inputBorder: (style && style.inputBorder) || inputBorder + inputBorder: (style && style.inputBorder) || inputBorder, + infoBorder: (style && style.infoBorder) || infoBorder, + infoBackground: (style && style.infoBackground) || infoBackground, + warningBorder: (style && style.warningBorder) || warningBorder, + warningBackground: (style && style.warningBackground) || warningBackground, + errorBorder: (style && style.errorBorder) || errorBorder, + errorBackground: (style && style.errorBackground) || errorBackground }); } @@ -50,12 +67,30 @@ export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeSer }); } -export function attachFindInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: { inputBackground?: ColorIdentifier, inputForeground?: ColorIdentifier, inputBorder?: ColorIdentifier, inputActiveOptionBorder?: ColorIdentifier }): IDisposable { +export function attachFindInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: + { + inputBackground?: ColorIdentifier, + inputForeground?: ColorIdentifier, + inputBorder?: ColorIdentifier, + inputActiveOptionBorder?: ColorIdentifier, + infoBorder?: ColorIdentifier, + infoBackground?: ColorIdentifier, + warningBorder?: ColorIdentifier, + warningBackground?: ColorIdentifier, + errorBorder?: ColorIdentifier, + errorBackground?: ColorIdentifier + }): IDisposable { return attachStyler(themeService, widget, { inputBackground: (style && style.inputBackground) || inputBackground, inputForeground: (style && style.inputForeground) || inputForeground, inputBorder: (style && style.inputBorder) || inputBorder, - inputActiveOptionBorder: (style && style.inputActiveOptionBorder) || inputActiveOptionBorder + inputActiveOptionBorder: (style && style.inputActiveOptionBorder) || inputActiveOptionBorder, + infoBorder: (style && style.infoBorder) || infoBorder, + infoBackground: (style && style.infoBackground) || infoBackground, + warningBorder: (style && style.warningBorder) || warningBorder, + warningBackground: (style && style.warningBackground) || warningBackground, + errorBorder: (style && style.errorBorder) || errorBorder, + errorBackground: (style && style.errorBackground) || errorBackground }); } @@ -67,6 +102,12 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer inputBackground?: ColorIdentifier, inputForeground?: ColorIdentifier, inputBorder?: ColorIdentifier, + infoBorder?: ColorIdentifier, + infoBackground?: ColorIdentifier, + warningBorder?: ColorIdentifier, + warningBackground?: ColorIdentifier, + errorBorder?: ColorIdentifier, + errorBackground?: ColorIdentifier pickerGroupForeground?: ColorIdentifier, pickerGroupBorder?: ColorIdentifier, listFocusBackground?: ColorIdentifier, @@ -91,6 +132,12 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer inputBackground: (style && style.inputBackground) || inputBackground, inputForeground: (style && style.inputForeground) || inputForeground, inputBorder: (style && style.inputBorder) || inputBorder, + infoBorder: (style && style.infoBorder) || infoBorder, + infoBackground: (style && style.infoBackground) || infoBackground, + warningBorder: (style && style.warningBorder) || warningBorder, + warningBackground: (style && style.warningBackground) || warningBackground, + errorBorder: (style && style.errorBorder) || errorBorder, + errorBackground: (style && style.errorBackground) || errorBackground, listFocusBackground: (style && style.listFocusBackground) || listFocusBackground, listActiveSelectionBackground: (style && style.listActiveSelectionBackground) || listActiveSelectionBackground, listActiveSelectionForeground: (style && style.listActiveSelectionForeground) || listActiveSelectionForeground,