More updates to HDFS Manage Access dialog (#7611)

* Add display property to ModelView components

* Update DisplayType property in sqlops as well

* More updates to HDFS Manage Access dialog

* More updates to HDFS Manage Access dialog
This commit is contained in:
Charles Gagnon
2019-10-10 10:57:38 -07:00
committed by GitHub
parent 93c9426f25
commit 543e3e2c09
17 changed files with 569 additions and 235 deletions

View File

@@ -693,6 +693,34 @@ class ComponentWrapper implements azdata.Component {
}
}
class ComponentWithIconWrapper extends ComponentWrapper {
constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
super(proxy, handle, type, id);
}
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {
return this.properties['iconPath'];
}
public set iconPath(v: string | URI | { light: string | URI; dark: string | URI }) {
this.setProperty('iconPath', v);
}
public get iconHeight(): string | number {
return this.properties['iconHeight'];
}
public set iconHeight(v: string | number) {
this.setProperty('iconHeight', v);
}
public get iconWidth(): string | number {
return this.properties['iconWidth'];
}
public set iconWidth(v: string | number) {
this.setProperty('iconWidth', v);
}
}
class ContainerWrapper<T, U> extends ComponentWrapper implements azdata.Container<T, U> {
constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
@@ -1152,40 +1180,12 @@ class TextComponentWrapper extends ComponentWrapper implements azdata.TextCompon
}
}
class ImageComponentWrapper extends ComponentWrapper implements azdata.ImageComponentProperties {
class ImageComponentWrapper extends ComponentWithIconWrapper implements azdata.ImageComponentProperties {
constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
super(proxy, handle, ModelComponentTypes.Image, id);
this.properties = {};
}
public get src(): string {
return this.properties['src'];
}
public set src(v: string) {
this.setProperty('src', v);
}
public get alt(): string {
return this.properties['alt'];
}
public set alt(v: string) {
this.setProperty('alt', v);
}
public get height(): number | string {
return this.properties['height'];
}
public set height(v: number | string) {
this.setProperty('height', v);
}
public get width(): number | string {
return this.properties['width'];
}
public set width(v: number | string) {
this.setProperty('width', v);
}
}
class TableComponentWrapper extends ComponentWrapper implements azdata.TableComponent {
@@ -1391,7 +1391,7 @@ class ListBoxWrapper extends ComponentWrapper implements azdata.ListBoxComponent
}
}
class ButtonWrapper extends ComponentWrapper implements azdata.ButtonComponent {
class ButtonWrapper extends ComponentWithIconWrapper implements azdata.ButtonComponent {
constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
super(proxy, handle, ModelComponentTypes.Button, id);
@@ -1406,27 +1406,6 @@ class ButtonWrapper extends ComponentWrapper implements azdata.ButtonComponent {
this.setProperty('label', v);
}
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {
return this.properties['iconPath'];
}
public set iconPath(v: string | URI | { light: string | URI; dark: string | URI }) {
this.setProperty('iconPath', v);
}
public get iconHeight(): string | number {
return this.properties['iconHeight'];
}
public set iconHeight(v: string | number) {
this.setProperty('iconHeight', v);
}
public get iconWidth(): string | number {
return this.properties['iconWidth'];
}
public set iconWidth(v: string | number) {
this.setProperty('iconWidth', v);
}
public get title(): string {
return this.properties['title'];
}

View File

@@ -2,25 +2,25 @@
* 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!./media/image';
import {
Component, Input, Inject, ChangeDetectorRef, forwardRef,
OnDestroy, AfterViewInit, ElementRef
OnDestroy, AfterViewInit, ElementRef, ViewChild
} from '@angular/core';
import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import * as DOM from 'vs/base/browser/dom';
import { IComponent, IComponentDescriptor, IModelStore } from 'sql/workbench/browser/modelComponents/interfaces';
import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
@Component({
selector: 'modelview-image',
template: `
<img [style.width]="getWidth()" [style.height]="getHeight()" [src]="src" [alt]="alt">`
<div #imageContainer [style.title]="title" [style.width]="getWidth()" [style.height]="getHeight()" [style.background-size]="getImageSize()">`
})
export default class ImageComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class ImageComponent extends ComponentWithIconBase implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
@ViewChild('imageContainer', { read: ElementRef }) imageContainer: ElementRef;
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@@ -45,19 +45,27 @@ export default class ImageComponent extends ComponentBase implements IComponent,
this.layout();
}
public set src(newValue: string) {
this.setPropertyFromUI<azdata.ImageComponentProperties, string>((properties, value) => { properties.src = value; }, newValue);
public setProperties(properties: { [key: string]: any; }): void {
super.setProperties(properties);
this.updateIcon();
this._changeRef.detectChanges();
}
public get src(): string {
return this.getPropertyOrDefault<azdata.ImageComponentProperties, string>((props) => props.src, '');
protected updateIcon() {
if (this.iconPath) {
if (!this._iconClass) {
super.updateIcon();
DOM.addClasses(this.imageContainer.nativeElement, this._iconClass, 'icon');
} else {
super.updateIcon();
}
}
}
public set alt(newValue: string) {
this.setPropertyFromUI<azdata.ImageComponentProperties, string>((properties, value) => { properties.alt = value; }, newValue);
}
public get alt(): string {
return this.getPropertyOrDefault<azdata.ImageComponentProperties, string>((props) => props.alt, '');
/**
* Helper to get the size string for the background-size CSS property
*/
private getImageSize(): string {
return `${this.getIconWidth()} ${this.getIconHeight()}`;
}
}

View File

@@ -0,0 +1,10 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
modelview-image div.icon {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}