Fix display problems with model view icon components (#1822)

This commit is contained in:
Matt Irvine
2018-07-02 14:03:22 -07:00
committed by GitHub
parent 2926a3cbd8
commit dd02597c3b
2 changed files with 9 additions and 6 deletions

View File

@@ -6,11 +6,11 @@
width: auto;
margin: 15px;
border-width: 1px;
border-style: solid;
border-style: solid;
text-align: left;
vertical-align: top;
box-shadow: rgba(120, 120, 120, 0.75) 0px 0px 6px;
text-align: left;
vertical-align: top;
box-shadow: rgba(120, 120, 120, 0.75) 0px 0px 6px;
}
.model-card.selected {
@@ -68,6 +68,9 @@
display: inline-block;
width: 40px;
height: 40px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.model-card .card-status {

View File

@@ -5,7 +5,7 @@
import {
Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, OnInit, QueryList
ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, OnInit, QueryList, AfterViewInit
} from '@angular/core';
import { IComponent, IComponentDescriptor, IModelStore, IComponentEventArgs, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
@@ -50,6 +50,7 @@ export abstract class ComponentWithIconBase extends ComponentBase {
const iconDark = this.getDarkIconPath(this.iconPath) || icon;
createCSSRule(`.icon.${this._iconClass}`, `background-image: url("${icon}")`);
createCSSRule(`.vs-dark .icon.${this._iconClass}, .hc-black .icon.${this._iconClass}`, `background-image: url("${iconDark}")`);
this._changeRef.detectChanges();
}
}
@@ -97,7 +98,6 @@ export abstract class ComponentWithIconBase extends ComponentBase {
return this.getPropertyOrDefault<sqlops.ComponentWithIcon, number | string>((props) => props.iconWidth, '40px');
}
ngOnDestroy(): void {
if (this._iconClass) {
removeCSSRulesContainingSelector(this._iconClass);