`
})
-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
((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((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((properties, value) => { properties.alt = value; }, newValue);
- }
-
- public get alt(): string {
- return this.getPropertyOrDefault((props) => props.alt, '');
+ /**
+ * Helper to get the size string for the background-size CSS property
+ */
+ private getImageSize(): string {
+ return `${this.getIconWidth()} ${this.getIconHeight()}`;
}
}
diff --git a/src/sql/workbench/browser/modelComponents/media/image.css b/src/sql/workbench/browser/modelComponents/media/image.css
new file mode 100644
index 0000000000..1aa4fb658b
--- /dev/null
+++ b/src/sql/workbench/browser/modelComponents/media/image.css
@@ -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;
+}