implement styler for infobutton (#14396)

* implement styler for infobutton

* comments

* one more comment

src/sql/base/browser/ui/infoButton/infoButton.css

@@ -37,37 +37,9 @@
 }
 
 .info-button {
-	background-color: #fff;
 	border-radius: 2px;
-	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.13);
 	display: inline-block;
-}
+	background-image: none;
-.info-button[tabindex="0"]:active {
+	border-width: 1px;
-	background-color: #fff;
+	border-style: solid;
-	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.13);
-}
-.vs-dark .info-button {
-	background-color: #1b1a19;
-	box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.13);
-}
-.vs-dark .info-button[tabindex="0"]:active {
-	background-color: #1b1a19;
-	box-shadow: 0px 3px 8px rgba(255, 255, 255, 0.13);
-}
-.hc-black .info-button {
-	background-color: #000;
-	box-shadow: none;
-}
-.hc-black .info-button[tabindex="0"]:active {
-	background-color: #000;
-}
-.info-button:hover {
-	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.13);
-}
-.vs-dark .info-button:hover {
-	box-shadow: 0px 3px 8px rgba(255, 255, 255, 0.13);
-}
-.hc-black .info-button[tabindex="0"]:hover {
-	border-style: dashed !important;
-	border-color: rgb(243, 133, 24) !important;
 }

src/sql/base/browser/ui/infoButton/infoButton.ts

@@ -5,7 +5,7 @@
 
 import 'vs/css!./infoButton';
 import { Button as sqlButton } from 'sql/base/browser/ui/button/button';
-import { IButtonOptions } from 'vs/base/browser/ui/button/button';
+import { IButtonOptions, IButtonStyles } from 'vs/base/browser/ui/button/button';
 
 export interface IInfoButtonOptions extends IButtonOptions {
 	buttonMaxHeight: number,
@@ -34,6 +34,8 @@ export class InfoButton extends sqlButton {
 	private _iconWidth?: number;
 	private _title?: string;
 
+	private _styles: IButtonStyles;
+
 	constructor(container: HTMLElement, options?: IInfoButtonOptions) {
 		super(container, options);
 		this._container = container;
@@ -149,4 +151,19 @@ export class InfoButton extends sqlButton {
 		this.iconClass = options.iconClass;
 		this.title = options.title;
 	}
+
+	style(styles: IButtonStyles): void {
+		this._styles = styles;
+		this.applyStyles();
+	}
+
+	applyStyles(): void {
+		this.element.style.backgroundColor = this._styles?.buttonBackground?.toString();
+		this.element.style.color = this._styles?.buttonForeground?.toString();
+		this.element.style.borderColor = this._styles?.buttonBorder?.toString();
+	}
+
+	setHoverBackground(): void {
+		this.element.style.backgroundColor = this._styles?.buttonHoverBackground?.toString();
+	}
 }

src/sql/platform/theme/common/colorRegistry.ts

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { registerColor } from 'vs/platform/theme/common/colorRegistry';
+import { contrastBorder, registerColor } from 'vs/platform/theme/common/colorRegistry';
 import { Color, RGBA } from 'vs/base/common/color';
 import * as nls from 'vs/nls';
 
@@ -67,8 +67,13 @@ export const notebookFindMatchHighlight = registerColor('notebook.findMatchHighl
 export const notebookFindRangeHighlight = registerColor('notebook.findRangeHighlightBackground', { dark: '#FFA500', light: '#FFA500', hc: null }, nls.localize('notebookFindRangeHighlight', "Color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations."), true);
 
 // Info Box
-export const InfoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hc: '#000000' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information."));
+export const infoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hc: '#000000' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information."));
-export const InfoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hc: '#000000' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning."));
+export const infoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hc: '#000000' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning."));
-export const InfoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hc: '#000000' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error."));
+export const infoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hc: '#000000' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error."));
-export const InfoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hc: '#000000' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success."));
+export const infoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hc: '#000000' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success."));
 
+// Info Button
+export const infoButtonForeground = registerColor('infoButton.foreground', { dark: '#FFFFFF', light: '#000000', hc: '#FFFFFF' }, nls.localize('infoButton.foreground', "Info button foreground color."));
+export const infoButtonBackground = registerColor('infoButton.background', { dark: '#1B1A19', light: '#FFFFFF', hc: '#000000' }, nls.localize('infoButton.background', "Info button background color."));
+export const infoButtonBorder = registerColor('infoButton.border', { dark: '#1B1A19', light: '#FFFFFF', hc: contrastBorder }, nls.localize('infoButton.border', "Info button border color."));
+export const infoButtonHoverBackground = registerColor('infoButton.hoverBackground', { dark: '#282625', light: '#F3F2F1', hc: '#000000' }, nls.localize('infoButton.hoverBackground', "Info button hover background color."));

src/sql/platform/theme/common/styler.ts

@@ -299,12 +299,30 @@ export interface IInfoBoxStyleOverrides {
 }
 
 export const defaultInfoBoxStyles: IInfoBoxStyleOverrides = {
-	informationBackground: sqlcr.InfoBoxInformationBackground,
+	informationBackground: sqlcr.infoBoxInformationBackground,
-	warningBackground: sqlcr.InfoBoxWarningBackground,
+	warningBackground: sqlcr.infoBoxWarningBackground,
-	errorBackground: sqlcr.InfoBoxErrorBackground,
+	errorBackground: sqlcr.infoBoxErrorBackground,
-	successBackground: sqlcr.InfoBoxSuccessBackground
+	successBackground: sqlcr.infoBoxSuccessBackground
 };
 
 export function attachInfoBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInfoBoxStyleOverrides): IDisposable {
 	return attachStyler(themeService, { ...defaultInfoBoxStyles, ...style }, widget);
 }
+
+export interface IInfoButtonStyleOverrides {
+	buttonBackground: cr.ColorIdentifier,
+	buttonForeground: cr.ColorIdentifier,
+	buttonBorder: cr.ColorIdentifier,
+	buttonHoverBackground: cr.ColorIdentifier
+}
+
+export const defaultInfoButtonStyles: IInfoButtonStyleOverrides = {
+	buttonBackground: sqlcr.infoButtonBackground,
+	buttonForeground: sqlcr.infoButtonForeground,
+	buttonBorder: sqlcr.infoButtonBorder,
+	buttonHoverBackground: sqlcr.infoButtonHoverBackground
+};
+
+export function attachInfoButtonStyler(widget: IThemable, themeService: IThemeService, style?: IInfoButtonStyleOverrides): IDisposable {
+	return attachStyler(themeService, { ...defaultInfoButtonStyles, ...style }, widget);
+}

src/sql/workbench/browser/modelComponents/button.component.ts

@@ -3,24 +3,26 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./media/button';
-import {
+import { ChangeDetectorRef, Component, ElementRef, forwardRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
-	Component, Input, Inject, ChangeDetectorRef, forwardRef,
-	ViewChild, ElementRef, OnDestroy
-} from '@angular/core';
-
 import * as azdata from 'azdata';
 
-import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
+import { convertSize } from 'sql/base/browser/dom';
-
-import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { InfoButton } from 'sql/base/browser/ui/infoButton/infoButton';
-import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
+import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
-import { convertSize } from 'sql/base/browser/dom';
+import { attachInfoButtonStyler } from 'sql/platform/theme/common/styler';
+import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
 import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
-import { ILogService } from 'vs/platform/log/common/log';
 import { IDisposable } from 'vs/base/common/lifecycle';
+import { ILogService } from 'vs/platform/log/common/log';
 import { attachButtonStyler } from 'vs/platform/theme/common/styler';
+import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
+
+enum ButtonType {
+	File = 'File',
+	Normal = 'Normal',
+	Informational = 'Informational'
+}
 
 @Component({
 	selector: 'modelview-button',
@@ -43,7 +45,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 	@Input() modelStore: IModelStore;
 	private _button: Button | InfoButton;
 	public fileType: string = '.sql';
-	private _currentButtonType?: azdata.ButtonType = undefined;
+	private _currentButtonType?: ButtonType = undefined;
 	private _buttonStyler: IDisposable | undefined = undefined;
 
 	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
@@ -191,8 +193,12 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 	 */
 	private updateStyler(): void {
 		this._buttonStyler?.dispose();
+		if (this.buttonType === ButtonType.Informational) {
+			this._buttonStyler = this._register(attachInfoButtonStyler(this._button, this.themeService));
+		} else {
 			this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService));
 		}
+	}
 
 	protected get defaultIconHeight(): number {
 		return 15;
@@ -212,11 +218,11 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 		this.setPropertyFromUI<string>(this.setValueProperties, newValue);
 	}
 
-	public get buttonType(): azdata.ButtonType {
+	public get buttonType(): ButtonType {
 		if (this.isFile === true) {
-			return 'File' as azdata.ButtonType;
+			return ButtonType.File;
 		} else {
-			return this.getPropertyOrDefault((props) => props.buttonType, 'Normal' as azdata.ButtonType);
+			return this.getPropertyOrDefault((props) => props.buttonType, ButtonType.Normal);
 		}
 	}
 

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

@@ -156,7 +156,7 @@ export class Button extends Disposable implements IButton {
 		this.applyStyles();
 	}
 
-	private setHoverBackground(): void {
+	protected setHoverBackground(): void { // {{SQL CARBON EDIT}} - mark as protected
 		// {{SQL CARBON EDIT}} - skip if this is an icon button
 		if (this.hasIcon) {
 			return;