From 628fd8d74d94f36313bb6e1528e6ff69dc026df0 Mon Sep 17 00:00:00 2001 From: Amir Omidi Date: Mon, 24 Feb 2020 16:53:42 -0800 Subject: [PATCH] Separator component (#9310) * Separator component --- .../agent/src/dialogs/operatorDialog.ts | 6 +++ .../src/test/views/externalLanguages/utils.ts | 3 +- src/sql/azdata.proposed.d.ts | 4 ++ .../base/browser/ui/separator/separator.ts | 17 +++++++ .../platform/dashboard/browser/interfaces.ts | 3 +- .../workbench/api/common/extHostModelView.ts | 13 +++++ .../workbench/api/common/sqlExtHostTypes.ts | 3 +- .../modelComponents/separator.component.ts | 50 +++++++++++++++++++ .../browser/components.contribution.ts | 4 ++ 9 files changed, 100 insertions(+), 3 deletions(-) create mode 100644 src/sql/base/browser/ui/separator/separator.ts create mode 100644 src/sql/workbench/browser/modelComponents/separator.component.ts diff --git a/extensions/agent/src/dialogs/operatorDialog.ts b/extensions/agent/src/dialogs/operatorDialog.ts index e743145fa6..b51e847c31 100644 --- a/extensions/agent/src/dialogs/operatorDialog.ts +++ b/extensions/agent/src/dialogs/operatorDialog.ts @@ -361,9 +361,15 @@ export class OperatorDialog extends AgentDialog { }, { component: pagerFridayCheckboxContainer, title: '' + }, { + component: view.modelBuilder.separator().component(), + title: '' }, { component: pagerSaturdayCheckboxContainer, title: '' + }, { + component: view.modelBuilder.separator().component(), + title: '' }, { component: pagerSundayCheckboxContainer, title: '' diff --git a/extensions/machine-learning-services/src/test/views/externalLanguages/utils.ts b/extensions/machine-learning-services/src/test/views/externalLanguages/utils.ts index a7e9f990b3..a7fff7f7a4 100644 --- a/extensions/machine-learning-services/src/test/views/externalLanguages/utils.ts +++ b/extensions/machine-learning-services/src/test/views/externalLanguages/utils.ts @@ -169,7 +169,8 @@ export function createContext(): TestContext { toolbarContainer: undefined!, loadingComponent: () => loadingBuilder, fileBrowserTree: undefined!, - hyperlink: undefined! + hyperlink: undefined!, + separator: undefined! } }; let tab: azdata.window.DialogTab = { diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index fdcaf86b59..f040cab6a8 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/src/sql/azdata.proposed.d.ts @@ -126,6 +126,7 @@ declare module 'azdata' { export interface ModelBuilder { radioCardGroup(): ComponentBuilder; + separator(): ComponentBuilder; } export interface RadioCard { @@ -160,6 +161,9 @@ declare module 'azdata' { onSelectionChanged: vscode.Event; } + export interface SeparatorComponent extends Component { + } + export interface DeclarativeTableProperties extends ComponentProperties { } diff --git a/src/sql/base/browser/ui/separator/separator.ts b/src/sql/base/browser/ui/separator/separator.ts new file mode 100644 index 0000000000..8cc7601a29 --- /dev/null +++ b/src/sql/base/browser/ui/separator/separator.ts @@ -0,0 +1,17 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import { Disposable } from 'vs/base/common/lifecycle'; + +export class Separator extends Disposable { + private readonly element: HTMLHRElement; + + constructor(container: HTMLElement) { + super(); + + this.element = document.createElement('hr'); + container.append(this.element); + } +} diff --git a/src/sql/platform/dashboard/browser/interfaces.ts b/src/sql/platform/dashboard/browser/interfaces.ts index 21e03a304e..98aa754b7b 100644 --- a/src/sql/platform/dashboard/browser/interfaces.ts +++ b/src/sql/platform/dashboard/browser/interfaces.ts @@ -125,5 +125,6 @@ export enum ModelComponentTypes { Dom, Hyperlink, Image, - RadioCardGroup + RadioCardGroup, + Separator } diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts index 65289bf651..31d1bb085c 100644 --- a/src/sql/workbench/api/common/extHostModelView.ts +++ b/src/sql/workbench/api/common/extHostModelView.ts @@ -163,6 +163,13 @@ class ModelBuilderImpl implements azdata.ModelBuilder { return builder; } + separator(): azdata.ComponentBuilder { + let id = this.getNextComponentId(); + let builder: ComponentBuilderImpl = this.getComponentBuilder(new SeparatorWrapper(this._proxy, this._handle, id), id); + this._componentBuilders.set(id, builder); + return builder; + } + dropDown(): azdata.ComponentBuilder { let id = this.getNextComponentId(); let builder: ComponentBuilderImpl = this.getComponentBuilder(new DropDownWrapper(this._proxy, this._handle, id), id); @@ -1534,6 +1541,12 @@ class FileBrowserTreeComponentWrapper extends ComponentWrapper implements azdata } } +class SeparatorWrapper extends ComponentWrapper implements azdata.SeparatorComponent { + constructor(proxy: MainThreadModelViewShape, handle: number, id: string) { + super(proxy, handle, ModelComponentTypes.Separator, id); + } +} + class DivContainerWrapper extends ComponentWrapper implements azdata.DivContainer { constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) { super(proxy, handle, type, id); diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts index 430329e9d2..0d84db292c 100644 --- a/src/sql/workbench/api/common/sqlExtHostTypes.ts +++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts @@ -173,7 +173,8 @@ export enum ModelComponentTypes { Dom, Hyperlink, Image, - RadioCardGroup + RadioCardGroup, + Separator } export enum ColumnSizingMode { diff --git a/src/sql/workbench/browser/modelComponents/separator.component.ts b/src/sql/workbench/browser/modelComponents/separator.component.ts new file mode 100644 index 0000000000..726d92bfce --- /dev/null +++ b/src/sql/workbench/browser/modelComponents/separator.component.ts @@ -0,0 +1,50 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import { + Component, Input, Inject, ChangeDetectorRef, forwardRef, + ViewChild, ElementRef, OnDestroy, AfterViewInit +} from '@angular/core'; + + +import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase'; +import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces'; +import { Separator } from 'sql/base/browser/ui/separator/separator'; + +@Component({ + selector: `modelview-separator`, + template: ` +
+ ` +}) +export default class SeparatorComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { + private _separator: Separator; + @Input() descriptor: IComponentDescriptor; + @Input() modelStore: IModelStore; + + @ViewChild('separator', { read: ElementRef }) private _separatorContainer: ElementRef; + constructor( + @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, + @Inject(forwardRef(() => ElementRef)) el: ElementRef, + ) { + super(changeRef, el); + } + + ngOnInit(): void { + this.baseInit(); + } + + ngAfterViewInit(): void { + if (this._separatorContainer) { + this._separator = new Separator(this._separatorContainer.nativeElement); + this._register(this._separator); + } + } + + setLayout(layout: any): void { + // Change look and feel + this.layout(); + } +} diff --git a/src/sql/workbench/contrib/modelView/browser/components.contribution.ts b/src/sql/workbench/contrib/modelView/browser/components.contribution.ts index 230ccddc37..987cadc3a6 100644 --- a/src/sql/workbench/contrib/modelView/browser/components.contribution.ts +++ b/src/sql/workbench/contrib/modelView/browser/components.contribution.ts @@ -30,6 +30,7 @@ import { registerComponentType } from 'sql/platform/dashboard/browser/modelCompo import HyperlinkComponent from 'sql/workbench/browser/modelComponents/hyperlink.component'; import SplitViewContainer from 'sql/workbench/browser/modelComponents/splitviewContainer.component'; import RadioCardGroup from 'sql/workbench/browser/modelComponents/radioCardGroup.component'; +import SeparatorComponent from 'sql/workbench/browser/modelComponents/separator.component'; import { ModelComponentTypes } from 'sql/platform/dashboard/browser/interfaces'; export const DIV_CONTAINER = 'div-container'; @@ -110,3 +111,6 @@ registerComponentType(HYPERLINK_COMPONENT, ModelComponentTypes.Hyperlink, Hyperl export const RADIOCARDGROUP_COMPONENT = 'radiocardgroup-component'; registerComponentType(RADIOCARDGROUP_COMPONENT, ModelComponentTypes.RadioCardGroup, RadioCardGroup); + +export const SEPARATOR_COMPONENT = 'separator-component'; +registerComponentType(SEPARATOR_COMPONENT, ModelComponentTypes.Separator, SeparatorComponent);