ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-27 01:25:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Support view model toolbar (#1533)

Browse Source 
* support view model toolbar

* add EULA

* formatting

* address comment
This commit is contained in:
Abbie Petchtes
2018-06-04 10:11:32 -07:00
committed by GitHub
parent a15c315a1c
commit 9ad4ec6464
7 changed files with 240 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/parts/modelComponents/components.contribution.ts
View File

@@ -5,6 +5,7 @@
import FlexContainer from './flexContainer.component';
import FormContainer from './formContainer.component';
import ToolbarContainer from './toolbarContainer.component';
import GroupContainer from './groupContainer.component';
import CardComponent from './card.component';
import InputBoxComponent from './inputbox.component';
@@ -23,6 +24,9 @@ registerComponentType(FLEX_CONTAINER, ModelComponentTypes.FlexContainer, FlexCon
export const FORM_CONTAINER = 'form-container';
registerComponentType(FORM_CONTAINER, ModelComponentTypes.Form, FormContainer);
export const TOOLBAR_CONTAINER = 'toolbar-container';
registerComponentType(TOOLBAR_CONTAINER, ModelComponentTypes.Toolbar, ToolbarContainer);
export const GROUP_CONTAINER = 'group-container';
registerComponentType(GROUP_CONTAINER, ModelComponentTypes.Group, GroupContainer);

91
src/sql/parts/modelComponents/toolbarContainer.component.ts Normal file
View File

@@ -0,0 +1,91 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./toolbarLayout';
import {
Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
} from '@angular/core';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } 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 {
constructor(public descriptor: IComponentDescriptor, public config: ToolbarItemConfig) { }
}
@Component({
selector: 'modelview-toolbarContainer',
template: `
<div #container *ngIf="items" class="modelview-toolbar-container">
<ng-container *ngFor="let item of items">
<div class="modelview-toolbar-item" >
<div *ngIf="hasTitle(item)" class="modelview-toolbar-title" >
{{getItemTitle(item)}}
</div>
<div class="modelview-toolbar-component">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" >
</model-component-wrapper>
</div>
</div>
</ng-container>
</div>
`
})
export default class ToolbarContainer extends ContainerBase<ToolbarItemConfig> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
@ViewChild('container', { read: ElementRef }) private _container: ElementRef;
constructor(
@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
super(changeRef);
}
ngOnInit(): void {
this.baseInit();
}
ngOnDestroy(): void {
this.baseDestroy();
}
ngAfterViewInit(): void {
}
/// IComponent implementation
public layout(): void {
if (this._componentWrappers) {
this._componentWrappers.forEach(wrapper => {
wrapper.layout();
});
}
}
public setLayout(layout: any): void {
this.layout();
}
private getItemTitle(item: ToolbarItem): string {
let itemConfig = item.config;
return itemConfig ? itemConfig.title : '';
}
private hasTitle(item: ToolbarItem): boolean {
return item && item.config && item.config.title !== undefined;
}
}

45
src/sql/parts/modelComponents/toolbarLayout.css Normal file
View File

@@ -0,0 +1,45 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.modelview-toolbar-container {
display: flex;
padding: 15px;
justify-content: flex-start;
line-height: 1.4em;
white-space: nowrap;
flex-wrap: wrap;
border-bottom-width: .5px;
border-bottom-style: solid;
box-sizing: border-box;
border-bottom-color: rgba(128, 128, 128, 0.35);
}
.modelview-toolbar-container .modelview-toolbar-item {
flex: 0 0;
flex-direction: row;
display: flex;
padding-left: 10px;
}
.modelview-toolbar-container .modelview-toolbar-title {
padding-right: 5px;
font-size: 14px;
cursor: pointer;
margin: auto;
}
.modelview-toolbar-container .modelview-toolbar-component .select-box,
.modelview-toolbar-container .modelview-toolbar-component .monaco-inputbox {
width: 200px;
height: 25px;
}
.modelview-toolbar-container .modelview-toolbar-component button {
height: 25px;
}
.modelview-toolbar-container .modelview-toolbar-component button .monaco-text-button {
padding: 0px
}