Skip to content

Commit c109f9a

Browse files
author
Miguel Solorio
committed
Use background color for input toggle active state
1 parent 0a8ca63 commit c109f9a

8 files changed

Lines changed: 49 additions & 17 deletions

File tree

‎src/vs/base/browser/ui/checkbox/checkbox.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,12 @@ export interface ICheckboxOpts extends ICheckboxStyles {
2222

2323
export interface ICheckboxStyles {
2424
inputActiveOptionBorder?: Color;
25+
inputActiveOptionBackground?: Color;
2526
}
2627

2728
const defaultOpts = {
28-
inputActiveOptionBorder: Color.fromHex('#007ACC')
29+
inputActiveOptionBorder: Color.fromHex('#007ACC00'),
30+
inputActiveOptionBackground: Color.fromHex('#0E639C50')
2931
};
3032

3133
export class CheckboxActionViewItem extends BaseActionViewItem {
@@ -149,12 +151,16 @@ export class Checkbox extends Widget {
149151
if (styles.inputActiveOptionBorder) {
150152
this._opts.inputActiveOptionBorder = styles.inputActiveOptionBorder;
151153
}
154+
if (styles.inputActiveOptionBackground) {
155+
this._opts.inputActiveOptionBackground = styles.inputActiveOptionBackground;
156+
}
152157
this.applyStyles();
153158
}
154159

155160
protected applyStyles(): void {
156161
if (this.domNode) {
157162
this.domNode.style.borderColor = this._checked && this._opts.inputActiveOptionBorder ? this._opts.inputActiveOptionBorder.toString() : 'transparent';
163+
this.domNode.style.backgroundColor = this._checked && this._opts.inputActiveOptionBackground ? this._opts.inputActiveOptionBackground.toString() : 'transparent';
158164
}
159165
}
160166

‎src/vs/base/browser/ui/findinput/findInput.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export interface IFindInputOptions extends IFindInputStyles {
3333

3434
export interface IFindInputStyles extends IInputBoxStyles {
3535
inputActiveOptionBorder?: Color;
36+
inputActiveOptionBackground?: Color;
3637
}
3738

3839
const NLS_DEFAULT_LABEL = nls.localize('defaultLabel', "input");
@@ -48,6 +49,7 @@ export class FindInput extends Widget {
4849
private fixFocusOnOptionClickEnabled = true;
4950

5051
private inputActiveOptionBorder?: Color;
52+
private inputActiveOptionBackground?: Color;
5153
private inputBackground?: Color;
5254
private inputForeground?: Color;
5355
private inputBorder?: Color;
@@ -97,6 +99,7 @@ export class FindInput extends Widget {
9799
this.label = options.label || NLS_DEFAULT_LABEL;
98100

99101
this.inputActiveOptionBorder = options.inputActiveOptionBorder;
102+
this.inputActiveOptionBackground = options.inputActiveOptionBackground;
100103
this.inputBackground = options.inputBackground;
101104
this.inputForeground = options.inputForeground;
102105
this.inputBorder = options.inputBorder;
@@ -173,6 +176,7 @@ export class FindInput extends Widget {
173176

174177
public style(styles: IFindInputStyles): void {
175178
this.inputActiveOptionBorder = styles.inputActiveOptionBorder;
179+
this.inputActiveOptionBackground = styles.inputActiveOptionBackground;
176180
this.inputBackground = styles.inputBackground;
177181
this.inputForeground = styles.inputForeground;
178182
this.inputBorder = styles.inputBorder;
@@ -194,6 +198,7 @@ export class FindInput extends Widget {
194198
if (this.domNode) {
195199
const checkBoxStyles: ICheckboxStyles = {
196200
inputActiveOptionBorder: this.inputActiveOptionBorder,
201+
inputActiveOptionBackground: this.inputActiveOptionBackground,
197202
};
198203
this.regex.style(checkBoxStyles);
199204
this.wholeWords.style(checkBoxStyles);
@@ -294,7 +299,8 @@ export class FindInput extends Widget {
294299
this.regex = this._register(new RegexCheckbox({
295300
appendTitle: appendRegexLabel,
296301
isChecked: false,
297-
inputActiveOptionBorder: this.inputActiveOptionBorder
302+
inputActiveOptionBorder: this.inputActiveOptionBorder,
303+
inputActiveOptionBackground: this.inputActiveOptionBackground
298304
}));
299305
this._register(this.regex.onChange(viaKeyboard => {
300306
this._onDidOptionChange.fire(viaKeyboard);
@@ -310,7 +316,8 @@ export class FindInput extends Widget {
310316
this.wholeWords = this._register(new WholeWordsCheckbox({
311317
appendTitle: appendWholeWordsLabel,
312318
isChecked: false,
313-
inputActiveOptionBorder: this.inputActiveOptionBorder
319+
inputActiveOptionBorder: this.inputActiveOptionBorder,
320+
inputActiveOptionBackground: this.inputActiveOptionBackground
314321
}));
315322
this._register(this.wholeWords.onChange(viaKeyboard => {
316323
this._onDidOptionChange.fire(viaKeyboard);
@@ -323,7 +330,8 @@ export class FindInput extends Widget {
323330
this.caseSensitive = this._register(new CaseSensitiveCheckbox({
324331
appendTitle: appendCaseSensitiveLabel,
325332
isChecked: false,
326-
inputActiveOptionBorder: this.inputActiveOptionBorder
333+
inputActiveOptionBorder: this.inputActiveOptionBorder,
334+
inputActiveOptionBackground: this.inputActiveOptionBackground
327335
}));
328336
this._register(this.caseSensitive.onChange(viaKeyboard => {
329337
this._onDidOptionChange.fire(viaKeyboard);

‎src/vs/base/browser/ui/findinput/findInputCheckboxes.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export interface IFindInputCheckboxOpts {
1212
readonly appendTitle: string;
1313
readonly isChecked: boolean;
1414
readonly inputActiveOptionBorder?: Color;
15+
readonly inputActiveOptionBackground?: Color;
1516
}
1617

1718
const NLS_CASE_SENSITIVE_CHECKBOX_LABEL = nls.localize('caseDescription', "Match Case");
@@ -24,7 +25,8 @@ export class CaseSensitiveCheckbox extends Checkbox {
2425
actionClassName: 'monaco-case-sensitive',
2526
title: NLS_CASE_SENSITIVE_CHECKBOX_LABEL + opts.appendTitle,
2627
isChecked: opts.isChecked,
27-
inputActiveOptionBorder: opts.inputActiveOptionBorder
28+
inputActiveOptionBorder: opts.inputActiveOptionBorder,
29+
inputActiveOptionBackground: opts.inputActiveOptionBackground
2830
});
2931
}
3032
}
@@ -35,7 +37,8 @@ export class WholeWordsCheckbox extends Checkbox {
3537
actionClassName: 'monaco-whole-word',
3638
title: NLS_WHOLE_WORD_CHECKBOX_LABEL + opts.appendTitle,
3739
isChecked: opts.isChecked,
38-
inputActiveOptionBorder: opts.inputActiveOptionBorder
40+
inputActiveOptionBorder: opts.inputActiveOptionBorder,
41+
inputActiveOptionBackground: opts.inputActiveOptionBackground
3942
});
4043
}
4144
}
@@ -46,7 +49,8 @@ export class RegexCheckbox extends Checkbox {
4649
actionClassName: 'monaco-regex',
4750
title: NLS_REGEX_CHECKBOX_LABEL + opts.appendTitle,
4851
isChecked: opts.isChecked,
49-
inputActiveOptionBorder: opts.inputActiveOptionBorder
52+
inputActiveOptionBorder: opts.inputActiveOptionBorder,
53+
inputActiveOptionBackground: opts.inputActiveOptionBackground
5054
});
5155
}
5256
}

‎src/vs/editor/contrib/find/findOptionsWidget.ts‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition, OverlayWidgetPosit
1111
import { FIND_IDS } from 'vs/editor/contrib/find/findModel';
1212
import { FindReplaceState } from 'vs/editor/contrib/find/findState';
1313
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
14-
import { contrastBorder, editorWidgetBackground, inputActiveOptionBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
14+
import { contrastBorder, editorWidgetBackground, inputActiveOptionBorder, inputActiveOptionBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
1515
import { ITheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
1616

1717
export class FindOptionsWidget extends Widget implements IOverlayWidget {
@@ -47,11 +47,13 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
4747
this._domNode.setAttribute('aria-hidden', 'true');
4848

4949
const inputActiveOptionBorderColor = themeService.getTheme().getColor(inputActiveOptionBorder);
50+
const inputActiveOptionBackgroundColor = themeService.getTheme().getColor(inputActiveOptionBackground);
5051

5152
this.caseSensitive = this._register(new CaseSensitiveCheckbox({
5253
appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleCaseSensitiveCommand),
5354
isChecked: this._state.matchCase,
54-
inputActiveOptionBorder: inputActiveOptionBorderColor
55+
inputActiveOptionBorder: inputActiveOptionBorderColor,
56+
inputActiveOptionBackground: inputActiveOptionBackgroundColor
5557
}));
5658
this._domNode.appendChild(this.caseSensitive.domNode);
5759
this._register(this.caseSensitive.onChange(() => {
@@ -63,7 +65,8 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
6365
this.wholeWords = this._register(new WholeWordsCheckbox({
6466
appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleWholeWordCommand),
6567
isChecked: this._state.wholeWord,
66-
inputActiveOptionBorder: inputActiveOptionBorderColor
68+
inputActiveOptionBorder: inputActiveOptionBorderColor,
69+
inputActiveOptionBackground: inputActiveOptionBackgroundColor
6770
}));
6871
this._domNode.appendChild(this.wholeWords.domNode);
6972
this._register(this.wholeWords.onChange(() => {
@@ -75,7 +78,8 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
7578
this.regex = this._register(new RegexCheckbox({
7679
appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleRegexCommand),
7780
isChecked: this._state.isRegex,
78-
inputActiveOptionBorder: inputActiveOptionBorderColor
81+
inputActiveOptionBorder: inputActiveOptionBorderColor,
82+
inputActiveOptionBackground: inputActiveOptionBackgroundColor
7983
}));
8084
this._domNode.appendChild(this.regex.domNode);
8185
this._register(this.regex.onChange(() => {
@@ -179,7 +183,10 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
179183
}
180184

181185
private _applyTheme(theme: ITheme) {
182-
let inputStyles = { inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder) };
186+
let inputStyles = {
187+
inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder),
188+
inputActiveOptionBackground: theme.getColor(inputActiveOptionBackground)
189+
};
183190
this.caseSensitive.style(inputStyles);
184191
this.wholeWords.style(inputStyles);
185192
this.regex.style(inputStyles);

‎src/vs/editor/contrib/find/findWidget.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { CONTEXT_FIND_INPUT_FOCUSED, CONTEXT_REPLACE_INPUT_FOCUSED, FIND_IDS, MA
2727
import { FindReplaceState, FindReplaceStateChangedEvent } from 'vs/editor/contrib/find/findState';
2828
import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
2929
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
30-
import { contrastBorder, editorFindMatch, editorFindMatchBorder, editorFindMatchHighlight, editorFindMatchHighlightBorder, editorFindRangeHighlight, editorFindRangeHighlightBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetResizeBorder, errorForeground, inputActiveOptionBorder, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow, editorWidgetForeground } from 'vs/platform/theme/common/colorRegistry';
30+
import { contrastBorder, editorFindMatch, editorFindMatchBorder, editorFindMatchHighlight, editorFindMatchHighlightBorder, editorFindRangeHighlight, editorFindRangeHighlightBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetResizeBorder, errorForeground, inputActiveOptionBorder, inputActiveOptionBackground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow, editorWidgetForeground } from 'vs/platform/theme/common/colorRegistry';
3131
import { ITheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
3232
import { ContextScopedFindInput, ContextScopedHistoryInputBox } from 'vs/platform/browser/contextScopedHistoryWidget';
3333
import { AccessibilitySupport } from 'vs/platform/accessibility/common/accessibility';
@@ -560,6 +560,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
560560
private _applyTheme(theme: ITheme) {
561561
let inputStyles: IFindInputStyles = {
562562
inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder),
563+
inputActiveOptionBackground: theme.getColor(inputActiveOptionBackground),
563564
inputBackground: theme.getColor(inputBackground),
564565
inputForeground: theme.getColor(inputForeground),
565566
inputBorder: theme.getColor(inputBorder),

‎src/vs/editor/contrib/find/simpleFindWidget.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { IMessage as InputBoxMessage } from 'vs/base/browser/ui/inputbox/inputBo
1515
import { SimpleButton } from 'vs/editor/contrib/find/findWidget';
1616
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
1717
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
18-
import { editorWidgetBackground, inputActiveOptionBorder, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
18+
import { editorWidgetBackground, inputActiveOptionBorder, inputActiveOptionBackground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
1919
import { ITheme, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
2020
import { ContextScopedFindInput } from 'vs/platform/browser/contextScopedHistoryWidget';
2121

@@ -180,6 +180,7 @@ export abstract class SimpleFindWidget extends Widget {
180180
public updateTheme(theme: ITheme): void {
181181
const inputStyles: IFindInputStyles = {
182182
inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder),
183+
inputActiveOptionBackground: theme.getColor(inputActiveOptionBackground),
183184
inputBackground: theme.getColor(inputBackground),
184185
inputForeground: theme.getColor(inputForeground),
185186
inputBorder: theme.getColor(inputBorder),

‎src/vs/platform/theme/common/colorRegistry.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,8 @@ export const widgetShadow = registerColor('widget.shadow', { dark: '#000000', li
203203
export const inputBackground = registerColor('input.background', { dark: '#3C3C3C', light: Color.white, hc: Color.black }, nls.localize('inputBoxBackground', "Input box background."));
204204
export const inputForeground = registerColor('input.foreground', { dark: foreground, light: foreground, hc: foreground }, nls.localize('inputBoxForeground', "Input box foreground."));
205205
export const inputBorder = registerColor('input.border', { dark: null, light: null, hc: contrastBorder }, nls.localize('inputBoxBorder', "Input box border."));
206-
export const inputActiveOptionBorder = registerColor('inputOption.activeBorder', { dark: '#007ACC', light: '#007ACC', hc: activeContrastBorder }, nls.localize('inputBoxActiveOptionBorder', "Border color of activated options in input fields."));
206+
export const inputActiveOptionBorder = registerColor('inputOption.activeBorder', { dark: '#007ACC00', light: '#007ACC00', hc: '#007ACC00' }, nls.localize('inputBoxActiveOptionBorder', "Border color of activated options in input fields."));
207+
export const inputActiveOptionBackground = registerColor('inputOption.activeBackground', { dark: transparent(focusBorder, 0.5), light: transparent(focusBorder, 0.3), hc: activeContrastBorder }, nls.localize('inputOption.activeBackground', "Background color of activated options in input fields."));
207208
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."));
208209

209210
export const inputValidationInfoBackground = registerColor('inputValidation.infoBackground', { dark: '#063B49', light: '#D6ECF2', hc: Color.black }, nls.localize('inputValidationInfoBackground', "Input validation background color for information severity."));

0 commit comments

Comments
 (0)