Support icon for button.component (#1565)

* support icon button

* formatting

* fix dropdown css and set attribute for model view editor

samples/sqlservices/src/controllers/mainController.ts

@@ -266,10 +266,23 @@ export default class MainController implements vscode.Disposable {
 					values: ['aa', 'bb', 'cc']
 				})
 				.component();
-			let button = view.modelBuilder.button()
+			let runIcon = path.join(__dirname, '..', 'media', 'start.svg');
+			let runButton = view.modelBuilder.button()
 				.withProperties({
-					label: 'Run'
+					label: 'Run',
+					iconPath: runIcon
 				}).component();
+
+			let monitoLightPath = vscode.Uri.file(path.join(__dirname, '..', 'media', 'monitor.svg'));
+			let monitorIcon = {
+				light: monitoLightPath,
+				dark: path.join(__dirname, '..', 'media', 'monitor_inverse.svg') };
+
+			let monitorButton = view.modelBuilder.button()
+					.withProperties({
+						label: 'Monitor',
+						iconPath: monitorIcon
+					}).component();
 			let toolbarModel = view.modelBuilder.toolbarContainer()
 				.withToolbarItems([{
 					component: inputBox,
@@ -278,7 +291,9 @@ export default class MainController implements vscode.Disposable {
 					component: dropdown,
 					title: 'favorite:'
 				}, {
-					component: button
+					component: runButton
+				}, {
+					component: monitorButton
 				}]).component();
 
 

samples/sqlservices/src/media/monitor.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>usage</title><path d="M7,7H0A6.88,6.88,0,0,1,.25,5.14,7,7,0,0,1,5.14.25,6.92,6.92,0,0,1,7,0ZM6.75,8,1.88,12.87a6.91,6.91,0,0,1-1.4-2.26A7.33,7.33,0,0,1,0,8ZM6,1.08a6,6,0,0,0-1.77.6A6,6,0,0,0,1.68,4.23,6,6,0,0,0,1.08,6H6ZM1.08,9a6.63,6.63,0,0,0,.32,1.23A5.58,5.58,0,0,0,2,11.37L4.34,9ZM8,1l.89,0a8.52,8.52,0,0,1,.86.09,8.14,8.14,0,0,1,.84.18,6.66,6.66,0,0,1,.84.29,7.51,7.51,0,0,1,4.25,4.73,7.58,7.58,0,0,1,.06,4.18A7.51,7.51,0,0,1,15,12.29,7.49,7.49,0,0,1,12.29,15a7.5,7.5,0,0,1-1.79.75,7.63,7.63,0,0,1-4.87-.3A7.53,7.53,0,0,1,3.2,13.8l-.35-.35L8,8.29Zm.5,14a6.31,6.31,0,0,0,1.73-.23,6.66,6.66,0,0,0,1.55-.66,6.5,6.5,0,0,0,2.33-2.33,6.64,6.64,0,0,0,.66-1.55,6.47,6.47,0,0,0,0-3.36,6.69,6.69,0,0,0-.59-1.49,6.45,6.45,0,0,0-.93-1.29,6.63,6.63,0,0,0-1.21-1,6.49,6.49,0,0,0-1.44-.71A6.32,6.32,0,0,0,9,2v6.7L4.27,13.44a6.39,6.39,0,0,0,2,1.16A6.47,6.47,0,0,0,8.5,15Z"/></svg>

samples/sqlservices/src/media/monitor_inverse.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:#fff;}</style></defs><title>usage_inverse</title><path class="cls-1" d="M7,7H0A6.88,6.88,0,0,1,.25,5.14,7,7,0,0,1,5.14.25,6.92,6.92,0,0,1,7,0ZM6.75,8,1.88,12.87a6.91,6.91,0,0,1-1.4-2.26A7.33,7.33,0,0,1,0,8ZM6,1.08a6,6,0,0,0-1.77.6A6,6,0,0,0,1.68,4.23,6,6,0,0,0,1.08,6H6ZM1.08,9a6.63,6.63,0,0,0,.32,1.23A5.58,5.58,0,0,0,2,11.37L4.34,9ZM8,1l.89,0a8.52,8.52,0,0,1,.86.09,8.14,8.14,0,0,1,.84.18,6.66,6.66,0,0,1,.84.29,7.51,7.51,0,0,1,4.25,4.73,7.58,7.58,0,0,1,.06,4.18A7.51,7.51,0,0,1,15,12.29,7.49,7.49,0,0,1,12.29,15a7.5,7.5,0,0,1-1.79.75,7.63,7.63,0,0,1-4.87-.3A7.53,7.53,0,0,1,3.2,13.8l-.35-.35L8,8.29Zm.5,14a6.31,6.31,0,0,0,1.73-.23,6.66,6.66,0,0,0,1.55-.66,6.5,6.5,0,0,0,2.33-2.33,6.64,6.64,0,0,0,.66-1.55,6.47,6.47,0,0,0,0-3.36,6.69,6.69,0,0,0-.59-1.49,6.45,6.45,0,0,0-.93-1.29,6.63,6.63,0,0,0-1.21-1,6.49,6.49,0,0,0-1.44-.71A6.32,6.32,0,0,0,9,2v6.7L4.27,13.44a6.39,6.39,0,0,0,2,1.16A6.47,6.47,0,0,0,8.5,15Z"/></svg>

samples/sqlservices/src/media/start.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:#3bb44a;}</style></defs><title>run</title><path class="cls-1" d="M3.24,0,14.61,8,3.24,16Zm2,12.07L11.13,8,5.24,3.88Z"/><path class="cls-1" d="M3.74,1l10,7-10,7Zm1,1.92V13.07L12,8Z"/></svg>

src/sql/parts/modelComponents/button.component.ts

@@ -2,14 +2,13 @@
  *  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!./button';
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
 	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
-import { Event, Emitter } from 'vs/base/common/event';
 
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
@@ -19,9 +18,13 @@ import { Button } from 'sql/base/browser/ui/button/button';
 import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { attachListStyler } from 'vs/platform/theme/common/styler';
-
+import URI from 'vs/base/common/uri';
+import { IdGenerator } from 'vs/base/common/idGenerator';
+import { createCSSRule, removeCSSRulesContainingSelector } from 'vs/base/browser/dom';
+import { focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry';
+import { Color } from 'vs/base/common/color';
 @Component({
-	selector: 'button',
+	selector: 'modelview-button',
 	template: `
 		<div #input style="width: 100%"></div>
 	`
@@ -30,6 +33,8 @@ export default class ButtonComponent extends ComponentBase implements IComponent
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
 	private _button: Button;
+	private _iconClass: string;
+	private _iconPath: string | URI | { light: string | URI; dark: string | URI };
 
 	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
 	constructor(
@@ -37,6 +42,7 @@ export default class ButtonComponent extends ComponentBase implements IComponent
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
 	) {
 		super(changeRef);
+
 	}
 
 	ngOnInit(): void {
@@ -64,6 +70,9 @@ export default class ButtonComponent extends ComponentBase implements IComponent
 	}
 
 	ngOnDestroy(): void {
+		if (this._iconClass) {
+			removeCSSRulesContainingSelector(this._iconClass);
+		}
 		this.baseDestroy();
 	}
 
@@ -80,7 +89,58 @@ export default class ButtonComponent extends ComponentBase implements IComponent
 
 	public setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
+		this._button.enabled = this.enabled;
 		this._button.label = this.label;
+		this.updateIcon();
+	}
+
+	private updateIcon() {
+		if (this.iconPath && this.iconPath !== this._iconPath) {
+			this._iconPath = this.iconPath;
+			if (!this._iconClass) {
+				const ids = new IdGenerator('button-component-icon-' + Math.round(Math.random() * 1000));
+				this._iconClass = ids.nextId();
+				this._button.icon = this._iconClass + ' icon';
+
+				// Styling for icon button
+				this._register(attachButtonStyler(this._button, this.themeService, {
+					buttonBackground: Color.transparent.toString(),
+					buttonHoverBackground: Color.transparent.toString(),
+					buttonFocusOutline: focusBorder,
+					buttonForeground: foreground
+				}));
+			}
+
+			removeCSSRulesContainingSelector(this._iconClass);
+			const icon = this.getLightIconPath(this.iconPath);
+			const iconDark = this.getDarkIconPath(this.iconPath) || icon;
+			createCSSRule(`.icon.${this._iconClass}`, `background-image: url("${icon}")`);
+			createCSSRule(`.vs-dark .icon.${this._iconClass}, .hc-black .icon.${this._iconClass}`, `background-image: url("${iconDark}")`);
+		}
+	}
+
+	private getLightIconPath(iconPath: string | URI | { light: string | URI; dark: string | URI }): string {
+		if (iconPath && iconPath['light']) {
+			return this.getIconPath(iconPath['light']);
+		} else {
+			return this.getIconPath(<string | URI>iconPath);
+		}
+	}
+
+	private getDarkIconPath(iconPath: string | URI | { light: string | URI; dark: string | URI }): string {
+		if (iconPath && iconPath['dark']) {
+			return this.getIconPath(iconPath['dark']);
+		}
+		return null;
+	}
+
+	private getIconPath(iconPath: string | URI): string {
+		if (typeof iconPath === 'string') {
+			return URI.file(iconPath).toString();
+		} else {
+			let uri = URI.revive(iconPath);
+			return uri.toString();
+		}
 	}
 
 	// CSS-bound properties
@@ -93,6 +153,14 @@ export default class ButtonComponent extends ComponentBase implements IComponent
 		this.setPropertyFromUI<sqlops.ButtonProperties, string>(this.setValueProperties, newValue);
 	}
 
+	public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {
+		return this.getPropertyOrDefault<sqlops.ButtonProperties, string | URI | { light: string | URI; dark: string | URI }>((props) => props.iconPath, undefined);
+	}
+
+	public set iconPath(newValue: string | URI | { light: string | URI; dark: string | URI }) {
+		this.setPropertyFromUI<sqlops.ButtonProperties, string | URI | { light: string | URI; dark: string | URI }>((properties, iconPath) => { properties.iconPath = iconPath; }, newValue);
+	}
+
 	private setValueProperties(properties: sqlops.ButtonProperties, label: string): void {
 		properties.label = label;
 	}

src/sql/parts/modelComponents/button.css

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+modelview-button a.monaco-button.monaco-text-button.icon {
+	background-repeat: no-repeat;
+	background-position: 0% 50%;
+}

src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts

@@ -21,6 +21,7 @@ export class ModelViewEditor extends BaseEditor {
 	public static ID: string = 'workbench.editor.modelViewEditor';
 
 	private _editorFrame: HTMLElement;
+	private _content: HTMLElement;
 
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
@@ -34,6 +35,8 @@ export class ModelViewEditor extends BaseEditor {
 	 */
 	public createEditor(parent: HTMLElement): void {
 		this._editorFrame = parent;
+		this._content = document.createElement('div');
+		parent.appendChild(this._content);
 	}
 
 	/**
@@ -69,6 +72,7 @@ export class ModelViewEditor extends BaseEditor {
 
 		input.appendModelViewContainer();
 		input.container.style.visibility = 'visible';
+		this._content.setAttribute('aria-flowto', input.container.id);
 
 		await super.setInput(input, options);
 		this.doUpdateContainer();

src/sql/parts/modelComponents/toolbarLayout.css

@@ -30,16 +30,14 @@
 	margin: auto;
 }
 
-.modelview-toolbar-container .modelview-toolbar-component .select-box,
+.modelview-toolbar-container .modelview-toolbar-component select,
 .modelview-toolbar-container .modelview-toolbar-component .monaco-inputbox {
 	width: 200px;
 	height: 25px;
 }
 
-.modelview-toolbar-container .modelview-toolbar-component button {
+.modelview-toolbar-container .modelview-toolbar-component modelview-button .monaco-text-button.icon {
-	height: 25px;
+	padding-left: 15px;
-}
+	background-size: 11px;
-
+	margin-right: 0.3em;
-.modelview-toolbar-container .modelview-toolbar-component button .monaco-text-button {
-	padding: 0px
 }

src/sql/sqlops.proposed.d.ts

@@ -332,6 +332,7 @@ declare module 'sqlops' {
 
 	export interface ButtonProperties {
 		label?: string;
+		iconPath?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri };
 	}
 
 	export interface CardComponent extends Component {
@@ -377,6 +378,7 @@ declare module 'sqlops' {
 
 	export interface ButtonComponent extends Component {
 		label: string;
+		iconPath: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri };
 		onDidClick: vscode.Event<any>;
 	}
 

src/sql/workbench/api/node/extHostModelView.ts

@@ -7,6 +7,8 @@
 import { IMainContext } from 'vs/workbench/api/node/extHost.protocol';
 import { Emitter } from 'vs/base/common/event';
 import { deepClone } from 'vs/base/common/objects';
+import { IActionDescriptor } from 'vs/editor/standalone/browser/standaloneCodeEditor';
+import URI from 'vs/base/common/uri';
 import * as nls from 'vs/nls';
 
 import * as vscode from 'vscode';
@@ -14,7 +16,6 @@ import * as sqlops from 'sqlops';
 
 import { SqlMainContext, ExtHostModelViewShape, MainThreadModelViewShape } from 'sql/workbench/api/node/sqlExtHost.protocol';
 import { IItemConfig, ModelComponentTypes, IComponentShape, IComponentEventArgs, ComponentEventType } from 'sql/workbench/api/common/sqlExtHostTypes';
-import { IActionDescriptor } from 'vs/editor/standalone/browser/standaloneCodeEditor';
 
 class ModelBuilderImpl implements sqlops.ModelBuilder {
 	private nextComponentId: number;
@@ -747,6 +748,13 @@ class ButtonWrapper extends ComponentWrapper implements sqlops.ButtonComponent {
 		this.setProperty('label', v);
 	}
 
+	public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {
+		return this.properties['iconPath'];
+	}
+	public set iconPath(v: string | URI | { light: string | URI; dark: string | URI }) {
+		this.setProperty('iconPath', v);
+	}
+
 	public get onDidClick(): vscode.Event<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
 		return emitter && emitter.event;