diff --git a/src/sql/base/browser/ui/selectBox/media/selectBox.css b/src/sql/base/browser/ui/selectBox/media/selectBox.css new file mode 100644 index 0000000000..8e46769a9a --- /dev/null +++ b/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; +} diff --git a/src/sql/base/browser/ui/selectBox/selectBox.ts b/src/sql/base/browser/ui/selectBox/selectBox.ts index 049db5a975..2ededd7397 100644 --- a/src/sql/base/browser/ui/selectBox/selectBox.ts +++ b/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 }; } } -} \ No newline at end of file + + 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; +} diff --git a/src/sql/base/browser/ui/taskbar/media/taskbar.css b/src/sql/base/browser/ui/taskbar/media/taskbar.css index 2773aa3cf5..7286b35273 100644 --- a/src/sql/base/browser/ui/taskbar/media/taskbar.css +++ b/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; diff --git a/src/sql/parts/notebook/notebook.component.ts b/src/sql/parts/notebook/notebook.component.ts index 55357a4dc4..6e4a67037e 100644 --- a/src/sql/parts/notebook/notebook.component.ts +++ b/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} ]); diff --git a/src/sql/parts/notebook/notebook.css b/src/sql/parts/notebook/notebook.css index efcfbc6bca..81c65cab2f 100644 --- a/src/sql/parts/notebook/notebook.css +++ b/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; diff --git a/src/sql/parts/notebook/notebookActions.ts b/src/sql/parts/notebook/notebookActions.ts index ec6dd103ef..2aa859d075 100644 --- a/src/sql/parts/notebook/notebookActions.ts +++ b/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 + constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, modelRegistered: Promise ) { - 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); } } \ No newline at end of file