new component - infobox (#14027)

* new component: infobox

* comments

* new option

* add comments

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

@@ -0,0 +1,119 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'vs/css!./media/infoBox';
+import { Disposable } from 'vs/base/common/lifecycle';
+import { alert, status } from 'vs/base/browser/ui/aria/aria';
+import { IThemable } from 'vs/base/common/styler';
+import { Color } from 'vs/base/common/color';
+
+export interface IInfoBoxStyles {
+	informationBackground?: Color;
+	warningBackground?: Color;
+	errorBackground?: Color;
+	successBackground?: Color;
+}
+
+export type InfoBoxStyle = 'information' | 'warning' | 'error' | 'success';
+
+export interface InfoBoxOptions {
+	text: string;
+	style: InfoBoxStyle;
+	announceText?: boolean;
+}
+
+export class InfoBox extends Disposable implements IThemable {
+	private _imageElement: HTMLDivElement;
+	private _textElement: HTMLDivElement;
+	private _infoBoxElement: HTMLDivElement;
+	private _text = '';
+	private _infoBoxStyle: InfoBoxStyle = 'information';
+	private _styles: IInfoBoxStyles;
+	private _announceText: boolean = false;
+
+	constructor(container: HTMLElement, options?: InfoBoxOptions) {
+		super();
+		this._infoBoxElement = document.createElement('div');
+		this._imageElement = document.createElement('div');
+		this._imageElement.setAttribute('role', 'image');
+		this._textElement = document.createElement('div');
+		this._textElement.classList.add('infobox-text');
+		container.appendChild(this._infoBoxElement);
+		this._infoBoxElement.appendChild(this._imageElement);
+		this._infoBoxElement.appendChild(this._textElement);
+		if (options) {
+			this.infoBoxStyle = options.style;
+			this.text = options.text;
+			this._announceText = (options.announceText === true);
+		}
+	}
+
+	public style(styles: IInfoBoxStyles): void {
+		this._styles = styles;
+		this.updateStyle();
+	}
+
+	public get announceText(): boolean {
+		return this._announceText;
+	}
+
+	public set announceText(v: boolean) {
+		this._announceText = v;
+	}
+
+	public get infoBoxStyle(): InfoBoxStyle {
+		return this._infoBoxStyle;
+	}
+
+	public set infoBoxStyle(style: InfoBoxStyle) {
+		this._infoBoxStyle = style;
+		this._infoBoxElement.classList.remove(...this._infoBoxElement.classList);
+		this._imageElement.classList.remove(...this._imageElement.classList);
+		this._imageElement.setAttribute('aria-label', style);
+		this._infoBoxElement.classList.add('infobox-container', style);
+		this._imageElement.classList.add('infobox-image', style);
+		this.updateStyle();
+	}
+
+	public get text(): string {
+		return this._text;
+	}
+
+	public set text(text: string) {
+		if (this._text !== text) {
+			this._text = text;
+			this._textElement.innerText = text;
+			if (this.announceText) {
+				if (this.infoBoxStyle === 'warning' || this.infoBoxStyle === 'error') {
+					alert(text);
+				}
+				else {
+					status(text);
+				}
+			}
+		}
+	}
+
+	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();
+		}
+	}
+}

src/sql/base/browser/ui/infoBox/media/infoBox.css

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.infobox-container {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 100%;
+	overflow: scroll;
+}
+
+.infobox-image {
+	padding: 10px;
+	width: 16px;
+	height: 16px;
+	background-size: 16px;
+	background-position: 10px 10px;
+	background-repeat: no-repeat;
+	flex: 0 0 auto;
+}
+
+.infobox-image.success {
+	background-image: url('status_success.svg');
+}
+
+.infobox-image.information {
+	background-image: url('status_info.svg');
+}
+
+.infobox-image.warning {
+	background-image: url('status_warning.svg');
+}
+
+.infobox-image.error {
+	background-image: url('status_error.svg');
+}
+
+.infobox-text {
+	flex: 1 1 auto;
+	padding: 10px 0;
+	user-select: text;
+}

src/sql/base/browser/ui/infoBox/media/status_error.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#d02e00;}.cls-2{fill:#fff;}</style></defs><title>error_16x16</title><circle class="cls-1" cx="8.07" cy="8.07" r="7.93"/><polygon class="cls-2" points="8.82 8.07 11.53 10.78 10.83 11.48 8.12 8.78 5.41 11.48 4.7 10.78 7.42 8.07 4.65 5.31 5.36 4.61 8.12 7.37 10.83 4.67 11.53 5.36 8.82 8.07"/></svg>

src/sql/base/browser/ui/infoBox/media/status_info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#F6F6F6;} .icon-vs-blue{fill:#015cda;} .icon-white{fill:#FFFFFF;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M0 8c0-4.418 3.582-8 8-8s8 3.582 8 8-3.582 8-8 8-8-3.582-8-8z" id="outline"/><path class="icon-vs-blue" d="M8 1c-3.865 0-7 3.135-7 7s3.135 7 7 7 7-3.135 7-7-3.135-7-7-7zm1 12h-2v-7h2v7zm0-8h-2v-2h2v2z" id="iconBg"/><path class="icon-white" d="M7 6h2v7h-2v-7zm0-1h2v-2h-2v2z" id="iconFg"/></svg>

src/sql/base/browser/ui/infoBox/media/status_success.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#3bb44a;}.cls-4{clip-path:url(#clip-path-2);}.cls-5{fill:#fff;}</style><clipPath id="clip-path"><path class="cls-1" d="M16,8a7.92,7.92,0,0,1-1.09,4A8.15,8.15,0,0,1,12,14.91a8,8,0,0,1-8.07,0A8.15,8.15,0,0,1,1.09,12,8,8,0,0,1,1.09,4,8.15,8.15,0,0,1,4,1.09a8,8,0,0,1,8.07,0A8.15,8.15,0,0,1,14.91,4,7.92,7.92,0,0,1,16,8Z"/></clipPath><clipPath id="clip-path-2"><polygon class="cls-1" points="10.9 4.9 11.6 5.6 6.5 10.71 3.65 7.85 4.35 7.15 6.5 9.29 10.9 4.9"/></clipPath></defs><title>success_complete</title><g class="cls-2"><rect class="cls-3" x="-5" y="-5" width="26" height="26"/></g><g class="cls-4"><rect class="cls-5" x="-1.35" y="-0.1" width="17.95" height="15.81"/></g></svg>

src/sql/base/browser/ui/infoBox/media/status_warning.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#DB7500;}.cls-2{fill:#FFFFFF;}</style></defs><title>warning_16x16</title><polygon class="cls-1" points="8.05 0.15 16 16 -0.12 16 8.05 0.15"/><rect class="cls-2" x="7.31" y="7.34" width="1.59" height="3.97"/><rect class="cls-2" x="7.31" y="12.1" width="1.59" height="1.59"/></svg>