diff --git a/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts b/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts index 290d083065..da3dcf2cac 100644 --- a/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts +++ b/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts @@ -68,7 +68,7 @@ export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilde }); } catch (e) { - const errorLoadingRadioOptionsLabel = this._view!.modelBuilder.text().withProps({ value: getErrorMessage(e), CSSStyles: { 'color': 'Red' } }).component(); + const errorLoadingRadioOptionsLabel = this._view!.modelBuilder.text().withProps({ value: getErrorMessage(e), textType: azdata.TextType.Error }).component(); this._optionsDivContainer.addItem(errorLoadingRadioOptionsLabel); } this.component().loading = false; diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index c285acb3ca..9d0dc85894 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/src/sql/azdata.proposed.d.ts @@ -580,12 +580,24 @@ declare module 'azdata' { */ export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; + /** + * The type of text this is - used to determine display color. + */ + export enum TextType { + Normal = 'Normal', + Error = 'Error' + } + export interface TextComponentProperties { /** * The heading level for this component - if set the text component will be created as an h# * HTML element with this value being the #. */ headingLevel?: HeadingLevel; + /** + * The type to display the text as - used to determine the color of the text. Default is Normal. + */ + textType?: TextType; } export namespace nb { diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts index 89287e4663..727736cda8 100644 --- a/src/sql/workbench/api/common/extHostModelView.ts +++ b/src/sql/workbench/api/common/extHostModelView.ts @@ -1377,6 +1377,13 @@ class TextComponentWrapper extends ComponentWrapper implements azdata.TextCompon public set headingLevel(headingLevel: azdata.HeadingLevel | undefined) { this.setProperty('headingLevel', headingLevel); } + + public get textType(): azdata.TextType | undefined { + return this.properties['textType']; + } + public set textType(type: azdata.TextType | undefined) { + this.setProperty('textType', type); + } } class ImageComponentWrapper extends ComponentWithIconWrapper implements azdata.ImageComponentProperties { diff --git a/src/sql/workbench/api/common/sqlExtHost.api.impl.ts b/src/sql/workbench/api/common/sqlExtHost.api.impl.ts index 28c8ab71fa..8dae62fdad 100644 --- a/src/sql/workbench/api/common/sqlExtHost.api.impl.ts +++ b/src/sql/workbench/api/common/sqlExtHost.api.impl.ts @@ -610,7 +610,8 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp ColumnSizingMode: sqlExtHostTypes.ColumnSizingMode, DatabaseEngineEdition: sqlExtHostTypes.DatabaseEngineEdition, TabOrientation: sqlExtHostTypes.TabOrientation, - sqlAssessment + sqlAssessment, + TextType: sqlExtHostTypes.TextType }; } }; diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts index 1bc810c755..7a56f1ba3b 100644 --- a/src/sql/workbench/api/common/sqlExtHostTypes.ts +++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts @@ -887,3 +887,8 @@ export enum ButtonType { Normal = 'Normal', Informational = 'Informational' } + +export enum TextType { + Normal = 'Normal', + Error = 'Error' +} diff --git a/src/sql/workbench/browser/modelComponents/text.component.ts b/src/sql/workbench/browser/modelComponents/text.component.ts index f3a15be186..9676515405 100644 --- a/src/sql/workbench/browser/modelComponents/text.component.ts +++ b/src/sql/workbench/browser/modelComponents/text.component.ts @@ -18,7 +18,15 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import * as DOM from 'vs/base/browser/dom'; import { ILogService } from 'vs/platform/log/common/log'; import { attachLinkStyler } from 'vs/platform/theme/common/styler'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; +import { errorForeground } from 'vs/platform/theme/common/colorRegistry'; + +export enum TextType { + Normal = 'Normal', + Error = 'Error' +} + +const errorTextClass = 'error-text'; @Component({ selector: 'modelview-text', @@ -97,9 +105,22 @@ export default class TextComponent extends TitledComponent((properties, value) => { properties.headingLevel = value; }, newValue); } + public get textType(): azdata.TextType | undefined { + return this.getPropertyOrDefault(props => props.textType, undefined); + } + + public set textType(newValue: azdata.TextType | undefined) { + this.setPropertyFromUI((properties, value) => { properties.textType = value; }, newValue); + } + public override setProperties(properties: { [key: string]: any; }): void { super.setProperties(properties); this.updateText(); + if (this.textType === TextType.Error) { + (this._el.nativeElement as HTMLElement).classList.add(errorTextClass); + } else { + (this._el.nativeElement as HTMLElement).classList.remove(errorTextClass); + } this._changeRef.detectChanges(); } @@ -174,3 +195,14 @@ export default class TextComponent extends TitledComponent { + const errorForegroundColor = theme.getColor(errorForeground); + if (errorForegroundColor) { + collector.addRule(` + modelview-text.${errorTextClass} { + color: ${errorForegroundColor}; + } + `); + } +});