From 84da9d289b1f21431e2aaffebb036e4d578734b7 Mon Sep 17 00:00:00 2001 From: Kevin Cunnane Date: Thu, 23 Aug 2018 10:54:20 -0700 Subject: [PATCH] Support vertical orientation for toolbar (#2308) * Support vertical orientation for toolbar modelview component * Add tab support for each button * Fix padding and simplify styles --- .../toolbarContainer.component.ts | 50 ++++++++++++++----- .../parts/modelComponents/toolbarLayout.css | 9 +++- src/sql/sqlops.proposed.d.ts | 15 ++++-- .../workbench/api/common/sqlExtHostTypes.ts | 9 ++++ .../workbench/api/node/extHostModelView.ts | 2 +- .../workbench/api/node/sqlExtHost.api.impl.ts | 1 + 6 files changed, 69 insertions(+), 17 deletions(-) diff --git a/src/sql/parts/modelComponents/toolbarContainer.component.ts b/src/sql/parts/modelComponents/toolbarContainer.component.ts index 6b56aea941..f488b38ba2 100644 --- a/src/sql/parts/modelComponents/toolbarContainer.component.ts +++ b/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: ` -
+
-
-
+
+
{{getItemTitle(item)}}
-
+
@@ -48,10 +48,13 @@ export default class ToolbarContainer extends ContainerBase 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 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; + } } diff --git a/src/sql/parts/modelComponents/toolbarLayout.css b/src/sql/parts/modelComponents/toolbarLayout.css index 15e07fa246..db0f09df4c 100644 --- a/src/sql/parts/modelComponents/toolbarLayout.css +++ b/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; diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 77cc5537bb..9cccff12f4 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -75,8 +75,8 @@ declare module 'sqlops' { export interface GroupBuilder extends ContainerBuilder { } - export interface ToolbarBuilder extends ContainerBuilder { - withToolbarItems(components: ToolbarComponent[]): ContainerBuilder; + export interface ToolbarBuilder extends ContainerBuilder { + withToolbarItems(components: ToolbarComponent[]): ContainerBuilder; /** * 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 { } - export interface ToolbarContainer extends Container { + + export enum Orientation { + Horizontal = 'horizontal', + Vertical = 'vertial' + } + + export interface ToolbarLayout { + orientation: Orientation; + } + export interface ToolbarContainer extends Container { } /** diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts index f2bd26b2d2..8a63ad3a1a 100644 --- a/src/sql/workbench/api/common/sqlExtHostTypes.ts +++ b/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; } diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts index 5a61ab7520..c3e9fb95db 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/src/sql/workbench/api/node/extHostModelView.ts @@ -333,7 +333,7 @@ class FormContainerBuilder extends ContainerBuilderImpl implements sqlops.ToolbarBuilder { +class ToolbarContainerBuilder extends ContainerBuilderImpl implements sqlops.ToolbarBuilder { withToolbarItems(components: sqlops.ToolbarComponent[]): sqlops.ContainerBuilder { this._component.itemConfigs = components.map(item => { return this.convertToItemConfig(item); diff --git a/src/sql/workbench/api/node/sqlExtHost.api.impl.ts b/src/sql/workbench/api/node/sqlExtHost.api.impl.ts index aeb0625889..de30d7fa01 100644 --- a/src/sql/workbench/api/node/sqlExtHost.api.impl.ts +++ b/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 };