Skip to content

Commit 1c8e805

Browse files
author
Miguel Solorio
committed
Add 'secondaryButtonStyle' option to Button class
1 parent f9c6fa3 commit 1c8e805

2 files changed

Lines changed: 38 additions & 5 deletions

File tree

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

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,16 @@ import { escape } from 'vs/base/common/strings';
1818
export interface IButtonOptions extends IButtonStyles {
1919
readonly title?: boolean | string;
2020
readonly supportCodicons?: boolean;
21+
readonly secondaryButtonStyle?: boolean;
2122
}
2223

2324
export interface IButtonStyles {
2425
buttonBackground?: Color;
2526
buttonHoverBackground?: Color;
2627
buttonForeground?: Color;
28+
buttonSecondaryBackground?: Color;
29+
buttonSecondaryHoverBackground?: Color;
30+
buttonSecondaryForeground?: Color;
2731
buttonBorder?: Color;
2832
}
2933

@@ -41,6 +45,9 @@ export class Button extends Disposable {
4145
private buttonBackground: Color | undefined;
4246
private buttonHoverBackground: Color | undefined;
4347
private buttonForeground: Color | undefined;
48+
private buttonSecondaryBackground: Color | undefined;
49+
private buttonSecondaryHoverBackground: Color | undefined;
50+
private buttonSecondaryForeground: Color | undefined;
4451
private buttonBorder: Color | undefined;
4552

4653
private _onDidClick = this._register(new Emitter<Event>());
@@ -54,9 +61,14 @@ export class Button extends Disposable {
5461
this.options = options || Object.create(null);
5562
mixin(this.options, defaultOptions, false);
5663

64+
this.buttonForeground = this.options.buttonForeground;
5765
this.buttonBackground = this.options.buttonBackground;
5866
this.buttonHoverBackground = this.options.buttonHoverBackground;
59-
this.buttonForeground = this.options.buttonForeground;
67+
68+
this.buttonSecondaryForeground = this.options.buttonSecondaryForeground;
69+
this.buttonSecondaryBackground = this.options.buttonSecondaryBackground;
70+
this.buttonSecondaryHoverBackground = this.options.buttonSecondaryHoverBackground;
71+
6072
this.buttonBorder = this.options.buttonBorder;
6173

6274
this._element = document.createElement('a');
@@ -114,7 +126,12 @@ export class Button extends Disposable {
114126
}
115127

116128
private setHoverBackground(): void {
117-
const hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null;
129+
let hoverBackground;
130+
if (this.options.secondaryButtonStyle) {
131+
hoverBackground = this.buttonSecondaryHoverBackground ? this.buttonSecondaryHoverBackground.toString() : null;
132+
} else {
133+
hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null;
134+
}
118135
if (hoverBackground) {
119136
this._element.style.backgroundColor = hoverBackground;
120137
}
@@ -124,15 +141,25 @@ export class Button extends Disposable {
124141
this.buttonForeground = styles.buttonForeground;
125142
this.buttonBackground = styles.buttonBackground;
126143
this.buttonHoverBackground = styles.buttonHoverBackground;
144+
this.buttonSecondaryForeground = styles.buttonSecondaryForeground;
145+
this.buttonSecondaryBackground = styles.buttonSecondaryBackground;
146+
this.buttonSecondaryHoverBackground = styles.buttonSecondaryHoverBackground;
127147
this.buttonBorder = styles.buttonBorder;
128148

129149
this.applyStyles();
130150
}
131151

132152
private applyStyles(): void {
133153
if (this._element) {
134-
const background = this.buttonBackground ? this.buttonBackground.toString() : '';
135-
const foreground = this.buttonForeground ? this.buttonForeground.toString() : '';
154+
let background, foreground;
155+
if (this.options.secondaryButtonStyle) {
156+
foreground = this.buttonSecondaryForeground ? this.buttonSecondaryForeground.toString() : '';
157+
background = this.buttonSecondaryBackground ? this.buttonSecondaryBackground.toString() : '';
158+
} else {
159+
foreground = this.buttonForeground ? this.buttonForeground.toString() : '';
160+
background = this.buttonBackground ? this.buttonBackground.toString() : '';
161+
}
162+
136163
const border = this.buttonBorder ? this.buttonBorder.toString() : '';
137164

138165
this._element.style.color = foreground;

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';
7-
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground, darken, listFilterWidgetOutline, listFilterWidgetNoMatchesOutline, listFilterWidgetBackground, editorWidgetBackground, treeIndentGuidesStroke, editorWidgetForeground, simpleCheckboxBackground, simpleCheckboxBorder, simpleCheckboxForeground, ColorValue, resolveColorValue, textLinkForeground, problemsWarningIconForeground, problemsErrorIconForeground, problemsInfoIconForeground } from 'vs/platform/theme/common/colorRegistry';
7+
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground, darken, listFilterWidgetOutline, listFilterWidgetNoMatchesOutline, listFilterWidgetBackground, editorWidgetBackground, treeIndentGuidesStroke, editorWidgetForeground, simpleCheckboxBackground, simpleCheckboxBorder, simpleCheckboxForeground, ColorValue, resolveColorValue, textLinkForeground, problemsWarningIconForeground, problemsErrorIconForeground, problemsInfoIconForeground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground } from 'vs/platform/theme/common/colorRegistry';
88
import { IDisposable } from 'vs/base/common/lifecycle';
99
import { Color } from 'vs/base/common/color';
1010
import { IThemable, styleFn } from 'vs/base/common/styler';
@@ -262,13 +262,19 @@ export interface IButtonStyleOverrides extends IStyleOverrides {
262262
buttonForeground?: ColorIdentifier;
263263
buttonBackground?: ColorIdentifier;
264264
buttonHoverBackground?: ColorIdentifier;
265+
buttonSecondaryForeground?: ColorIdentifier;
266+
buttonSecondaryBackground?: ColorIdentifier;
267+
buttonSecondaryHoverBackground?: ColorIdentifier;
265268
}
266269

267270
export function attachButtonStyler(widget: IThemable, themeService: IThemeService, style?: IButtonStyleOverrides): IDisposable {
268271
return attachStyler(themeService, {
269272
buttonForeground: (style && style.buttonForeground) || buttonForeground,
270273
buttonBackground: (style && style.buttonBackground) || buttonBackground,
271274
buttonHoverBackground: (style && style.buttonHoverBackground) || buttonHoverBackground,
275+
buttonSecondaryForeground: (style && style.buttonSecondaryForeground) || buttonSecondaryForeground,
276+
buttonSecondaryBackground: (style && style.buttonSecondaryBackground) || buttonSecondaryBackground,
277+
buttonSecondaryHoverBackground: (style && style.buttonSecondaryHoverBackground) || buttonSecondaryHoverBackground,
272278
buttonBorder: contrastBorder
273279
} as IButtonStyleOverrides, widget);
274280
}

0 commit comments

Comments
 (0)