Resend selectBox change to on against master. PR against nativeNotebook was approved already. (#3215)

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

@@ -0,0 +1,10 @@
+.labelOnTopContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+.labelOnLeftContainer {
+    display: flex;
+    flex-direction: row;
+    margin-right: 5px;
+}

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

@@ -4,6 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 'use strict';
+import 'vs/css!./media/selectBox';
+
 import { SelectBox as vsSelectBox, ISelectBoxStyles as vsISelectBoxStyles, ISelectBoxOptions } from 'vs/base/browser/ui/selectBox/selectBox';
 import { Color } from 'vs/base/common/color';
 import { IContextViewProvider, AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
@@ -30,6 +32,7 @@ export class SelectBox extends vsSelectBox {
 	private _optionsDictionary;
 	private _dialogOptions: string[];
 	private _selectedOption: string;
+	private _selectBoxOptions: ISelectBoxOptions;
 	private enabledSelectBackground: Color;
 	private enabledSelectForeground: Color;
 	private enabledSelectBorder: Color;
@@ -72,6 +75,7 @@ export class SelectBox extends vsSelectBox {
 
 		// explicitly set the accessible role so that the screen readers can read the control type properly
 		this.selectElement.setAttribute('role', 'combobox');
+		this._selectBoxOptions = selectBoxOptions;
 	}
 
 	public style(styles: ISelectBoxStyles): void {
@@ -226,4 +230,34 @@ export class SelectBox extends vsSelectBox {
 			default: return { border: this.inputValidationErrorBorder, background: this.inputValidationErrorBackground };
 		}
 	}
-}
+
+	public render(container: HTMLElement): void {
+		let selectOptions: ISelectBoxOptionsWithLabel = this._selectBoxOptions as ISelectBoxOptionsWithLabel;
+
+		if (selectOptions && selectOptions.labelText && selectOptions.labelText !== undefined) {
+			let outerContainer = document.createElement('div');
+			let selectContainer = document.createElement('div');
+
+			outerContainer.className = selectOptions.labelOnTop ? 'labelOnTopContainer' : 'labelOnLeftContainer';
+
+			let labelText = document.createElement('div');
+			labelText.className = 'action-item-label';
+			labelText.innerHTML = selectOptions.labelText;
+
+			container.appendChild(outerContainer);
+			outerContainer.appendChild(labelText);
+			outerContainer.appendChild(selectContainer);
+
+			super.render(selectContainer);
+			this.selectElement.classList.add('action-item-label');
+		}
+		else {
+			super.render(container);
+		}
+	}
+}
+
+export interface ISelectBoxOptionsWithLabel extends ISelectBoxOptions {
+	labelText?: string;
+	labelOnTop?: boolean;
+}

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

@@ -54,6 +54,12 @@
 	padding-left: 15px;
  }
 
+ .carbon-taskbar .action-item-label {
+	display: flex;
+	font-size:11px;
+	padding-right: 5px;
+ }
+
 .listDatabasesSelectBox {
 	padding-left: 2px;
 	min-width: 100px;

src/sql/parts/notebook/notebook.component.ts

@@ -19,7 +19,7 @@ import { CommonServiceInterface } from 'sql/services/common/commonServiceInterfa
 import { AngularDisposable } from 'sql/base/common/lifecycle';
 
 import { CellTypes, CellType, NotebookChangeType } from 'sql/parts/notebook/models/contracts';
-import { ICellModel, INotebookModel, IModelFactory, INotebookModelOptions } from 'sql/parts/notebook/models/modelInterfaces';
+import { ICellModel, IModelFactory } from 'sql/parts/notebook/models/modelInterfaces';
 import { IConnectionManagementService } from 'sql/parts/connection/common/connectionManagement';
 import { INotebookService, INotebookParams, INotebookManager } from 'sql/services/notebook/notebookService';
 import { IBootstrapParams } from 'sql/services/bootstrap/bootstrapService';
@@ -193,21 +193,15 @@ export class NotebookComponent extends AngularDisposable implements OnInit {
 	}
 
 	protected initActionBar() {
-		let kernelInfoText = document.createElement('div');
-		kernelInfoText.className = 'notebook-info-label';
-		kernelInfoText.innerText = 'Kernel: ';
+		let kernelContainer = document.createElement('div');
+		let kernelDropdown = new KernelsDropdown(kernelContainer, this.contextViewService, this.modelRegistered);
+		kernelDropdown.render(kernelContainer);
+		attachSelectBoxStyler(kernelDropdown, this.themeService);
 
-		let kernelsDropdown = new KernelsDropdown(this.contextViewService, this.modelRegistered);
-		let kernelsDropdownTemplateContainer = document.createElement('div');
-		kernelsDropdownTemplateContainer.className = 'notebook-toolbar-dropdown';
-		kernelsDropdown.render(kernelsDropdownTemplateContainer);
-		attachSelectBoxStyler(kernelsDropdown, this.themeService);
-
-		let attachToDropdown = new AttachToDropdown(this.contextViewService);
-		let attachToDropdownTemplateContainer = document.createElement('div');
-		attachToDropdownTemplateContainer.className = 'notebook-toolbar-dropdown';
-		attachToDropdown.render(attachToDropdownTemplateContainer);
-		attachSelectBoxStyler(attachToDropdown, this.themeService);
+		let attachToContainer = document.createElement('div');
+		let attachTodropdwon = new AttachToDropdown(attachToContainer, this.contextViewService);
+		attachTodropdwon.render(attachToContainer);
+		attachSelectBoxStyler(attachTodropdwon, this.themeService);
 
 		let attachToInfoText = document.createElement('div');
 		attachToInfoText.className = 'notebook-info-label';
@@ -223,10 +217,8 @@ export class NotebookComponent extends AngularDisposable implements OnInit {
 		this._actionBar = new Taskbar(taskbar, this.contextMenuService);
 		this._actionBar.context = this;
 		this._actionBar.setContent([
-			{ element: kernelInfoText },
-			{ element: kernelsDropdownTemplateContainer },
-			{ element: attachToInfoText },
-			{ element: attachToDropdownTemplateContainer },
+			{ element: kernelContainer },
+			{ element: attachToContainer },
 			{ action: addCodeCellButton},
 			{ action: addTextCellButton}
 		]);

src/sql/parts/notebook/notebook.css

@@ -13,11 +13,6 @@
 	border-style: solid;
 }
 
-.notebookEditor .notebook-toolbar-dropdown {
-	width: 150px;
-	padding-right: 10px;
-}
-
 .notebookEditor .notebook-info-label {
 	padding-right: 5px;
 	text-align: center;

src/sql/parts/notebook/notebookActions.ts

@@ -10,12 +10,15 @@ import { TPromise } from 'vs/base/common/winjs.base';
 import { localize } from 'vs/nls';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
 
-import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
+import { SelectBox, ISelectBoxOptionsWithLabel } from 'sql/base/browser/ui/selectBox/selectBox';
 import { INotebookModel } from 'sql/parts/notebook/models/modelInterfaces';
 import { CellTypes, CellType } from 'sql/parts/notebook/models/contracts';
 import { NotebookComponent } from 'sql/parts/notebook/notebook.component';
 
 const msgLoading = localize('loading', 'Loading kernels...');
+const kernelLabel: string = localize('Kernel', 'Kernel: ');
+const attachToLabel: string = localize('AttachTo', 'Attach to: ');
+const msgLocalHost: string = localize('localhost', 'Localhost');
 
 //Action to add a cell to notebook based on cell type(code/markdown).
 export class AddCellAction extends Action {
@@ -40,15 +43,19 @@ export class AddCellAction extends Action {
 
 export class KernelsDropdown extends SelectBox {
 	private model: INotebookModel;
-	constructor(contextViewProvider: IContextViewProvider, modelRegistered: Promise<INotebookModel>
+	constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, modelRegistered: Promise<INotebookModel>
 	) {
-		super( [msgLoading], msgLoading, contextViewProvider);
+		let selectBoxOptionsWithLabel: ISelectBoxOptionsWithLabel = {
+			labelText: kernelLabel,
+			labelOnTop: false
+		};
+		super([msgLoading], msgLoading, contextViewProvider, container, selectBoxOptionsWithLabel);
 		if (modelRegistered) {
 			modelRegistered
-			.then((model) => this.updateModel(model))
-			.catch((err) => {
-				// No-op for now
-			});
+				.then((model) => this.updateModel(model))
+				.catch((err) => {
+					// No-op for now
+				});
 		}
 
 		this.onDidSelect(e => this.doChangeKernel(e.selected));
@@ -83,9 +90,11 @@ export class KernelsDropdown extends SelectBox {
 }
 
 export class AttachToDropdown extends SelectBox {
-	constructor(contextViewProvider: IContextViewProvider
-	) {
-		let options: string[] = ['localhost'];
-		super(options, 'localhost', contextViewProvider);
+	constructor(container: HTMLElement, contextViewProvider: IContextViewProvider) {
+		let selectBoxOptionsWithLabel: ISelectBoxOptionsWithLabel = {
+			labelText: attachToLabel,
+			labelOnTop: false
+		};
+		super([msgLocalHost], msgLocalHost, contextViewProvider, container, selectBoxOptionsWithLabel);
 	}
 }