Add more options to chart viewer (#1307)

* fixing up chart viewer

* formatting

* everything is working

* removed unnecessary code

* removed unneeded code

src/sql/base/browser/ui/checkbox/checkbox.component.ts

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import {
+	Component, Inject, forwardRef, ElementRef, OnInit, Input,
+	Output, OnChanges, SimpleChanges, EventEmitter
+} from '@angular/core';
+
+import { Checkbox as vsCheckbox } from 'sql/base/browser/ui/checkbox/checkbox';
+
+@Component({
+	selector: 'checkbox',
+	template: ''
+})
+export class Checkbox implements OnInit, OnChanges {
+	@Input() label: string;
+	@Input() enabled = true;
+	@Input() checked = true;
+	@Input() private ariaLabel: string;
+
+	@Output() onChange = new EventEmitter<boolean>();
+
+	private _checkbox: vsCheckbox;
+
+	constructor(
+		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef
+	) { }
+
+	ngOnInit(): void {
+		this._checkbox = new vsCheckbox(this._el.nativeElement, {
+			label: this.label,
+			ariaLabel: this.ariaLabel || this.label,
+			checked: this.checked,
+			enabled: this.enabled
+		});
+		this._checkbox.onChange(e => { this.onChange.emit(e); });
+	}
+
+	ngOnChanges(changes: SimpleChanges): void {
+		if (this._checkbox) {
+			if (changes['label']) {
+				this._checkbox.label = changes['label'].currentValue;
+			}
+
+			if (changes['enabled']) {
+				this._checkbox.enabled = changes['enabled'].currentValue;
+			}
+
+			if (changes['checked']) {
+				this._checkbox.checked = changes['checked'].currentValue;
+			}
+		}
+	}
+}

src/sql/base/browser/ui/inputBox/inputBox.component.ts

@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import {
+	Component, Inject, forwardRef, ElementRef, OnInit, Input,
+	Output, OnChanges, SimpleChanges, EventEmitter
+} from '@angular/core';
+
+import { InputBox as vsInputBox } from 'sql/base/browser/ui/inputBox/inputBox';
+import { AngularDisposable } from 'sql/base/common/lifecycle';
+
+import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
+import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+
+@Component({
+	selector: 'input-box',
+	template: ''
+})
+export class InputBox extends AngularDisposable implements OnInit, OnChanges {
+	private _inputbox: vsInputBox;
+
+	@Input() min: string;
+	@Input() max: string;
+	@Input() type: string;
+	@Input() placeholder: string;
+	@Input() ariaLabel: string;
+
+	@Output() onDidChange = new EventEmitter<string | number>();
+
+	constructor(
+		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
+		@Inject(IThemeService) private themeService: IThemeService,
+		@Inject(IContextViewService) private contextViewService: IContextViewService
+	) {
+		super();
+	}
+
+	ngOnInit(): void {
+		this._inputbox = new vsInputBox(this._el.nativeElement, this.contextViewService, {
+			min: this.min,
+			max: this.max,
+			type: this.type,
+			placeholder: this.placeholder,
+			ariaLabel: this.ariaLabel
+		});
+		this._inputbox.onDidChange(e => {
+			switch (this.type) {
+				case 'number':
+					if (e) {
+						this.onDidChange.emit(Number(e));
+						break;
+					}
+				default:
+					this.onDidChange.emit(e);
+			}
+		});
+		this._register(attachInputBoxStyler(this._inputbox, this.themeService));
+	}
+
+	ngOnChanges(changes: SimpleChanges): void {
+		if (this._inputbox) {
+			if (changes['min']) {
+				this._inputbox.inputElement.min = this.min;
+			}
+			if (changes['max']) {
+				this._inputbox.inputElement.max = this.max;
+			}
+			if (changes['type']) {
+				this._inputbox.inputElement.type = this.type;
+			}
+			if (changes['placeholder']) {
+				this._inputbox.inputElement.placeholder = this.placeholder;
+			}
+		}
+	}
+}

src/sql/base/browser/ui/panel/panel.component.ts

@@ -102,43 +102,45 @@ export class PanelComponent extends Disposable implements AfterContentInit, OnIn
 	}
 
 	ngAfterViewInit(): void {
-		let container = this._titleContainer.nativeElement as HTMLElement;
-		let tabList = this._tabList.nativeElement as HTMLElement;
-		container.removeChild(tabList);
+		if (!this.options.showTabsWhenOne ? this._tabs.length !== 1 : true) {
+			let container = this._titleContainer.nativeElement as HTMLElement;
+			let tabList = this._tabList.nativeElement as HTMLElement;
+			container.removeChild(tabList);
 
-		this._scrollableElement = new ScrollableElement(tabList, {
-			horizontal: ScrollbarVisibility.Auto,
-			vertical: ScrollbarVisibility.Hidden,
-			scrollYToX: true,
-			useShadows: false,
-			horizontalScrollbarSize: 3
-		});
+			this._scrollableElement = new ScrollableElement(tabList, {
+				horizontal: ScrollbarVisibility.Auto,
+				vertical: ScrollbarVisibility.Hidden,
+				scrollYToX: true,
+				useShadows: false,
+				horizontalScrollbarSize: 3
+			});
 
-		this._scrollableElement.onScroll(e => {
-			tabList.scrollLeft = e.scrollLeft;
-		});
+			this._scrollableElement.onScroll(e => {
+				tabList.scrollLeft = e.scrollLeft;
+			});
 
-		container.insertBefore(this._scrollableElement.getDomNode(), container.firstChild);
+			container.insertBefore(this._scrollableElement.getDomNode(), container.firstChild);
 
-		this._scrollableElement.setScrollDimensions({
-			width: tabList.offsetWidth,
-			scrollWidth: tabList.scrollWidth
-		});
+			this._scrollableElement.setScrollDimensions({
+				width: tabList.offsetWidth,
+				scrollWidth: tabList.scrollWidth
+			});
 
-		this._register(addDisposableListener(window, EventType.RESIZE, () => {
-			// Todo: Need to set timeout because we have to make sure that the grids have already rearraged before the getContentHeight gets called.
-			setTimeout(() => {
-				this._scrollableElement.setScrollDimensions({
-					width: tabList.offsetWidth,
-					scrollWidth: tabList.scrollWidth
-				});
-			}, 100);
-		}));
+			this._register(addDisposableListener(window, EventType.RESIZE, () => {
+				// Todo: Need to set timeout because we have to make sure that the grids have already rearraged before the getContentHeight gets called.
+				setTimeout(() => {
+					this._scrollableElement.setScrollDimensions({
+						width: tabList.offsetWidth,
+						scrollWidth: tabList.scrollWidth
+					});
+				}, 100);
+			}));
 
-		if (this.options.layout === NavigationBarLayout.horizontal) {
-			(<HTMLElement>this._tabbedPanelRef.nativeElement).classList.add(horizontalLayout);
-		} else {
-			(<HTMLElement>this._tabbedPanelRef.nativeElement).classList.add(verticalLayout);
+			if (this.options.layout === NavigationBarLayout.horizontal) {
+				(<HTMLElement>this._tabbedPanelRef.nativeElement).classList.add(horizontalLayout);
+			} else {
+				(<HTMLElement>this._tabbedPanelRef.nativeElement).classList.add(verticalLayout);
+			}
 		}
 	}
 

src/sql/base/browser/ui/selectBox/selectBox.component.ts

@@ -0,0 +1,66 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import {
+	Component, Inject, forwardRef, ElementRef, OnInit, Input,
+	Output, OnChanges, SimpleChanges, EventEmitter
+} from '@angular/core';
+
+import { SelectBox as vsSelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
+import { AngularDisposable } from 'sql/base/common/lifecycle';
+
+import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
+import { attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+
+@Component({
+	selector: 'select-box',
+	template: ''
+})
+export class SelectBox extends AngularDisposable implements OnInit, OnChanges {
+	private _selectbox: vsSelectBox;
+
+	@Input() options: string[];
+	@Input() selectedOption: string;
+	@Input() onlyEmitOnChange = false;
+
+	@Output() onDidSelect = new EventEmitter<ISelectData>();
+
+	private _previousVal: string;
+
+	constructor(
+		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
+		@Inject(IThemeService) private themeService: IThemeService,
+		@Inject(IContextViewService) private contextViewService: IContextViewService
+	) {
+		super();
+	}
+
+	ngOnInit(): void {
+		this._selectbox = new vsSelectBox(this.options, this.selectedOption, this.contextViewService);
+		this._selectbox.render(this._el.nativeElement);
+		this._selectbox.onDidSelect(e => {
+			if (this.onlyEmitOnChange) {
+				if (this._previousVal !== e.selected) {
+					this.onDidSelect.emit(e);
+					this._previousVal = e.selected;
+				}
+			} else {
+				this.onDidSelect.emit(e);
+			}
+		});
+		this._register(attachSelectBoxStyler(this._selectbox, this.themeService));
+	}
+
+	ngOnChanges(changes: SimpleChanges): void {
+	}
+
+	public get value(): string {
+		return this._selectbox.value;
+	}
+}