From 699aba4bc6fe49a012121c0700b040e9092372da Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Wed, 28 Jun 2023 13:13:41 -0700 Subject: [PATCH] infobox style (#23518) * listbox * select box * fix tests * one more test * infobox style --- .../platform/theme/browser/defaultStyles.ts | 8 ++++ src/sql/platform/theme/common/styler.ts | 25 ---------- .../modelComponents/infoBox.component.ts | 7 +-- .../workbench/browser/ui/infoBox/infoBox.ts | 48 ++++++++----------- .../browser/executionPlanFileView.ts | 3 +- 5 files changed, 32 insertions(+), 59 deletions(-) diff --git a/src/sql/platform/theme/browser/defaultStyles.ts b/src/sql/platform/theme/browser/defaultStyles.ts index 1365f5c8d6..bca10e5441 100644 --- a/src/sql/platform/theme/browser/defaultStyles.ts +++ b/src/sql/platform/theme/browser/defaultStyles.ts @@ -10,6 +10,7 @@ import { ISelectBoxStyles } from 'sql/base/browser/ui/selectBox/selectBox'; import { ITableFilterStyles } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin'; import * as sqlcr from 'sql/platform/theme/common/colorRegistry'; import { disabledCheckboxForeground } from 'sql/platform/theme/common/colors'; +import { IInfoBoxStyles } from 'sql/workbench/browser/ui/infoBox/infoBox'; import { IButtonStyles } from 'vs/base/browser/ui/button/button'; import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, defaultSelectBoxStyles as vsDefaultSelectBoxStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles'; import * as cr from 'vs/platform/theme/common/colorRegistry'; @@ -77,3 +78,10 @@ export const defaultSelectBoxStyles: ISelectBoxStyles = { inputValidationErrorBackground: cr.asCssVariable(cr.inputValidationErrorBackground), ...vsDefaultSelectBoxStyles } + +export const defaultInfoBoxStyles: IInfoBoxStyles = { + informationBackground: cr.asCssVariable(sqlcr.infoBoxInformationBackground), + warningBackground: cr.asCssVariable(sqlcr.infoBoxWarningBackground), + errorBackground: cr.asCssVariable(sqlcr.infoBoxErrorBackground), + successBackground: cr.asCssVariable(sqlcr.infoBoxSuccessBackground) +}; diff --git a/src/sql/platform/theme/common/styler.ts b/src/sql/platform/theme/common/styler.ts index bea5cb6d89..12de5cca86 100644 --- a/src/sql/platform/theme/common/styler.ts +++ b/src/sql/platform/theme/common/styler.ts @@ -57,31 +57,6 @@ export function attachTableStyler(widget: IThemable, themeService: IThemeService return attachStyler(themeService, { ...defaultTableStyles, ...(style || {}) }, widget); } -export interface IInfoBoxStyleOverrides { - informationBackground: cr.ColorIdentifier, - warningBackground: cr.ColorIdentifier, - errorBackground: cr.ColorIdentifier, - successBackground: cr.ColorIdentifier -} - -export const defaultInfoBoxStyles: IInfoBoxStyleOverrides = { - 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 function attachDesignerStyler(widget: any, themeService: IThemeService): IDisposable { function applyStyles(): void { const colorTheme = themeService.getColorTheme(); diff --git a/src/sql/workbench/browser/modelComponents/infoBox.component.ts b/src/sql/workbench/browser/modelComponents/infoBox.component.ts index b60eedeb86..afcdd43262 100644 --- a/src/sql/workbench/browser/modelComponents/infoBox.component.ts +++ b/src/sql/workbench/browser/modelComponents/infoBox.component.ts @@ -11,10 +11,9 @@ import * as azdata from 'azdata'; import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces'; import { ILogService } from 'vs/platform/log/common/log'; import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase'; -import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; -import { attachInfoBoxStyler } from 'sql/platform/theme/common/styler'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { InfoBox, InfoBoxStyle } from 'sql/workbench/browser/ui/infoBox/infoBox'; +import { defaultInfoBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; @Component({ selector: 'modelview-infobox', @@ -32,7 +31,6 @@ export default class InfoBoxComponent extends ComponentBase ChangeDetectorRef)) changeRef: ChangeDetectorRef, @Inject(forwardRef(() => ElementRef)) el: ElementRef, - @Inject(IWorkbenchThemeService) private _themeService: IWorkbenchThemeService, @Inject(IInstantiationService) private _instantiationService: IInstantiationService, @Inject(ILogService) logService: ILogService) { super(changeRef, el, logService); @@ -41,8 +39,7 @@ export default class InfoBoxComponent extends ComponentBase { this.fireEvent({ eventType: ComponentEventType.onDidClick, diff --git a/src/sql/workbench/browser/ui/infoBox/infoBox.ts b/src/sql/workbench/browser/ui/infoBox/infoBox.ts index 95b866db68..fe6f11584c 100644 --- a/src/sql/workbench/browser/ui/infoBox/infoBox.ts +++ b/src/sql/workbench/browser/ui/infoBox/infoBox.ts @@ -7,7 +7,6 @@ import 'vs/css!./media/infoBox'; import * as azdata from 'azdata'; import { Disposable, DisposableStore } from 'vs/base/common/lifecycle'; import { alert, status } from 'vs/base/browser/ui/aria/aria'; -import { Color } from 'vs/base/common/color'; import * as DOM from 'vs/base/browser/dom'; import { Event, Emitter } from 'vs/base/common/event'; import { Codicon } from 'vs/base/common/codicons'; @@ -18,10 +17,10 @@ import { ILogService } from 'vs/platform/log/common/log'; import { ThemeIcon } from 'vs/base/common/themables'; export interface IInfoBoxStyles { - informationBackground?: Color; - warningBackground?: Color; - errorBackground?: Color; - successBackground?: Color; + informationBackground: string | undefined; + warningBackground: string | undefined; + errorBackground: string | undefined; + successBackground: string | undefined; } export type InfoBoxStyle = 'information' | 'warning' | 'error' | 'success'; @@ -43,7 +42,6 @@ export class InfoBox extends Disposable { private _text = ''; private _links: azdata.LinkArea[] = []; private _infoBoxStyle: InfoBoxStyle = 'information'; - private _styles: IInfoBoxStyles; private _announceText: boolean = false; private _isClickable: boolean = false; private _clickableButtonAriaLabel: string; @@ -58,6 +56,7 @@ export class InfoBox extends Disposable { constructor( container: HTMLElement, + private readonly _styles: IInfoBoxStyles, options: InfoBoxOptions | undefined, @IOpenerService private _openerService: IOpenerService, @ILogService private _logService: ILogService @@ -86,11 +85,6 @@ export class InfoBox extends Disposable { this.updateClickableState(); } - public style(styles: IInfoBoxStyles): void { - this._styles = styles; - this.updateStyle(); - } - public get announceText(): boolean { return this._announceText; } @@ -265,24 +259,22 @@ export class InfoBox extends Disposable { } private updateStyle(): void { - if (this._styles) { - let backgroundColor: Color; - switch (this.infoBoxStyle) { - case 'error': - backgroundColor = this._styles.errorBackground; - break; - case 'warning': - backgroundColor = this._styles.warningBackground; - break; - case 'success': - backgroundColor = this._styles.successBackground; - break; - default: - backgroundColor = this._styles.informationBackground; - break; - } - this._infoBoxElement.style.backgroundColor = backgroundColor.toString(); + let backgroundColor: string | undefined; + switch (this.infoBoxStyle) { + case 'error': + backgroundColor = this._styles.errorBackground; + break; + case 'warning': + backgroundColor = this._styles.warningBackground; + break; + case 'success': + backgroundColor = this._styles.successBackground; + break; + default: + backgroundColor = this._styles.informationBackground; + break; } + this._infoBoxElement.style.backgroundColor = backgroundColor; } private updateClickableState(): void { diff --git a/src/sql/workbench/contrib/executionPlan/browser/executionPlanFileView.ts b/src/sql/workbench/contrib/executionPlan/browser/executionPlanFileView.ts index c575294be8..0f2ff80743 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/executionPlanFileView.ts +++ b/src/sql/workbench/contrib/executionPlan/browser/executionPlanFileView.ts @@ -15,6 +15,7 @@ import { contrastBorder, editorWidgetBackground, foreground, listHoverBackground import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; import { QueryResultsView } from 'sql/workbench/contrib/query/browser/queryResultsView'; import { Disposable } from 'vs/base/common/lifecycle'; +import { defaultInfoBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; export class ExecutionPlanFileView extends Disposable { private _parent: HTMLElement; @@ -94,7 +95,7 @@ export class ExecutionPlanFileView extends Disposable { this._loadingSpinner.loadingCompletedMessage = localize('executionPlanFileLoadingComplete', "Execution plans are generated"); } catch (e) { - this._loadingErrorInfoBox = this._register(this.instantiationService.createInstance(InfoBox, this._container, { + this._loadingErrorInfoBox = this._register(this.instantiationService.createInstance(InfoBox, this._container, defaultInfoBoxStyles, { text: e.toString(), style: 'error', isClickable: false