mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-04 17:23:45 -05:00
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:
@@ -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'];
|
||||
}
|
||||
|
||||
@@ -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()}`;
|
||||
}
|
||||
}
|
||||
|
||||
10
src/sql/workbench/browser/modelComponents/media/image.css
Normal file
10
src/sql/workbench/browser/modelComponents/media/image.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user