From 10f05e75ce4859e3972e2122e9319debcd3e71be Mon Sep 17 00:00:00 2001 From: Abbie Petchtes Date: Fri, 7 Sep 2018 09:08:29 -0700 Subject: [PATCH] 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 --- .../connectionDialog/connectionWidget.ts | 1 - .../parts/modelComponents/button.component.ts | 9 ++--- .../parts/modelComponents/card.component.ts | 17 +++++----- .../modelComponents/checkbox.component.ts | 5 +-- .../parts/modelComponents/componentBase.ts | 34 +++++++++++++++---- .../modelComponents/componentWithIconBase.ts | 5 +-- .../declarativeTable.component.ts | 7 ++-- .../modelComponents/dropdown.component.ts | 5 +-- .../parts/modelComponents/editor.component.ts | 7 ++-- .../fileBrowserTree.component.ts | 7 ++-- .../flexContainer.component.ts | 7 ++-- .../formContainer.component.ts | 5 +-- .../groupContainer.component.ts | 5 +-- .../modelComponents/inputbox.component.ts | 5 +-- .../modelComponents/listbox.component.ts | 5 +-- .../loadingComponent.component.ts | 5 +-- .../modelComponents/radioButton.component.ts | 5 +-- .../parts/modelComponents/table.component.ts | 5 +-- .../parts/modelComponents/text.component.ts | 7 ++-- .../toolbarContainer.component.ts | 5 +-- .../modelComponents/tree/tree.component.ts | 8 +++-- .../modelComponents/webview.component.ts | 6 ++-- src/sql/sqlops.proposed.d.ts | 15 +++++++- .../workbench/api/node/extHostModelView.ts | 6 +++- .../modelComponents/componentBase.test.ts | 4 +-- 25 files changed, 124 insertions(+), 66 deletions(-) diff --git a/src/sql/parts/connection/connectionDialog/connectionWidget.ts b/src/sql/parts/connection/connectionDialog/connectionWidget.ts index 8e71627089..8eb59ec4c5 100644 --- a/src/sql/parts/connection/connectionDialog/connectionWidget.ts +++ b/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'); diff --git a/src/sql/parts/modelComponents/button.component.ts b/src/sql/parts/modelComponents/button.component.ts index 968cf7f5de..d698f39cfb 100644 --- a/src/sql/parts/modelComponents/button.component.ts +++ b/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 { @@ -63,7 +64,7 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC if (this._fileInputContainer) { const self = this; this._fileInputContainer.nativeElement.onchange = () => { - let file = self._fileInputContainer.nativeElement.files[0]; + let file = self._fileInputContainer.nativeElement.files[0]; let reader = new FileReader(); reader.onload = (e) => { let text = (e.target).result; @@ -153,7 +154,7 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC this.setPropertyFromUI(this.setFileContentProperties, newValue); } - private setFileContentProperties(properties: sqlops.ButtonProperties, fileContent: string) : void { + private setFileContentProperties(properties: sqlops.ButtonProperties, fileContent: string): void { properties.fileContent = fileContent; } diff --git a/src/sql/parts/modelComponents/card.component.ts b/src/sql/parts/modelComponents/card.component.ts index bcc5046630..c2c812af6c 100644 --- a/src/sql/parts/modelComponents/card.component.ts +++ b/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'; @@ -28,11 +29,11 @@ export default class CardComponent extends ComponentWithIconBase implements ICom private backgroundColor: string; - constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, - @Inject(forwardRef(() => ElementRef)) private _el: ElementRef, - @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService, + constructor( @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, + @Inject(forwardRef(() => ElementRef)) el: ElementRef, + @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService ) { - super(changeRef); + super(changeRef, el); } ngOnInit(): void { @@ -70,7 +71,7 @@ export default class CardComponent extends ComponentWithIconBase implements ICom public getClass(): string { return (this.selectable && this.selected || this._hasFocus) ? 'model-card selected' : - 'model-card unselected'; + 'model-card unselected'; } public onCardHoverChanged(event: any) { @@ -81,7 +82,7 @@ export default class CardComponent extends ComponentWithIconBase implements ICom } /// IComponent implementation - public setLayout (layout: any): void { + public setLayout(layout: any): void { // TODO allow configuring the look and feel this.layout(); } @@ -141,7 +142,7 @@ export default class CardComponent extends ComponentWithIconBase implements ICom public get statusColor(): string { let status = this.getPropertyOrDefault((props) => props.status, StatusIndicator.None); - switch(status) { + switch (status) { case StatusIndicator.Ok: return 'green'; case StatusIndicator.Warning: diff --git a/src/sql/parts/modelComponents/checkbox.component.ts b/src/sql/parts/modelComponents/checkbox.component.ts index 6ae0332c41..d8fe0ca504 100644 --- a/src/sql/parts/modelComponents/checkbox.component.ts +++ b/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) { - super(changeRef); + @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, + @Inject(forwardRef(() => ElementRef)) el: ElementRef) { + super(changeRef, el); } ngOnInit(): void { diff --git a/src/sql/parts/modelComponents/componentBase.ts b/src/sql/parts/modelComponents/componentBase.ts index 621f4cbd1f..76d003da75 100644 --- a/src/sql/parts/modelComponents/componentBase.ts +++ b/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)[] = []; 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((props) => props.position, ''); + return this.getPropertyOrDefault((props) => props.position, ''); } public set position(newValue: string) { - this.setPropertyFromUI((properties, position) => { properties.position = position; }, newValue); + this.setPropertyFromUI((properties, position) => { properties.position = position; }, newValue); + } + + public get CSSStyles(): { [key: string]: string } { + return this.getPropertyOrDefault((props) => props.CSSStyles, {}); + } + + public set CSSStyles(newValue: { [key: string]: string }) { + this.setPropertyFromUI((properties, CSSStyles) => { properties.CSSStyles = CSSStyles; }, newValue); } public convertSizeToNumber(size: number | string): number { @@ -223,9 +244,10 @@ export abstract class ContainerBase extends ComponentBase { @ViewChildren(ModelComponentWrapper) protected _componentWrappers: QueryList; 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; @@ -239,7 +261,7 @@ export abstract class ContainerBase extends ComponentBase { } if (index !== undefined && index !== null && index >= 0 && index < this.items.length) { this.items.splice(index, 0, new ItemDescriptor(componentDescriptor, config)); - } else if(!index) { + } else if (!index) { this.items.push(new ItemDescriptor(componentDescriptor, config)); } else { throw new Error(nls.localize('invalidIndex', 'The index is invalid.')); diff --git a/src/sql/parts/modelComponents/componentWithIconBase.ts b/src/sql/parts/modelComponents/componentWithIconBase.ts index 9cd0949488..df0d32a21b 100644 --- a/src/sql/parts/modelComponents/componentWithIconBase.ts +++ b/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) { - super(changeRef); + changeRef: ChangeDetectorRef, + el: ElementRef, ) { + super(changeRef, el); } /// IComponent implementation diff --git a/src/sql/parts/modelComponents/declarativeTable.component.ts b/src/sql/parts/modelComponents/declarativeTable.component.ts index af18f93f5e..7ad918c86a 100644 --- a/src/sql/parts/modelComponents/declarativeTable.component.ts +++ b/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 { @@ -134,7 +135,7 @@ export default class DeclarativeTableComponent extends ComponentBase implements private onCellDataChanged(newValue: any, row: number, cell: number): void { this.data[row][cell] = newValue; this.data = this.data; - let newCellData : sqlops.TableCell = { + let newCellData: sqlops.TableCell = { row: row, column: cell, value: newValue diff --git a/src/sql/parts/modelComponents/dropdown.component.ts b/src/sql/parts/modelComponents/dropdown.component.ts index 3a7bde8275..be4cd88361 100644 --- a/src/sql/parts/modelComponents/dropdown.component.ts +++ b/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 { diff --git a/src/sql/parts/modelComponents/editor.component.ts b/src/sql/parts/modelComponents/editor.component.ts index d962f448b1..51f1406db3 100644 --- a/src/sql/parts/modelComponents/editor.component.ts +++ b/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 { @@ -107,7 +107,7 @@ export default class EditorComponent extends ComponentBase implements IComponent this._editor.layout(new DOM.Dimension( width && width > 0 ? width : DOM.getContentWidth(this._el.nativeElement), height && height > 0 ? height : DOM.getContentHeight(this._el.nativeElement))); - let element = this._el.nativeElement; + let element = this._el.nativeElement; element.style.position = this.position; } @@ -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(); diff --git a/src/sql/parts/modelComponents/fileBrowserTree.component.ts b/src/sql/parts/modelComponents/fileBrowserTree.component.ts index 835c2ab2fb..2f52dcf51f 100644 --- a/src/sql/parts/modelComponents/fileBrowserTree.component.ts +++ b/src/sql/parts/modelComponents/fileBrowserTree.component.ts @@ -27,15 +27,16 @@ export default class FileBrowserTreeComponent extends ComponentBase implements I @Input() modelStore: IModelStore; private _treeView: FileBrowserTreeView; private _viewModel: FileBrowserViewModel; - private _fileFilters: [{label: string, filters: string[]}] = [ + private _fileFilters: [{ label: string, filters: string[] }] = [ { label: 'All Files', filters: ['*'] } ]; @ViewChild('fileBrowserTree', { read: ElementRef }) private _treeContainer: ElementRef; constructor( @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, - @Inject(IInstantiationService) private _instantiationService: IInstantiationService) { - super(changeRef); + @Inject(IInstantiationService) private _instantiationService: IInstantiationService, + @Inject(forwardRef(() => ElementRef)) el: ElementRef) { + super(changeRef, el); } ngOnInit(): void { diff --git a/src/sql/parts/modelComponents/flexContainer.component.ts b/src/sql/parts/modelComponents/flexContainer.component.ts index 7c53ae80d8..f45bc58364 100644 --- a/src/sql/parts/modelComponents/flexContainer.component.ts +++ b/src/sql/parts/modelComponents/flexContainer.component.ts @@ -45,8 +45,11 @@ export default class FlexContainer extends ContainerBase impleme private _width: string; private _position: string; - constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) { - super(changeRef); + constructor( + @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, + @Inject(forwardRef(() => ElementRef)) el: ElementRef + ) { + super(changeRef, el); this._flexFlow = ''; // default this._justifyContent = ''; // default } diff --git a/src/sql/parts/modelComponents/formContainer.component.ts b/src/sql/parts/modelComponents/formContainer.component.ts index 59b8b78323..b10ab6c3cc 100644 --- a/src/sql/parts/modelComponents/formContainer.component.ts +++ b/src/sql/parts/modelComponents/formContainer.component.ts @@ -106,8 +106,9 @@ export default class FormContainer extends ContainerBase impleme constructor( @Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface, - @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) { - super(changeRef); + @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, + @Inject(forwardRef(() => ElementRef)) el: ElementRef) { + super(changeRef, el); } ngOnInit(): void { diff --git a/src/sql/parts/modelComponents/groupContainer.component.ts b/src/sql/parts/modelComponents/groupContainer.component.ts index 161514f8da..9fb30179b3 100644 --- a/src/sql/parts/modelComponents/groupContainer.component.ts +++ b/src/sql/parts/modelComponents/groupContainer.component.ts @@ -45,8 +45,9 @@ export default class GroupContainer extends ContainerBase implement constructor( @Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface, - @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) { - super(changeRef); + @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, + @Inject(forwardRef(() => ElementRef)) el: ElementRef) { + super(changeRef, el); } ngOnInit(): void { diff --git a/src/sql/parts/modelComponents/inputbox.component.ts b/src/sql/parts/modelComponents/inputbox.component.ts index 1e10d8f3ae..45006b7013 100644 --- a/src/sql/parts/modelComponents/inputbox.component.ts +++ b/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 { diff --git a/src/sql/parts/modelComponents/listbox.component.ts b/src/sql/parts/modelComponents/listbox.component.ts index 7ddb50bbf4..2a26937308 100644 --- a/src/sql/parts/modelComponents/listbox.component.ts +++ b/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 { diff --git a/src/sql/parts/modelComponents/loadingComponent.component.ts b/src/sql/parts/modelComponents/loadingComponent.component.ts index b9c234bf7c..ab5687dffe 100644 --- a/src/sql/parts/modelComponents/loadingComponent.component.ts +++ b/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) { - super(changeRef); + @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, + @Inject(forwardRef(() => ElementRef)) el: ElementRef) { + super(changeRef, el); this._validations.push(() => { if (!this._component) { return true; diff --git a/src/sql/parts/modelComponents/radioButton.component.ts b/src/sql/parts/modelComponents/radioButton.component.ts index 13572531b0..f019beb421 100644 --- a/src/sql/parts/modelComponents/radioButton.component.ts +++ b/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) { - super(changeRef); + @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, + @Inject(forwardRef(() => ElementRef)) el: ElementRef) { + super(changeRef, el); } ngOnInit(): void { diff --git a/src/sql/parts/modelComponents/table.component.ts b/src/sql/parts/modelComponents/table.component.ts index 936554229b..d0aa1a5dab 100644 --- a/src/sql/parts/modelComponents/table.component.ts +++ b/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) { - super(changeRef); + @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService, + @Inject(forwardRef(() => ElementRef)) el: ElementRef) { + super(changeRef, el); } ngOnInit(): void { diff --git a/src/sql/parts/modelComponents/text.component.ts b/src/sql/parts/modelComponents/text.component.ts index 4d92ef7637..987fa6e110 100644 --- a/src/sql/parts/modelComponents/text.component.ts +++ b/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) { - super(changeRef); + @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, + @Inject(forwardRef(() => ElementRef)) el: ElementRef) { + super(changeRef, el); } ngOnInit(): void { diff --git a/src/sql/parts/modelComponents/toolbarContainer.component.ts b/src/sql/parts/modelComponents/toolbarContainer.component.ts index f488b38ba2..bc4f6042ad 100644 --- a/src/sql/parts/modelComponents/toolbarContainer.component.ts +++ b/src/sql/parts/modelComponents/toolbarContainer.component.ts @@ -52,8 +52,9 @@ export default class ToolbarContainer extends ContainerBase i constructor( @Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface, - @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) { - super(changeRef); + @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, + @Inject(forwardRef(() => ElementRef)) el: ElementRef) { + super(changeRef, el); this._orientation = Orientation.Horizontal; } diff --git a/src/sql/parts/modelComponents/tree/tree.component.ts b/src/sql/parts/modelComponents/tree/tree.component.ts index 7f9edbc8ac..973a0cc866 100644 --- a/src/sql/parts/modelComponents/tree/tree.component.ts +++ b/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) { - super(changeRef); + @Inject(IInstantiationService) private _instantiationService: IInstantiationService, + @Inject(forwardRef(() => ElementRef)) el: ElementRef + ) { + super(changeRef, el); } ngOnInit(): void { @@ -112,7 +114,7 @@ export default class TreeComponent extends ComponentBase implements IComponent, this._tree.domFocus(); this._register(this._tree); this._register(attachListStyler(this._tree, this.themeService)); - this._register(this._tree.onDidChangeSelection( e => { + this._register(this._tree.onDidChangeSelection(e => { this._dataProvider.onNodeSelected(e.selection); })); this._tree.refresh(); diff --git a/src/sql/parts/modelComponents/webview.component.ts b/src/sql/parts/modelComponents/webview.component.ts index 49c53a7641..69b50233fc 100644 --- a/src/sql/parts/modelComponents/webview.component.ts +++ b/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 { @@ -139,7 +139,7 @@ export default class WebViewComponent extends ComponentBase implements IComponen /// IComponent implementation public layout(): void { - let element = this._el.nativeElement; + let element = this._el.nativeElement; element.style.position = this.position; this._webview.layout(); } diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index d095f5feee..e82c64408d 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -147,6 +147,15 @@ declare module 'sqlops' { */ updateProperties(properties: { [key: string]: any }): Thenable; + /** + * Sends an updated property of the component to the UI + * + * @returns {Thenable} Thenable that completes once the update + * has been applied in the UI + * @memberof Component + */ + updateProperty(key: string, value: any): Thenable; + 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 { diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts index f00bf589a2..1681e6f622 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/src/sql/workbench/api/node/extHostModelView.ts @@ -340,7 +340,7 @@ class FormContainerBuilder extends ContainerBuilderImpl { + return this.setProperty(key, value); + } + protected notifyPropertyChanged(): Thenable { return this._proxy.$setProperties(this._handle, this._id, this.properties); } diff --git a/src/sqltest/parts/modelComponents/componentBase.test.ts b/src/sqltest/parts/modelComponents/componentBase.test.ts index 05d6c0789a..41095483b1 100644 --- a/src/sqltest/parts/modelComponents/componentBase.test.ts +++ b/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 { public descriptor: IComponentDescriptor; constructor(public modelStore: IModelStore, id: string) { - super(undefined); + super(undefined, undefined); this.descriptor = modelStore.createComponentDescriptor('TestContainer', id); this._changeRef = { detectChanges: () => undefined