Support vertical orientation for toolbar (#2308)

* Support vertical orientation for toolbar modelview component

* Add tab support for each button

* Fix padding and simplify styles

src/sql/parts/modelComponents/toolbarContainer.component.ts

@@ -5,35 +5,35 @@
 import 'vs/css!./toolbarLayout';
 
 import {
-	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
-	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
+	Component, Input, Inject, ChangeDetectorRef, forwardRef,
+	ViewChild, ElementRef, OnDestroy, AfterViewInit
 } from '@angular/core';
 
-import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
+import { Orientation, ToolbarLayout } from 'sql/workbench/api/common/sqlExtHostTypes';
+
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
 
-import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
-import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 
 export interface ToolbarItemConfig {
 	title?: string;
 }
 
-class ToolbarItem {
+export class ToolbarItem {
 	constructor(public descriptor: IComponentDescriptor, public config: ToolbarItemConfig) { }
 }
 
 @Component({
 	selector: 'modelview-toolbarContainer',
 	template: `
-		<div #container *ngIf="items" class="modelview-toolbar-container">
+		<div #container *ngIf="items" [class]="toolbarClass" >
 			<ng-container *ngFor="let item of items">
-			<div class="modelview-toolbar-item" >
-				<div *ngIf="hasTitle(item)" class="modelview-toolbar-title" >
+			<div class="modelview-toolbar-item" [title]="getItemTitle(item)" [style.paddingTop]="paddingTop" tabindex="0">
+				<div *ngIf="shouldShowTitle(item)" class="modelview-toolbar-title" >
 					{{getItemTitle(item)}}
 				</div>
-				<div  class="modelview-toolbar-component">
+				<div class="modelview-toolbar-component">
 					<model-component-wrapper  [descriptor]="item.descriptor" [modelStore]="modelStore" >
 					</model-component-wrapper>
 				</div>
@@ -48,10 +48,13 @@ export default class ToolbarContainer extends ContainerBase<ToolbarItemConfig> i
 
 	@ViewChild('container', { read: ElementRef }) private _container: ElementRef;
 
+	private _orientation: Orientation;
+
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
 		super(changeRef);
+		this._orientation = Orientation.Horizontal;
 	}
 
 	ngOnInit(): void {
@@ -67,16 +70,39 @@ export default class ToolbarContainer extends ContainerBase<ToolbarItemConfig> i
 
 	/// IComponent implementation
 
-	public setLayout(layout: any): void {
+	public setLayout(layout: ToolbarLayout): void {
+		this._orientation = layout.orientation ? layout.orientation : Orientation.Horizontal;
 		this.layout();
 	}
 
-	private getItemTitle(item: ToolbarItem): string {
+	public getItemTitle(item: ToolbarItem): string {
 		let itemConfig = item.config;
 		return itemConfig ? itemConfig.title : '';
 	}
 
+	public shouldShowTitle(item: ToolbarItem): boolean {
+		return this.hasTitle(item) && this.isHorizontal();
+	}
+
 	private hasTitle(item: ToolbarItem): boolean {
 		return item && item.config && item.config.title !== undefined;
 	}
+
+	public get paddingTop(): string {
+		return this.isHorizontal() ? '' : '10px';
+	}
+
+	public get toolbarClass(): string {
+		let classes = ['modelview-toolbar-container'];
+		if (this.isHorizontal()) {
+			classes.push('toolbar-horizontal');
+		} else {
+			classes.push('toolbar-vertical');
+		}
+		return classes.join(' ');
+	}
+
+	private isHorizontal(): boolean {
+		return this._orientation === Orientation.Horizontal;
+	}
 }

src/sql/parts/modelComponents/toolbarLayout.css

@@ -5,17 +5,24 @@
 
 .modelview-toolbar-container {
 	display: flex;
-	padding: 15px;
 	justify-content: flex-start;
 	line-height: 1.4em;
 	white-space: nowrap;
 	flex-wrap: wrap;
+}
+
+.modelview-toolbar-container.toolbar-horizontal {
+	flex-direction: row;
 	border-bottom-width: .5px;
 	border-bottom-style: solid;
 	box-sizing: border-box;
 	border-bottom-color: rgba(128, 128, 128, 0.35);
 }
 
+.modelview-toolbar-container.toolbar-vertical {
+	flex-direction: column;
+}
+
 .modelview-toolbar-container .modelview-toolbar-item {
 	flex: 0 0;
 	flex-direction: row;

src/sql/sqlops.proposed.d.ts

@@ -75,8 +75,8 @@ declare module 'sqlops' {
 	export interface GroupBuilder extends ContainerBuilder<GroupContainer, GroupLayout, GroupItemLayout> {
 	}
 
-	export interface ToolbarBuilder extends ContainerBuilder<ToolbarContainer, any, any> {
-		withToolbarItems(components: ToolbarComponent[]): ContainerBuilder<ToolbarContainer, any, any>;
+	export interface ToolbarBuilder extends ContainerBuilder<ToolbarContainer, ToolbarLayout, any> {
+		withToolbarItems(components: ToolbarComponent[]): ContainerBuilder<ToolbarContainer, ToolbarLayout, any>;
 
 		/**
 		 * Creates a collection of child components and adds them all to this container
@@ -307,7 +307,16 @@ declare module 'sqlops' {
 	export interface GroupContainer extends Container<GroupLayout, GroupItemLayout> {
 	}
 
-	export interface ToolbarContainer extends Container<any, any> {
+
+	export enum Orientation {
+		Horizontal = 'horizontal',
+		Vertical = 'vertial'
+	}
+
+	export interface ToolbarLayout {
+		orientation: Orientation;
+	}
+	export interface ToolbarContainer extends Container<ToolbarLayout, any> {
 	}
 
 	/**

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -285,6 +285,15 @@ export enum CardType {
 	Details = 'Details'
 }
 
+export enum Orientation {
+	Horizontal = 'horizontal',
+	Vertical = 'vertial'
+}
+
+export interface ToolbarLayout {
+	orientation: Orientation;
+}
+
 export class TreeComponentItem extends TreeItem {
 	checked?: boolean;
 }

src/sql/workbench/api/node/extHostModelView.ts

@@ -333,7 +333,7 @@ class FormContainerBuilder extends ContainerBuilderImpl<sqlops.FormContainer, sq
 	}
 }
 
-class ToolbarContainerBuilder extends ContainerBuilderImpl<sqlops.ToolbarContainer, any, any> implements sqlops.ToolbarBuilder {
+class ToolbarContainerBuilder extends ContainerBuilderImpl<sqlops.ToolbarContainer, sqlops.ToolbarLayout, any> implements sqlops.ToolbarBuilder {
 	withToolbarItems(components: sqlops.ToolbarComponent[]): sqlops.ContainerBuilder<sqlops.ToolbarContainer, any, any> {
 		this._component.itemConfigs = components.map(item => {
 			return this.convertToItemConfig(item);

src/sql/workbench/api/node/sqlExtHost.api.impl.ts

@@ -424,6 +424,7 @@ export function createApiFactory(
 				ui: ui,
 				StatusIndicator: sqlExtHostTypes.StatusIndicator,
 				CardType: sqlExtHostTypes.CardType,
+				Orientation: sqlExtHostTypes.Orientation,
 				SqlThemeIcon: sqlExtHostTypes.SqlThemeIcon,
 				TreeComponentItem: sqlExtHostTypes.TreeComponentItem
 			};