diff --git a/src/sql/base/browser/ui/infoButton/infoButton.css b/src/sql/base/browser/ui/infoButton/infoButton.css index a47ed12d62..e6866291ac 100644 --- a/src/sql/base/browser/ui/infoButton/infoButton.css +++ b/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; -} -.info-button[tabindex="0"]:active { - background-color: #fff; - 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; + background-image: none; + border-width: 1px; + border-style: solid; } diff --git a/src/sql/base/browser/ui/infoButton/infoButton.ts b/src/sql/base/browser/ui/infoButton/infoButton.ts index eebdd771df..12cd6d5717 100644 --- a/src/sql/base/browser/ui/infoButton/infoButton.ts +++ b/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(); + } } diff --git a/src/sql/platform/theme/common/colorRegistry.ts b/src/sql/platform/theme/common/colorRegistry.ts index 6e9c252ea6..8982b61a64 100644 --- a/src/sql/platform/theme/common/colorRegistry.ts +++ b/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 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 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 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 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.")); +// 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.")); diff --git a/src/sql/platform/theme/common/styler.ts b/src/sql/platform/theme/common/styler.ts index c28c858677..c3c3f16dc4 100644 --- a/src/sql/platform/theme/common/styler.ts +++ b/src/sql/platform/theme/common/styler.ts @@ -299,12 +299,30 @@ export interface IInfoBoxStyleOverrides { } export const defaultInfoBoxStyles: IInfoBoxStyleOverrides = { - informationBackground: sqlcr.InfoBoxInformationBackground, - warningBackground: sqlcr.InfoBoxWarningBackground, - errorBackground: sqlcr.InfoBoxErrorBackground, - successBackground: sqlcr.InfoBoxSuccessBackground + informationBackground: sqlcr.infoBoxInformationBackground, + warningBackground: sqlcr.infoBoxWarningBackground, + errorBackground: sqlcr.infoBoxErrorBackground, + 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); +} diff --git a/src/sql/workbench/browser/modelComponents/button.component.ts b/src/sql/workbench/browser/modelComponents/button.component.ts index 76fde4e926..f8962ebeeb 100644 --- a/src/sql/workbench/browser/modelComponents/button.component.ts +++ b/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 { - Component, Input, Inject, ChangeDetectorRef, forwardRef, - ViewChild, ElementRef, OnDestroy -} from '@angular/core'; - +import { ChangeDetectorRef, Component, ElementRef, forwardRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core'; import * as azdata from 'azdata'; -import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase'; - -import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; +import { convertSize } from 'sql/base/browser/dom'; 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 { convertSize } from 'sql/base/browser/dom'; +import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces'; +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(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); } } diff --git a/src/vs/base/browser/ui/button/button.ts b/src/vs/base/browser/ui/button/button.ts index 48e825f319..3848b8b5c4 100644 --- a/src/vs/base/browser/ui/button/button.ts +++ b/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;