Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

体验新版 GitCode，发现更多精彩内容 >>

提交 21628a3e 编写于 作者: B Benjamin Pasero
浏览文件
操作

theming - info/warning/error for input box

上级 c31cdf06
隐藏空白更改
内联 并排
Showing with 178 addition and 102 deletion
src/vs/base/browser/ui/findinput/findInput.ts
浏览文件 @ 21628a3e
......@@ -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({
......
src/vs/base/browser/ui/inputbox/inputBox.css
浏览文件 @ 21628a3e
......@@ -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
src/vs/base/browser/ui/inputbox/inputBox.ts
浏览文件 @ 21628a3e
......@@ -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<string>());
public onDidChange: Event<string> = 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 = <any>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();
}
......
src/vs/base/parts/quickopen/browser/quickOpenWidget.ts
浏览文件 @ 21628a3e
......@@ -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
});
}
......
src/vs/editor/contrib/find/browser/findWidget.ts
浏览文件 @ 21628a3e
......@@ -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);
......
src/vs/platform/theme/common/colorRegistry.ts
浏览文件 @ 21628a3e
......@@ -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.
*/
......
src/vs/platform/theme/common/styler.ts
浏览文件 @ 21628a3e
......@@ -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,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或