Add css styles options to all components (#2454)

* add css styling in all components

* formatting

* formatting

* small typo

* small typo

* use builder to add style instead

src/sql/parts/connection/connectionDialog/connectionWidget.ts

@@ -193,7 +193,6 @@ export class ConnectionWidget {
 			},
 			ariaLabel: userNameOption.displayName
 		});
-
 		// Password
 		let passwordOption = this._optionsMaps[ConnectionOptionSpecialType.password];
 		let passwordBuilder = DialogHelper.appendRow(this._tableContainer, passwordOption.displayName, 'connection-label', 'connection-input');

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

@@ -42,9 +42,10 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
 	@ViewChild('fileInput', { read: ElementRef }) private _fileInputContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef
 	) {
-		super(changeRef);
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./card';
 
-import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
 	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList,
 } from '@angular/core';
 
@@ -29,10 +30,10 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
 	private backgroundColor: string;
 
 	constructor( @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
 	) {
-		super(changeRef);
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -29,8 +29,9 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
 	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
-		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		super(changeRef);
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

src/sql/parts/modelComponents/componentBase.ts

@@ -19,6 +19,7 @@ import { Event, Emitter } from 'vs/base/common/event';
 import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
 import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
 import URI from 'vs/base/common/uri';
+import { Builder } from 'vs/base/browser/builder';
 import { IdGenerator } from 'vs/base/common/idGenerator';
 import { createCSSRule, removeCSSRulesContainingSelector } from 'vs/base/browser/dom';
 import * as nls from 'vs/nls';
@@ -35,8 +36,11 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 	private _valid: boolean = true;
 	protected _validations: (() => boolean | Thenable<boolean>)[] = [];
 	private _eventQueue: IComponentEventArgs[] = [];
+	private _CSSStyles: { [key: string]: string } = {};
+
 	constructor(
-		protected _changeRef: ChangeDetectorRef) {
+		protected _changeRef: ChangeDetectorRef,
+		protected _el: ElementRef) {
 		super();
 	}
 
@@ -80,11 +84,20 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 	public refreshDataProvider(item: any): void {
 	}
 
+	public updateStyles() {
+		let element = new Builder(this._el.nativeElement);
+		this._CSSStyles = this.CSSStyles;
+		element.style(this._CSSStyles);
+	}
+
 	public setProperties(properties: { [key: string]: any; }): void {
 		if (!properties) {
 			this.properties = {};
 		}
 		this.properties = properties;
+		if (this.CSSStyles !== this._CSSStyles) {
+			this.updateStyles();
+		}
 		this.layout();
 		this.validate();
 	}
@@ -140,11 +153,19 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 	}
 
 	public get position(): string {
-		return this.getPropertyOrDefault<sqlops.EditorProperties, string>((props) => props.position, '');
+		return this.getPropertyOrDefault<sqlops.ComponentProperties, string>((props) => props.position, '');
 	}
 
 	public set position(newValue: string) {
-		this.setPropertyFromUI<sqlops.EditorProperties, string>((properties, position) => { properties.position = position; }, newValue);
+		this.setPropertyFromUI<sqlops.ComponentProperties, string>((properties, position) => { properties.position = position; }, newValue);
+	}
+
+	public get CSSStyles(): { [key: string]: string } {
+		return this.getPropertyOrDefault<sqlops.ComponentProperties, { [key: string]: string }>((props) => props.CSSStyles, {});
+	}
+
+	public set CSSStyles(newValue: { [key: string]: string }) {
+		this.setPropertyFromUI<sqlops.ComponentProperties, { [key: string]: string }>((properties, CSSStyles) => { properties.CSSStyles = CSSStyles; }, newValue);
 	}
 
 	public convertSizeToNumber(size: number | string): number {
@@ -223,9 +244,10 @@ export abstract class ContainerBase<T> extends ComponentBase {
 
 	@ViewChildren(ModelComponentWrapper) protected _componentWrappers: QueryList<ModelComponentWrapper>;
 	constructor(
-		_changeRef: ChangeDetectorRef
+		_changeRef: ChangeDetectorRef,
+		_el: ElementRef
 	) {
-		super(_changeRef);
+		super(_changeRef, _el);
 		this.items = [];
 		this._validations.push(() => this.items.every(item => {
 			return this.modelStore.getComponent(item.descriptor.id).valid;

src/sql/parts/modelComponents/componentWithIconBase.ts

@@ -27,8 +27,9 @@ export abstract class ComponentWithIconBase extends ComponentBase {
 	protected _iconClass: string;
 	protected _iconPath: IUserFriendlyIcon;
 	constructor(
-		changeRef: ChangeDetectorRef) {
+		changeRef: ChangeDetectorRef,
-		super(changeRef);
+		el: ElementRef, ) {
+		super(changeRef, el);
 	}
 
 	/// IComponent implementation

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

@@ -64,9 +64,10 @@ export default class DeclarativeTableComponent extends ComponentBase implements
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
-		@Inject(IContextViewService) private contextViewService: IContextViewService
+		@Inject(IContextViewService) private contextViewService: IContextViewService,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef
 	) {
-		super(changeRef);
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -41,9 +41,10 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
-		@Inject(IContextViewService) private contextViewService: IContextViewService
+		@Inject(IContextViewService) private contextViewService: IContextViewService,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef
 	) {
-		super(changeRef);
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -41,12 +41,12 @@ export default class EditorComponent extends ComponentBase implements IComponent
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
 		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
 		@Inject(IModelService) private _modelService: IModelService,
 		@Inject(IModeService) private _modeService: IModeService
 	) {
-		super(changeRef);
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {
@@ -129,7 +129,6 @@ export default class EditorComponent extends ComponentBase implements IComponent
 	}
 
 	/// IComponent implementation
-
 	public setLayout(layout: any): void {
 		// TODO allow configuring the look and feel
 		this.layout();

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

@@ -34,8 +34,9 @@ export default class FileBrowserTreeComponent extends ComponentBase implements I
 	@ViewChild('fileBrowserTree', { read: ElementRef }) private _treeContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(IInstantiationService) private _instantiationService: IInstantiationService) {
+		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
-		super(changeRef);
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -45,8 +45,11 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 	private _width: string;
 	private _position: string;
 
-	constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+	constructor(
-		super(changeRef);
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef
+	) {
+		super(changeRef, el);
 		this._flexFlow = '';	// default
 		this._justifyContent = '';	// default
 	}

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

@@ -106,8 +106,9 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
-		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		super(changeRef);
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -45,8 +45,9 @@ export default class GroupContainer extends ContainerBase<GroupLayout> implement
 
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
-		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		super(changeRef);
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -42,9 +42,10 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
-		@Inject(IContextViewService) private contextViewService: IContextViewService
+		@Inject(IContextViewService) private contextViewService: IContextViewService,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef
 	) {
-		super(changeRef);
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -37,9 +37,10 @@ export default class ListBoxComponent extends ComponentBase implements IComponen
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService,
-		@Inject(IClipboardService) private clipboardService: IClipboardService
+		@Inject(IClipboardService) private clipboardService: IClipboardService,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
 	) {
-		super(changeRef);
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -35,8 +35,9 @@ export default class LoadingComponent extends ComponentBase implements IComponen
 	@ViewChild('childElement', { read: ElementRef }) private _childElement: ElementRef;
 
 	constructor(
-		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		super(changeRef);
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		super(changeRef, el);
 		this._validations.push(() => {
 			if (!this._component) {
 				return true;

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

@@ -33,8 +33,9 @@ export default class RadioButtonComponent extends ComponentBase implements IComp
 	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
-		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		super(changeRef);
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -35,8 +35,9 @@ export default class TableComponent extends ComponentBase implements IComponent,
 	@ViewChild('table', { read: ElementRef }) private _inputContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService) {
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
-		super(changeRef);
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -6,7 +6,7 @@
 import 'vs/css!./radioButton';
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef,
-	OnDestroy, AfterViewInit
+	OnDestroy, AfterViewInit, ElementRef
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
@@ -26,8 +26,9 @@ export default class TextComponent extends ComponentBase implements IComponent,
 
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
-		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		super(changeRef);
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -52,8 +52,9 @@ export default class ToolbarContainer extends ContainerBase<ToolbarItemConfig> i
 
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
-		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		super(changeRef);
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		super(changeRef, el);
 		this._orientation = Orientation.Horizontal;
 	}
 

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

@@ -55,8 +55,10 @@ export default class TreeComponent extends ComponentBase implements IComponent,
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService,
-		@Inject(IInstantiationService) private _instantiationService: IInstantiationService) {
+		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
-		super(changeRef);
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef
+	) {
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

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

@@ -53,7 +53,7 @@ export default class WebViewComponent extends ComponentBase implements IComponen
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
 		@Inject(IPartService) private partService: IPartService,
 		@Inject(IThemeService) private themeService: IThemeService,
 		@Inject(IEnvironmentService) private environmentService: IEnvironmentService,
@@ -63,7 +63,7 @@ export default class WebViewComponent extends ComponentBase implements IComponen
 		@Inject(IInstantiationService) private instantiationService: IInstantiationService,
 		@Inject(IContextKeyService) contextKeyService: IContextKeyService
 	) {
-		super(changeRef);
+		super(changeRef, el);
 	}
 
 	ngOnInit(): void {

src/sql/sqlops.proposed.d.ts

@@ -147,6 +147,15 @@ declare module 'sqlops' {
 		 */
 		updateProperties(properties: { [key: string]: any }): Thenable<void>;
 
+		/**
+		 * Sends an updated property of the component to the UI
+		 *
+		 * @returns {Thenable<void>} Thenable that completes once the update
+		 * has been applied in the UI
+		 * @memberof Component
+		 */
+		updateProperty(key: string, value: any): Thenable<void>;
+
 		enabled: boolean;
 		/**
 		 * Event fired to notify that the component's validity has changed
@@ -312,7 +321,7 @@ declare module 'sqlops' {
 		/**
 		 * Matches the CSS style key and its available values.
 		 */
-		CSSStyles?: { [key: string]: string }
+		CSSStyles?: { [key: string]: string };
 	}
 
 	export interface FormItemLayout {
@@ -427,6 +436,10 @@ declare module 'sqlops' {
 		 * Without this the component will fail to correctly size itself
 		 */
 		position?: string;
+		/**
+		 * Matches the CSS style key and its available values.
+		 */
+		CSSStyles?: { [key: string]: string };
 	}
 
 	export interface ComponentWithIcon {

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

@@ -560,6 +560,10 @@ class ComponentWrapper implements sqlops.Component {
 		return this.notifyPropertyChanged();
 	}
 
+	public updateProperty(key: string, value: any): Thenable<void> {
+		return this.setProperty(key, value);
+	}
+
 	protected notifyPropertyChanged(): Thenable<void> {
 		return this._proxy.$setProperties(this._handle, this._id, this.properties);
 	}

src/sqltest/parts/modelComponents/componentBase.test.ts

@@ -16,7 +16,7 @@ class TestComponent extends ComponentBase {
 	public descriptor: IComponentDescriptor;
 
 	constructor(public modelStore: IModelStore, id: string) {
-		super(undefined);
+		super(undefined, undefined);
 		this.descriptor = modelStore.createComponentDescriptor('TestComponent', id);
 		this.baseInit();
 	}
@@ -33,7 +33,7 @@ class TestContainer extends ContainerBase<TestComponent> {
 	public descriptor: IComponentDescriptor;
 
 	constructor(public modelStore: IModelStore, id: string) {
-		super(undefined);
+		super(undefined, undefined);
 		this.descriptor = modelStore.createComponentDescriptor('TestContainer', id);
 		this._changeRef = {
 			detectChanges: () => undefined