From f9af34b1036a62923b58f7fa37d508c24eafb592 Mon Sep 17 00:00:00 2001 From: Yurong He Date: Tue, 30 Apr 2019 16:18:48 -0700 Subject: [PATCH] Notebook toolbar UI improvement (#5282) Fixed #5236 - Change the icon to blue image. Existing icons are not deleted. We will use them when the icons are - - moved as the secondary actions. - Change the font size to 13px - Change the height to 21px - Move Add actions to the left --- extensions/notebook/package.json | 4 +-- .../resources/dark/manage_blue_inverse.svg | 1 + .../notebook/resources/light/manage_blue.svg | 1 + .../notebook/media/dark/add_blue_inverse.svg | 15 +++++++++++ .../media/dark/clear_results_blue_inverse.svg | 11 ++++++++ .../media/dark/nottrusted_blue_inverse.svg | 1 + .../media/dark/run_cells_blue_inverse.svg | 1 + .../media/dark/trusted_blue_inverse.svg | 25 +++++++++++++++++ .../parts/notebook/media/light/add_blue.svg | 15 +++++++++++ .../media/light/clear_results_blue.svg | 11 ++++++++ .../notebook/media/light/nottrusted_blue.svg | 1 + .../notebook/media/light/run_cells_blue.svg | 1 + .../notebook/media/light/trusted_blue.svg | 25 +++++++++++++++++ .../parts/notebook/models/notebookContexts.ts | 4 +-- .../parts/notebook/notebook.component.ts | 4 +-- src/sql/workbench/parts/notebook/notebook.css | 27 +++++++++++-------- .../parts/notebook/notebookActions.ts | 6 ++--- 17 files changed, 133 insertions(+), 20 deletions(-) create mode 100644 extensions/notebook/resources/dark/manage_blue_inverse.svg create mode 100644 extensions/notebook/resources/light/manage_blue.svg create mode 100644 src/sql/workbench/parts/notebook/media/dark/add_blue_inverse.svg create mode 100644 src/sql/workbench/parts/notebook/media/dark/clear_results_blue_inverse.svg create mode 100644 src/sql/workbench/parts/notebook/media/dark/nottrusted_blue_inverse.svg create mode 100644 src/sql/workbench/parts/notebook/media/dark/run_cells_blue_inverse.svg create mode 100644 src/sql/workbench/parts/notebook/media/dark/trusted_blue_inverse.svg create mode 100644 src/sql/workbench/parts/notebook/media/light/add_blue.svg create mode 100644 src/sql/workbench/parts/notebook/media/light/clear_results_blue.svg create mode 100644 src/sql/workbench/parts/notebook/media/light/nottrusted_blue.svg create mode 100644 src/sql/workbench/parts/notebook/media/light/run_cells_blue.svg create mode 100644 src/sql/workbench/parts/notebook/media/light/trusted_blue.svg diff --git a/extensions/notebook/package.json b/extensions/notebook/package.json index b15e983059..fc02db37d6 100644 --- a/extensions/notebook/package.json +++ b/extensions/notebook/package.json @@ -109,8 +109,8 @@ "command": "jupyter.cmd.installPackages", "title": "%title.installPackages%", "icon": { - "dark": "resources/dark/manage_inverse.svg", - "light": "resources/light/manage.svg" + "dark": "resources/dark/manage_blue_inverse.svg", + "light": "resources/light/manage_blue.svg" } }, { diff --git a/extensions/notebook/resources/dark/manage_blue_inverse.svg b/extensions/notebook/resources/dark/manage_blue_inverse.svg new file mode 100644 index 0000000000..0173ab3b63 --- /dev/null +++ b/extensions/notebook/resources/dark/manage_blue_inverse.svg @@ -0,0 +1 @@ +packagemanagement_command_inverse \ No newline at end of file diff --git a/extensions/notebook/resources/light/manage_blue.svg b/extensions/notebook/resources/light/manage_blue.svg new file mode 100644 index 0000000000..3849b5c98c --- /dev/null +++ b/extensions/notebook/resources/light/manage_blue.svg @@ -0,0 +1 @@ +packagemanagement_command \ No newline at end of file diff --git a/src/sql/workbench/parts/notebook/media/dark/add_blue_inverse.svg b/src/sql/workbench/parts/notebook/media/dark/add_blue_inverse.svg new file mode 100644 index 0000000000..b4b6bb2297 --- /dev/null +++ b/src/sql/workbench/parts/notebook/media/dark/add_blue_inverse.svg @@ -0,0 +1,15 @@ + + + + +add_12x12 + + diff --git a/src/sql/workbench/parts/notebook/media/dark/clear_results_blue_inverse.svg b/src/sql/workbench/parts/notebook/media/dark/clear_results_blue_inverse.svg new file mode 100644 index 0000000000..f528354182 --- /dev/null +++ b/src/sql/workbench/parts/notebook/media/dark/clear_results_blue_inverse.svg @@ -0,0 +1,11 @@ + + + + +clear_results_inverse + + diff --git a/src/sql/workbench/parts/notebook/media/dark/nottrusted_blue_inverse.svg b/src/sql/workbench/parts/notebook/media/dark/nottrusted_blue_inverse.svg new file mode 100644 index 0000000000..ac284cac04 --- /dev/null +++ b/src/sql/workbench/parts/notebook/media/dark/nottrusted_blue_inverse.svg @@ -0,0 +1 @@ +Not_trusted_command_inverse \ No newline at end of file diff --git a/src/sql/workbench/parts/notebook/media/dark/run_cells_blue_inverse.svg b/src/sql/workbench/parts/notebook/media/dark/run_cells_blue_inverse.svg new file mode 100644 index 0000000000..38d42b92b6 --- /dev/null +++ b/src/sql/workbench/parts/notebook/media/dark/run_cells_blue_inverse.svg @@ -0,0 +1 @@ +run_cells_command_inverse \ No newline at end of file diff --git a/src/sql/workbench/parts/notebook/media/dark/trusted_blue_inverse.svg b/src/sql/workbench/parts/notebook/media/dark/trusted_blue_inverse.svg new file mode 100644 index 0000000000..d7e0491e6f --- /dev/null +++ b/src/sql/workbench/parts/notebook/media/dark/trusted_blue_inverse.svg @@ -0,0 +1,25 @@ + + + + +trust_inverse + + + + diff --git a/src/sql/workbench/parts/notebook/media/light/add_blue.svg b/src/sql/workbench/parts/notebook/media/light/add_blue.svg new file mode 100644 index 0000000000..427019bc9b --- /dev/null +++ b/src/sql/workbench/parts/notebook/media/light/add_blue.svg @@ -0,0 +1,15 @@ + + + + +add_16x16 + + diff --git a/src/sql/workbench/parts/notebook/media/light/clear_results_blue.svg b/src/sql/workbench/parts/notebook/media/light/clear_results_blue.svg new file mode 100644 index 0000000000..f1b1c61106 --- /dev/null +++ b/src/sql/workbench/parts/notebook/media/light/clear_results_blue.svg @@ -0,0 +1,11 @@ + + + + +clear_results + + diff --git a/src/sql/workbench/parts/notebook/media/light/nottrusted_blue.svg b/src/sql/workbench/parts/notebook/media/light/nottrusted_blue.svg new file mode 100644 index 0000000000..92c5c4726a --- /dev/null +++ b/src/sql/workbench/parts/notebook/media/light/nottrusted_blue.svg @@ -0,0 +1 @@ +Not_trusted_command \ No newline at end of file diff --git a/src/sql/workbench/parts/notebook/media/light/run_cells_blue.svg b/src/sql/workbench/parts/notebook/media/light/run_cells_blue.svg new file mode 100644 index 0000000000..f612528693 --- /dev/null +++ b/src/sql/workbench/parts/notebook/media/light/run_cells_blue.svg @@ -0,0 +1 @@ +run_cells_command \ No newline at end of file diff --git a/src/sql/workbench/parts/notebook/media/light/trusted_blue.svg b/src/sql/workbench/parts/notebook/media/light/trusted_blue.svg new file mode 100644 index 0000000000..568e2a3cee --- /dev/null +++ b/src/sql/workbench/parts/notebook/media/light/trusted_blue.svg @@ -0,0 +1,25 @@ + + + + +trust + + + + diff --git a/src/sql/workbench/parts/notebook/models/notebookContexts.ts b/src/sql/workbench/parts/notebook/models/notebookContexts.ts index d44d09354b..e9023be939 100644 --- a/src/sql/workbench/parts/notebook/models/notebookContexts.ts +++ b/src/sql/workbench/parts/notebook/models/notebookContexts.ts @@ -20,7 +20,7 @@ export class NotebookContexts { let defaultConnection: ConnectionProfile = { providerName: NotebookContexts.MSSQL_PROVIDER, id: '-1', - serverName: localize('selectConnection', 'Select connection') + serverName: localize('selectConnection', 'Select Connection') }; return { @@ -109,7 +109,7 @@ export class NotebookContexts { let newConnection = { providerName: 'SQL', id: '-2', - serverName: localize('addConnection', 'Add new connection') + serverName: localize('addConnection', 'Add New Connection') }; activeConnections.push(newConnection); } diff --git a/src/sql/workbench/parts/notebook/notebook.component.ts b/src/sql/workbench/parts/notebook/notebook.component.ts index 4b44418b90..8b10c3b722 100644 --- a/src/sql/workbench/parts/notebook/notebook.component.ts +++ b/src/sql/workbench/parts/notebook/notebook.component.ts @@ -383,10 +383,10 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe this._actionBar = new Taskbar(taskbar, { actionItemProvider: action => this.actionItemProvider(action as Action) }); this._actionBar.context = this; this._actionBar.setContent([ - { element: kernelContainer }, - { element: attachToContainer }, { action: addCodeCellButton }, { action: addTextCellButton }, + { element: kernelContainer }, + { element: attachToContainer }, { action: this._trustedAction }, { action: this._runAllCellsAction }, { action: clearResultsButton } diff --git a/src/sql/workbench/parts/notebook/notebook.css b/src/sql/workbench/parts/notebook/notebook.css index 200563fcb7..ebaac7f691 100644 --- a/src/sql/workbench/parts/notebook/notebook.css +++ b/src/sql/workbench/parts/notebook/notebook.css @@ -24,6 +24,7 @@ .notebookEditor .actionbar-container .monaco-action-bar > ul.actions-container { padding-top: 4px; padding-bottom: 4px; + min-height: 21px; } .notebookEditor .actions-container .action-item .notebook-button { @@ -35,57 +36,61 @@ padding-left: 18px; background-size: 13px; margin-right: 20px; - font-size: 11px; + font-size: 13px; + height: 21px; } .notebookEditor .labelOnLeftContainer { min-width: 100px; margin-right: 20px; + font-size: 13px; + text-align: center; + vertical-align: bottom; } .notebookEditor .notebook-button.icon-add{ - background-image: url("./media/light/add.svg"); + background-image: url("./media/light/add_blue.svg"); } .vs-dark .notebookEditor .notebook-button.icon-add, .hc-black .notebookEditor .notebook-button.icon-add{ - background-image: url("./media/dark/add_inverse.svg"); + background-image: url("./media/dark/add_blue_inverse.svg"); } .notebookEditor .notebook-button.icon-run-cells{ - background-image: url("./media/light/run_cells.svg"); + background-image: url("./media/light/run_cells_blue.svg"); } .vs-dark .notebookEditor .notebook-button.icon-run-cells, .hc-black .notebookEditor .notebook-button.icon-run-cells{ - background-image: url("./media/dark/run_cells_inverse.svg"); + background-image: url("./media/dark/run_cells_blue_inverse.svg"); } .notebookEditor .notebook-button.icon-trusted{ - background-image: url("./media/light/trusted.svg"); + background-image: url("./media/light/trusted_blue.svg"); } .vs-dark .notebookEditor .notebook-button.icon-trusted, .hc-black .notebookEditor .notebook-button.icon-trusted{ - background-image: url("./media/dark/trusted_inverse.svg"); + background-image: url("./media/dark/trusted_blue_inverse.svg"); } .notebookEditor .notebook-button.icon-notTrusted{ - background-image: url("./media/light/nottrusted.svg"); + background-image: url("./media/light/nottrusted_blue.svg"); } .vs-dark .notebookEditor .notebook-button.icon-notTrusted, .hc-black .notebookEditor .notebook-button.icon-notTrusted{ - background-image: url("./media/dark/nottrusted_inverse.svg"); + background-image: url("./media/dark/nottrusted_blue_inverse.svg"); } .notebookEditor .notebook-button.icon-clear-results{ - background-image: url("./media/light/clear_results.svg"); + background-image: url("./media/light/clear_results_blue.svg"); } .vs-dark .notebookEditor .notebook-button.icon-clear-results, .hc-black .notebookEditor .notebook-button.icon-clear-results{ - background-image: url("./media/dark/clear_results_inverse.svg"); + background-image: url("./media/dark/clear_results_blue_inverse.svg"); } .moreActions .action-label.icon.toggle-more { diff --git a/src/sql/workbench/parts/notebook/notebookActions.ts b/src/sql/workbench/parts/notebook/notebookActions.ts index c80780a364..3c96283b38 100644 --- a/src/sql/workbench/parts/notebook/notebookActions.ts +++ b/src/sql/workbench/parts/notebook/notebookActions.ts @@ -27,10 +27,10 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; const msgLoading = localize('loading', "Loading kernels..."); const msgChanging = localize('changing', "Changing kernel..."); const kernelLabel: string = localize('Kernel', "Kernel: "); -const attachToLabel: string = localize('AttachTo', "Attach to: "); +const attachToLabel: string = localize('AttachTo', "Attach To: "); const msgLoadingContexts = localize('loadingContexts', "Loading contexts..."); -const msgAddNewConnection = localize('addNewConnection', "Add new connection"); -const msgSelectConnection = localize('selectConnection', "Select connection"); +const msgAddNewConnection = localize('addNewConnection', "Add New Connection"); +const msgSelectConnection = localize('selectConnection', "Select Connection"); const msgLocalHost = localize('localhost', "localhost"); const HIDE_ICON_CLASS = ' hideIcon';