From ada0966832b102892f91c176e659faa96c249f0d Mon Sep 17 00:00:00 2001
From: kisantia <31145923+kisantia@users.noreply.github.com>
Date: Mon, 8 Apr 2019 15:27:18 -0700
Subject: [PATCH] Add toolbar separator (#4890)

* Add option to add toolbar separator after toolbar component
---
 src/sql/azdata.proposed.d.ts                          |  1 +
 src/sql/base/browser/ui/taskbar/media/taskbar.css     |  5 ++---
 .../modelComponents/toolbarContainer.component.ts     | 11 +++++++++++
 src/sql/workbench/api/node/extHostModelView.ts        |  3 ++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts
index 7cc8b0ddfb..fdc5ab7ff6 100644
--- a/src/sql/azdata.proposed.d.ts
+++ b/src/sql/azdata.proposed.d.ts
@@ -2590,6 +2590,7 @@ declare module 'azdata' {
 	export interface ToolbarComponent {
 		component: Component;
 		title?: string;
+		toolbarSeparatorAfter?: boolean;
 	}
 
 	/**
diff --git a/src/sql/base/browser/ui/taskbar/media/taskbar.css b/src/sql/base/browser/ui/taskbar/media/taskbar.css
index 17fbe09b36..2164b1316e 100644
--- a/src/sql/base/browser/ui/taskbar/media/taskbar.css
+++ b/src/sql/base/browser/ui/taskbar/media/taskbar.css
@@ -68,9 +68,8 @@
 
 .taskbarSeparator {
 	width: 1px;
-	background-color:#555;
-	margin-right: 6px;
-	margin-top: 3px;
+	background-color:#A5A5A5;
+	margin: 6px 8px;
 }
 
 .taskbarTextSeparator {
diff --git a/src/sql/parts/modelComponents/toolbarContainer.component.ts b/src/sql/parts/modelComponents/toolbarContainer.component.ts
index 275da76e8e..9502492677 100644
--- a/src/sql/parts/modelComponents/toolbarContainer.component.ts
+++ b/src/sql/parts/modelComponents/toolbarContainer.component.ts
@@ -3,6 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./toolbarLayout';
+import 'vs/css!../../../sql/base/browser/ui/taskbar/media/taskbar';
 
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef,
@@ -18,6 +19,7 @@ import { CommonServiceInterface } from 'sql/services/common/commonServiceInterfa
 
 export interface ToolbarItemConfig {
 	title?: string;
+	toolbarSeparatorAfter?: boolean;
 }
 
 export class ToolbarItem {
@@ -37,6 +39,8 @@ export class ToolbarItem {
 					<model-component-wrapper  [descriptor]="item.descriptor" [modelStore]="modelStore" >
 					</model-component-wrapper>
 				</div>
+				<div *ngIf="shouldShowToolbarSeparator(item)" class="taskbarSeparator" >
+				</div>
 			</div>
 			</ng-container>
 		</div>
@@ -85,6 +89,13 @@ export default class ToolbarContainer extends ContainerBase<ToolbarItemConfig> i
 		return this.hasTitle(item) && this.isHorizontal();
 	}
 
+	public shouldShowToolbarSeparator(item: ToolbarItem): boolean {
+		if (!item || !item.config) {
+			return false;
+		}
+		return item.config.toolbarSeparatorAfter;
+	}
+
 	private hasTitle(item: ToolbarItem): boolean {
 		return item && item.config && item.config.title !== undefined;
 	}
diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts
index ecbac8cfdc..05b738d01d 100644
--- a/src/sql/workbench/api/node/extHostModelView.ts
+++ b/src/sql/workbench/api/node/extHostModelView.ts
@@ -428,7 +428,8 @@ class ToolbarContainerBuilder extends GenericContainerBuilder<azdata.ToolbarCont
 		let componentWrapper = toolbarComponent.component as ComponentWrapper;
 
 		return new InternalItemConfig(componentWrapper, {
-			title: toolbarComponent.title
+			title: toolbarComponent.title,
+			toolbarSeparatorAfter: toolbarComponent.toolbarSeparatorAfter
 		});
 	}