Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add option for input validation foreground color #57734

Merged
merged 6 commits into from
Sep 5, 2018
Merged

add option for input validation foreground color #57734

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
83825fa
add option for input validation foreground color for findWidget
ParkourKarthik Sep 1, 2018
9c3c212
fix copy paste mistakes
ParkourKarthik Sep 4, 2018
b5283d7
removing defaults for foreground color
ParkourKarthik Sep 4, 2018
aa36d75
add inputValidationForeground wherever inputValidationBackground is used
ParkourKarthik Sep 5, 2018
a97c0d1
resolve PR merge conflict
ParkourKarthik Sep 5, 2018
313141f
add inputValidationForeground color
ParkourKarthik Sep 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions src/vs/base/browser/ui/findinput/findInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,13 @@ export class FindInput extends Widget {

private inputValidationInfoBorder: Color;
private inputValidationInfoBackground: Color;
private inputValidationInfoForeground: Color;
private inputValidationWarningBorder: Color;
private inputValidationWarningBackground: Color;
private inputValidationWarningForeground: Color;
private inputValidationErrorBorder: Color;
private inputValidationErrorBackground: Color;
private inputValidationErrorForeground: Color;

private regex: RegexCheckbox;
private wholeWords: WholeWordsCheckbox;
Expand Down Expand Up @@ -101,10 +104,13 @@ export class FindInput extends Widget {

this.inputValidationInfoBorder = options.inputValidationInfoBorder;
this.inputValidationInfoBackground = options.inputValidationInfoBackground;
this.inputValidationInfoForeground = options.inputValidationInfoForeground;
this.inputValidationWarningBorder = options.inputValidationWarningBorder;
this.inputValidationWarningBackground = options.inputValidationWarningBackground;
this.inputValidationWarningForeground = options.inputValidationWarningForeground;
this.inputValidationErrorBorder = options.inputValidationErrorBorder;
this.inputValidationErrorBackground = options.inputValidationErrorBackground;
this.inputValidationErrorForeground = options.inputValidationErrorForeground;

this.regex = null;
this.wholeWords = null;
Expand Down Expand Up @@ -178,10 +184,13 @@ export class FindInput extends Widget {
this.inputBorder = styles.inputBorder;

this.inputValidationInfoBackground = styles.inputValidationInfoBackground;
this.inputValidationInfoForeground = styles.inputValidationInfoForeground;
this.inputValidationInfoBorder = styles.inputValidationInfoBorder;
this.inputValidationWarningBackground = styles.inputValidationWarningBackground;
this.inputValidationWarningForeground = styles.inputValidationWarningForeground;
this.inputValidationWarningBorder = styles.inputValidationWarningBorder;
this.inputValidationErrorBackground = styles.inputValidationErrorBackground;
this.inputValidationErrorForeground = styles.inputValidationErrorForeground;
this.inputValidationErrorBorder = styles.inputValidationErrorBorder;

this.applyStyles();
Expand All @@ -201,10 +210,13 @@ export class FindInput extends Widget {
inputForeground: this.inputForeground,
inputBorder: this.inputBorder,
inputValidationInfoBackground: this.inputValidationInfoBackground,
inputValidationInfoForeground: this.inputValidationInfoForeground,
inputValidationInfoBorder: this.inputValidationInfoBorder,
inputValidationWarningBackground: this.inputValidationWarningBackground,
inputValidationWarningForeground: this.inputValidationWarningForeground,
inputValidationWarningBorder: this.inputValidationWarningBorder,
inputValidationErrorBackground: this.inputValidationErrorBackground,
inputValidationErrorForeground: this.inputValidationErrorForeground,
inputValidationErrorBorder: this.inputValidationErrorBorder
};
this.inputBox.style(inputBoxStyles);
Expand Down Expand Up @@ -282,10 +294,13 @@ export class FindInput extends Widget {
inputForeground: this.inputForeground,
inputBorder: this.inputBorder,
inputValidationInfoBackground: this.inputValidationInfoBackground,
inputValidationInfoForeground: this.inputValidationInfoForeground,
inputValidationInfoBorder: this.inputValidationInfoBorder,
inputValidationWarningBackground: this.inputValidationWarningBackground,
inputValidationWarningForeground: this.inputValidationWarningForeground,
inputValidationWarningBorder: this.inputValidationWarningBorder,
inputValidationErrorBackground: this.inputValidationErrorBackground,
inputValidationErrorForeground: this.inputValidationErrorForeground,
inputValidationErrorBorder: this.inputValidationErrorBorder,
history
}));
Expand Down
21 changes: 17 additions & 4 deletions src/vs/base/browser/ui/inputbox/inputBox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,13 @@ export interface IInputBoxStyles {
inputBorder?: Color;
inputValidationInfoBorder?: Color;
inputValidationInfoBackground?: Color;
inputValidationInfoForeground?: Color;
inputValidationWarningBorder?: Color;
inputValidationWarningBackground?: Color;
inputValidationWarningForeground?: Color;
inputValidationErrorBorder?: Color;
inputValidationErrorBackground?: Color;
inputValidationErrorForeground?: Color;
}

export interface IInputValidator {
Expand Down Expand Up @@ -100,10 +103,13 @@ export class InputBox extends Widget {

private inputValidationInfoBorder: Color;
private inputValidationInfoBackground: Color;
private inputValidationInfoForeground: Color;
private inputValidationWarningBorder: Color;
private inputValidationWarningBackground: Color;
private inputValidationWarningForeground: Color;
private inputValidationErrorBorder: Color;
private inputValidationErrorBackground: Color;
private inputValidationErrorForeground: Color;

private _onDidChange = this._register(new Emitter<string>());
public readonly onDidChange: Event<string> = this._onDidChange.event;
Expand All @@ -128,10 +134,13 @@ export class InputBox extends Widget {

this.inputValidationInfoBorder = this.options.inputValidationInfoBorder;
this.inputValidationInfoBackground = this.options.inputValidationInfoBackground;
this.inputValidationInfoForeground = this.options.inputValidationInfoForeground;
this.inputValidationWarningBorder = this.options.inputValidationWarningBorder;
this.inputValidationWarningBackground = this.options.inputValidationWarningBackground;
this.inputValidationWarningForeground = this.options.inputValidationWarningForeground;
this.inputValidationErrorBorder = this.options.inputValidationErrorBorder;
this.inputValidationErrorBackground = this.options.inputValidationErrorBackground;
this.inputValidationErrorForeground = this.options.inputValidationErrorForeground;

if (this.options.validationOptions) {
this.validation = this.options.validationOptions.validation;
Expand Down Expand Up @@ -349,11 +358,11 @@ export class InputBox extends Widget {
return !errorMsg;
}

private stylesForType(type: MessageType): { border: Color; background: Color } {
private stylesForType(type: MessageType): { border: Color; background: Color; foreground: Color } {
switch (type) {
case MessageType.INFO: return { border: this.inputValidationInfoBorder, background: this.inputValidationInfoBackground };
case MessageType.WARNING: return { border: this.inputValidationWarningBorder, background: this.inputValidationWarningBackground };
default: return { border: this.inputValidationErrorBorder, background: this.inputValidationErrorBackground };
case MessageType.INFO: return { border: this.inputValidationInfoBorder, background: this.inputValidationInfoBackground, foreground: this.inputValidationInfoForeground };
case MessageType.WARNING: return { border: this.inputValidationWarningBorder, background: this.inputValidationWarningBackground, foreground: this.inputValidationWarningForeground };
default: return { border: this.inputValidationErrorBorder, background: this.inputValidationErrorBackground, foreground: this.inputValidationErrorForeground };
}
}

Expand Down Expand Up @@ -394,6 +403,7 @@ export class InputBox extends Widget {

const styles = this.stylesForType(this.message.type);
spanElement.style.backgroundColor = styles.background ? styles.background.toString() : null;
spanElement.style.color = styles.foreground ? styles.foreground.toString() : null;
spanElement.style.border = styles.border ? `1px solid ${styles.border}` : null;

dom.append(div, spanElement);
Expand Down Expand Up @@ -443,10 +453,13 @@ export class InputBox extends Widget {
this.inputBorder = styles.inputBorder;

this.inputValidationInfoBackground = styles.inputValidationInfoBackground;
this.inputValidationInfoForeground = styles.inputValidationInfoForeground;
this.inputValidationInfoBorder = styles.inputValidationInfoBorder;
this.inputValidationWarningBackground = styles.inputValidationWarningBackground;
this.inputValidationWarningForeground = styles.inputValidationWarningForeground;
this.inputValidationWarningBorder = styles.inputValidationWarningBorder;
this.inputValidationErrorBackground = styles.inputValidationErrorBackground;
this.inputValidationErrorForeground = styles.inputValidationErrorForeground;
this.inputValidationErrorBorder = styles.inputValidationErrorBorder;

this.applyStyles();
Expand Down
6 changes: 6 additions & 0 deletions src/vs/base/parts/quickopen/browser/quickOpenWidget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,10 +184,13 @@ export class QuickOpenWidget extends Disposable implements IModelProvider {
inputForeground: this.styles.inputForeground,
inputBorder: this.styles.inputBorder,
inputValidationInfoBackground: this.styles.inputValidationInfoBackground,
inputValidationInfoForeground: this.styles.inputValidationInfoForeground,
inputValidationInfoBorder: this.styles.inputValidationInfoBorder,
inputValidationWarningBackground: this.styles.inputValidationWarningBackground,
inputValidationWarningForeground: this.styles.inputValidationWarningForeground,
inputValidationWarningBorder: this.styles.inputValidationWarningBorder,
inputValidationErrorBackground: this.styles.inputValidationErrorBackground,
inputValidationErrorForeground: this.styles.inputValidationErrorForeground,
inputValidationErrorBorder: this.styles.inputValidationErrorBorder
}));

Expand Down Expand Up @@ -398,10 +401,13 @@ export class QuickOpenWidget extends Disposable implements IModelProvider {
inputForeground: this.styles.inputForeground,
inputBorder: this.styles.inputBorder,
inputValidationInfoBackground: this.styles.inputValidationInfoBackground,
inputValidationInfoForeground: this.styles.inputValidationInfoForeground,
inputValidationInfoBorder: this.styles.inputValidationInfoBorder,
inputValidationWarningBackground: this.styles.inputValidationWarningBackground,
inputValidationWarningForeground: this.styles.inputValidationWarningForeground,
inputValidationWarningBorder: this.styles.inputValidationWarningBorder,
inputValidationErrorBackground: this.styles.inputValidationErrorBackground,
inputValidationErrorForeground: this.styles.inputValidationErrorForeground,
inputValidationErrorBorder: this.styles.inputValidationErrorBorder
});
}
Expand Down
5 changes: 4 additions & 1 deletion src/vs/editor/contrib/find/findWidget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/c
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, contrastBorder, inputBackground, editorWidgetBackground, inputActiveOptionBorder, widgetShadow, inputForeground, inputBorder, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationErrorBackground, inputValidationErrorBorder, errorForeground, editorWidgetBorder, editorFindMatchBorder, editorFindMatchHighlightBorder, editorFindRangeHighlightBorder, editorWidgetResizeBorder } from 'vs/platform/theme/common/colorRegistry';
import { editorFindRangeHighlight, editorFindMatch, editorFindMatchHighlight, contrastBorder, inputBackground, editorWidgetBackground, inputActiveOptionBorder, widgetShadow, inputForeground, inputBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationInfoBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationWarningBorder, inputValidationErrorBackground, inputValidationErrorForeground, inputValidationErrorBorder, errorForeground, editorWidgetBorder, editorFindMatchBorder, editorFindMatchHighlightBorder, editorFindRangeHighlightBorder, editorWidgetResizeBorder } from 'vs/platform/theme/common/colorRegistry';
import { ContextScopedFindInput, ContextScopedHistoryInputBox } from 'vs/platform/widget/browser/contextScopedHistoryWidget';
import { toDisposable } from 'vs/base/common/lifecycle';

Expand Down Expand Up @@ -521,10 +521,13 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
inputForeground: theme.getColor(inputForeground),
inputBorder: theme.getColor(inputBorder),
inputValidationInfoBackground: theme.getColor(inputValidationInfoBackground),
inputValidationInfoForeground: theme.getColor(inputValidationInfoForeground),
inputValidationInfoBorder: theme.getColor(inputValidationInfoBorder),
inputValidationWarningBackground: theme.getColor(inputValidationWarningBackground),
inputValidationWarningForeground: theme.getColor(inputValidationWarningForeground),
inputValidationWarningBorder: theme.getColor(inputValidationWarningBorder),
inputValidationErrorBackground: theme.getColor(inputValidationErrorBackground),
inputValidationErrorForeground: theme.getColor(inputValidationErrorForeground),
inputValidationErrorBorder: theme.getColor(inputValidationErrorBorder)
};
this._findInput.style(inputStyles);
Expand Down
5 changes: 4 additions & 1 deletion src/vs/editor/contrib/find/simpleFindWidget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import * as dom from 'vs/base/browser/dom';
import { FindInput } from 'vs/base/browser/ui/findinput/findInput';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { registerThemingParticipant, ITheme } from 'vs/platform/theme/common/themeService';
import { inputBackground, inputActiveOptionBorder, inputForeground, inputBorder, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationErrorBackground, inputValidationErrorBorder, editorWidgetBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
import { inputBackground, inputActiveOptionBorder, inputForeground, inputBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationInfoBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationWarningBorder, inputValidationErrorBackground, inputValidationErrorForeground, inputValidationErrorBorder, editorWidgetBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
import { SimpleButton } from './findWidget';
import { ContextScopedFindInput } from 'vs/platform/widget/browser/contextScopedHistoryWidget';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
Expand Down Expand Up @@ -144,10 +144,13 @@ export abstract class SimpleFindWidget extends Widget {
inputForeground: theme.getColor(inputForeground),
inputBorder: theme.getColor(inputBorder),
inputValidationInfoBackground: theme.getColor(inputValidationInfoBackground),
inputValidationInfoForeground: theme.getColor(inputValidationInfoForeground),
inputValidationInfoBorder: theme.getColor(inputValidationInfoBorder),
inputValidationWarningBackground: theme.getColor(inputValidationWarningBackground),
inputValidationWarningForeground: theme.getColor(inputValidationWarningForeground),
inputValidationWarningBorder: theme.getColor(inputValidationWarningBorder),
inputValidationErrorBackground: theme.getColor(inputValidationErrorBackground),
inputValidationErrorForeground: theme.getColor(inputValidationErrorForeground),
inputValidationErrorBorder: theme.getColor(inputValidationErrorBorder)
};
this._findInput.style(inputStyles);
Expand Down
3 changes: 3 additions & 0 deletions src/vs/platform/theme/common/colorRegistry.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,10 +180,13 @@ export const inputActiveOptionBorder = registerColor('inputOption.activeBorder',
export const inputPlaceholderForeground = registerColor('input.placeholderForeground', { light: transparent(foreground, 0.5), dark: transparent(foreground, 0.5), hc: transparent(foreground, 0.7) }, nls.localize('inputPlaceholderForeground', "Input box foreground color for placeholder text."));

export const inputValidationInfoBackground = registerColor('inputValidation.infoBackground', { dark: '#063B49', light: '#D6ECF2', hc: Color.black }, nls.localize('inputValidationInfoBackground', "Input validation background color for information severity."));
export const inputValidationInfoForeground = registerColor('inputValidation.infoForeground', { dark: null, light: null, hc: null }, nls.localize('inputValidationInfoForeground', "Input validation foreground color for information severity."));
export const inputValidationInfoBorder = registerColor('inputValidation.infoBorder', { dark: '#007acc', light: '#007acc', hc: contrastBorder }, nls.localize('inputValidationInfoBorder', "Input validation border color for information severity."));
export const inputValidationWarningBackground = registerColor('inputValidation.warningBackground', { dark: '#352A05', light: '#F6F5D2', hc: Color.black }, nls.localize('inputValidationWarningBackground', "Input validation background color for warning severity."));
export const inputValidationWarningForeground = registerColor('inputValidation.warningForeground', { dark: null, light: null, hc: null }, nls.localize('inputValidationWarningForeground', "Input validation foreground color for warning severity."));
export const inputValidationWarningBorder = registerColor('inputValidation.warningBorder', { dark: '#B89500', light: '#B89500', hc: contrastBorder }, nls.localize('inputValidationWarningBorder', "Input validation border color for warning severity."));
export const inputValidationErrorBackground = registerColor('inputValidation.errorBackground', { dark: '#5A1D1D', light: '#F2DEDE', hc: Color.black }, nls.localize('inputValidationErrorBackground', "Input validation background color for error severity."));
export const inputValidationErrorForeground = registerColor('inputValidation.errorForeground', { dark: null, light: null, hc: null }, nls.localize('inputValidationErrorForeground', "Input validation foreground color for error severity."));
export const inputValidationErrorBorder = registerColor('inputValidation.errorBorder', { dark: '#BE1100', light: '#BE1100', hc: contrastBorder }, nls.localize('inputValidationErrorBorder', "Input validation border color for error severity."));

export const selectBackground = registerColor('dropdown.background', { dark: '#3C3C3C', light: Color.white, hc: Color.black }, nls.localize('dropdownBackground', "Dropdown background."));
Expand Down
Loading