Vertical Toolbar Improvements and Fix for Untitled File Load Issue (#3189)

* Add horizontal toolbar

* Add vertical toolbar

* Fix for untitled scheme file load

* further fixes to vertical toolbar

* Addressing PR comments

src/sql/parts/notebook/cellViews/code.component.html

@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------------------------*/
 -->
 <div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: row">
-	<div #toolbar class="toolbar actionbar-container" style="flex: 0 0 auto; display: flex; flex-flow: row; width: 40px; height: 40px; align-items: center; orientation: portrait">
+	<div #toolbar class="toolbar" style="flex: 0 0 auto; display: flex; flex-flow:column; width: 40px; min-height: 40px; padding-top: 10px; orientation: portrait">
 	</div>
 	<div #editor class="editor" style="flex: 1 1 auto; overflow: hidden;">
 	</div>

src/sql/parts/notebook/cellViews/code.css

@@ -13,3 +13,24 @@ code-component .toolbar {
 	border-right-width: 1px;
 	border-right-style: solid;
 }
+
+code-component .toolbarIconRun {
+	height: 20px;
+	background-image: url('../media/light/execute_cell.svg');
+	padding-bottom: 10px;
+}
+
+.vs-dark code-component .toolbarIconRun,
+.hc-black code-component .toolbarIconRun {
+	background-image: url('../media/dark/execute_cell_inverse.svg');
+}
+
+code-component .carbon-taskbar .icon {
+	background-size: 20px;
+	width: 40px;
+}
+
+code-component .carbon-taskbar.monaco-toolbar .monaco-action-bar.animated .actions-container
+{
+	padding-left: 10px
+}

src/sql/parts/notebook/cellViews/codeActions.ts

@@ -2,12 +2,10 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
+
 import { Action } from 'vs/base/common/actions';
 import { TPromise } from 'vs/base/common/winjs.base';
-import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
+import { localize } from 'vs/nls';
-import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
-import { ISelectBoxOptions } from 'vs/base/browser/ui/selectBox/selectBox';
-import { TaskHistoryViewlet } from 'sql/parts/taskHistory/viewlet/taskHistoryViewlet';
 
 export class RunCellAction extends Action {
 	public static ID = 'jobaction.notebookRunCell';
@@ -15,7 +13,8 @@ export class RunCellAction extends Action {
 
 	constructor(
 	) {
-		super(RunCellAction.ID, RunCellAction.LABEL, 'newStepIcon');
+		super(RunCellAction.ID, '', 'toolbarIconRun');
+		this.tooltip = localize('runCell','Run cell');
 	}
 
 	public run(context: any): TPromise<boolean> {

src/sql/parts/notebook/media/dark/execute_cell_inverse.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>execute_cell_inverse </title><circle class="cls-1" cx="8" cy="7.92" r="7.76"/><polygon points="10.7 8 6.67 11 6.67 5 10.7 8 10.7 8"/></svg>

src/sql/parts/notebook/media/light/execute_cell.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>execute_cell</title><circle cx="8" cy="7.92" r="7.76"/><polygon class="cls-1" points="10.7 8 6.67 11 6.67 5 10.7 8 10.7 8"/></svg>

src/sql/parts/notebook/models/notebookModel.ts

@@ -21,6 +21,7 @@ import { SparkMagicContexts } from 'sql/parts/notebook/models/sparkMagicContexts
 import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
 import { NotebookConnection } from 'sql/parts/notebook/models/notebookConnection';
 import { INotification, Severity } from 'vs/platform/notification/common/notification';
+import { Schemas } from 'vs/base/common/network';
 
 /*
 * Used to control whether a message in a dialog/wizard is displayed as an error,
@@ -183,7 +184,10 @@ export class NotebookModel extends Disposable implements INotebookModel {
 	public async requestModelLoad(isTrusted: boolean = false): Promise<void> {
 		try {
 			this._trustedMode = isTrusted;
-			let contents = await this.notebookManager.contentManager.getNotebookContents(this.notebookOptions.notebookUri);
+			let contents = null;
+			if(this.notebookOptions.notebookUri.scheme !== Schemas.untitled) {
+				contents = await this.notebookManager.contentManager.getNotebookContents(this.notebookOptions.notebookUri);
+			}
 			let factory = this.notebookOptions.factory;
 			// if cells already exist, create them with language info (if it is saved)
 			this._cells = undefined;

src/sql/parts/notebook/notebook.contribution.ts

@@ -71,4 +71,3 @@ actionRegistry.registerWorkbenchAction(
 	OpenNotebookAction.LABEL
 );
 
-

src/sql/parts/notebook/notebook.css

@@ -25,6 +25,10 @@
 	align-items: center;
 }
 
+.notebookEditor .actionbar-container .monaco-action-bar > ul.actions-container {
+	padding-top: 0px;
+}
+
 .notebookEditor .notebook-info-button {
 	display: inline-block;
 	width: 100%;