From 1c8e805d30da7f5866df9e66e2ac09572f1dfa7e Mon Sep 17 00:00:00 2001 From: Miguel Solorio Date: Mon, 15 Jun 2020 14:02:14 -0700 Subject: [PATCH 1/2] Add 'secondaryButtonStyle' option to Button class --- src/vs/base/browser/ui/button/button.ts | 35 ++++++++++++++++++++++--- src/vs/platform/theme/common/styler.ts | 8 +++++- 2 files changed, 38 insertions(+), 5 deletions(-) diff --git a/src/vs/base/browser/ui/button/button.ts b/src/vs/base/browser/ui/button/button.ts index bfadf3dbe83..4ffec6a9d10 100644 --- a/src/vs/base/browser/ui/button/button.ts +++ b/src/vs/base/browser/ui/button/button.ts @@ -18,12 +18,16 @@ import { escape } from 'vs/base/common/strings'; export interface IButtonOptions extends IButtonStyles { readonly title?: boolean | string; readonly supportCodicons?: boolean; + readonly secondaryButtonStyle?: boolean; } export interface IButtonStyles { buttonBackground?: Color; buttonHoverBackground?: Color; buttonForeground?: Color; + buttonSecondaryBackground?: Color; + buttonSecondaryHoverBackground?: Color; + buttonSecondaryForeground?: Color; buttonBorder?: Color; } @@ -41,6 +45,9 @@ export class Button extends Disposable { private buttonBackground: Color | undefined; private buttonHoverBackground: Color | undefined; private buttonForeground: Color | undefined; + private buttonSecondaryBackground: Color | undefined; + private buttonSecondaryHoverBackground: Color | undefined; + private buttonSecondaryForeground: Color | undefined; private buttonBorder: Color | undefined; private _onDidClick = this._register(new Emitter()); @@ -54,9 +61,14 @@ export class Button extends Disposable { this.options = options || Object.create(null); mixin(this.options, defaultOptions, false); + this.buttonForeground = this.options.buttonForeground; this.buttonBackground = this.options.buttonBackground; this.buttonHoverBackground = this.options.buttonHoverBackground; - this.buttonForeground = this.options.buttonForeground; + + this.buttonSecondaryForeground = this.options.buttonSecondaryForeground; + this.buttonSecondaryBackground = this.options.buttonSecondaryBackground; + this.buttonSecondaryHoverBackground = this.options.buttonSecondaryHoverBackground; + this.buttonBorder = this.options.buttonBorder; this._element = document.createElement('a'); @@ -114,7 +126,12 @@ export class Button extends Disposable { } private setHoverBackground(): void { - const hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null; + let hoverBackground; + if (this.options.secondaryButtonStyle) { + hoverBackground = this.buttonSecondaryHoverBackground ? this.buttonSecondaryHoverBackground.toString() : null; + } else { + hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null; + } if (hoverBackground) { this._element.style.backgroundColor = hoverBackground; } @@ -124,6 +141,9 @@ export class Button extends Disposable { this.buttonForeground = styles.buttonForeground; this.buttonBackground = styles.buttonBackground; this.buttonHoverBackground = styles.buttonHoverBackground; + this.buttonSecondaryForeground = styles.buttonSecondaryForeground; + this.buttonSecondaryBackground = styles.buttonSecondaryBackground; + this.buttonSecondaryHoverBackground = styles.buttonSecondaryHoverBackground; this.buttonBorder = styles.buttonBorder; this.applyStyles(); @@ -131,8 +151,15 @@ export class Button extends Disposable { private applyStyles(): void { if (this._element) { - const background = this.buttonBackground ? this.buttonBackground.toString() : ''; - const foreground = this.buttonForeground ? this.buttonForeground.toString() : ''; + let background, foreground; + if (this.options.secondaryButtonStyle) { + foreground = this.buttonSecondaryForeground ? this.buttonSecondaryForeground.toString() : ''; + background = this.buttonSecondaryBackground ? this.buttonSecondaryBackground.toString() : ''; + } else { + foreground = this.buttonForeground ? this.buttonForeground.toString() : ''; + background = this.buttonBackground ? this.buttonBackground.toString() : ''; + } + const border = this.buttonBorder ? this.buttonBorder.toString() : ''; this._element.style.color = foreground; diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index 414eccc95c9..c8317017afe 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService'; -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'; +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'; import { IDisposable } from 'vs/base/common/lifecycle'; import { Color } from 'vs/base/common/color'; import { IThemable, styleFn } from 'vs/base/common/styler'; @@ -262,6 +262,9 @@ export interface IButtonStyleOverrides extends IStyleOverrides { buttonForeground?: ColorIdentifier; buttonBackground?: ColorIdentifier; buttonHoverBackground?: ColorIdentifier; + buttonSecondaryForeground?: ColorIdentifier; + buttonSecondaryBackground?: ColorIdentifier; + buttonSecondaryHoverBackground?: ColorIdentifier; } export function attachButtonStyler(widget: IThemable, themeService: IThemeService, style?: IButtonStyleOverrides): IDisposable { @@ -269,6 +272,9 @@ export function attachButtonStyler(widget: IThemable, themeService: IThemeServic buttonForeground: (style && style.buttonForeground) || buttonForeground, buttonBackground: (style && style.buttonBackground) || buttonBackground, buttonHoverBackground: (style && style.buttonHoverBackground) || buttonHoverBackground, + buttonSecondaryForeground: (style && style.buttonSecondaryForeground) || buttonSecondaryForeground, + buttonSecondaryBackground: (style && style.buttonSecondaryBackground) || buttonSecondaryBackground, + buttonSecondaryHoverBackground: (style && style.buttonSecondaryHoverBackground) || buttonSecondaryHoverBackground, buttonBorder: contrastBorder } as IButtonStyleOverrides, widget); } From a15c81ce1109cfe2605a472399667c58f036e34a Mon Sep 17 00:00:00 2001 From: Miguel Solorio Date: Tue, 16 Jun 2020 08:56:55 -0700 Subject: [PATCH 2/2] Rename 'secondaryButtonStyle' => 'secondary' --- src/vs/base/browser/ui/button/button.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/vs/base/browser/ui/button/button.ts b/src/vs/base/browser/ui/button/button.ts index 4ffec6a9d10..592586c718c 100644 --- a/src/vs/base/browser/ui/button/button.ts +++ b/src/vs/base/browser/ui/button/button.ts @@ -18,7 +18,7 @@ import { escape } from 'vs/base/common/strings'; export interface IButtonOptions extends IButtonStyles { readonly title?: boolean | string; readonly supportCodicons?: boolean; - readonly secondaryButtonStyle?: boolean; + readonly secondary?: boolean; } export interface IButtonStyles { @@ -127,7 +127,7 @@ export class Button extends Disposable { private setHoverBackground(): void { let hoverBackground; - if (this.options.secondaryButtonStyle) { + if (this.options.secondary) { hoverBackground = this.buttonSecondaryHoverBackground ? this.buttonSecondaryHoverBackground.toString() : null; } else { hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null; @@ -152,7 +152,7 @@ export class Button extends Disposable { private applyStyles(): void { if (this._element) { let background, foreground; - if (this.options.secondaryButtonStyle) { + if (this.options.secondary) { foreground = this.buttonSecondaryForeground ? this.buttonSecondaryForeground.toString() : ''; background = this.buttonSecondaryBackground ? this.buttonSecondaryBackground.toString() : ''; } else {