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

View File

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