ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-13 17:22:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

infobox style (#23518)

Browse Source 
* listbox

* select box

* fix tests

* one more test

* infobox style
This commit is contained in:
Alan Ren
2023-06-28 13:13:41 -07:00
committed by GitHub
parent 6dc1b9b905
commit 699aba4bc6
5 changed files with 32 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/sql/platform/theme/browser/defaultStyles.ts
View File

@@ -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)
};

25
src/sql/platform/theme/common/styler.ts
View File

@@ -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();

7
src/sql/workbench/browser/modelComponents/infoBox.component.ts
View File

@@ -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<azdata.InfoBoxCompon
constructor(
@Inject(forwardRef(() => 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<azdata.InfoBoxCompon
ngAfterViewInit(): void {
this.baseInit();
if (this._container) {
this._infoBox = this._instantiationService.createInstance(InfoBox, this._container.nativeElement, undefined);
this._register(attachInfoBoxStyler(this._infoBox, this._themeService));
this._infoBox = this._instantiationService.createInstance(InfoBox, this._container.nativeElement, defaultInfoBoxStyles, undefined);
this._infoBox.onDidClick(e => {
this.fireEvent({
eventType: ComponentEventType.onDidClick,

48
src/sql/workbench/browser/ui/infoBox/infoBox.ts
View File

@@ -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 {

3
src/sql/workbench/contrib/executionPlan/browser/executionPlanFileView.ts
View File

@@ -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