diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/sdc-element-icon')
3 files changed, 106 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html new file mode 100644 index 0000000000..fba99ca8b5 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html @@ -0,0 +1,12 @@ +<div class="sdc-element-icon"> + <svg-icon [ngClass]="{'service-proxy': elementType === 'ServiceProxy'}" + [type]="elementIcon.type" + [name]="elementIcon.iconName" + [mode]="elementIcon.color" + [size]="elementIcon.size" + [backgroundShape]="elementIcon.shape" + [backgroundColor]="elementIcon.backgroundColor"></svg-icon> + <span *ngIf="uncertified" class="uncertified-icon-wapper"> + <svg-icon class="element-non-certified" [name]="'alert-circle'" [mode]="'error'"></svg-icon> + </span> +</div> diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less new file mode 100644 index 0000000000..7fd5cbd53e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less @@ -0,0 +1,25 @@ +@import "./../../../../../assets/styles/override"; +.service-proxy { + /deep/.svg-icon.bg-type-circle { + border: 2px solid @sdcui_color_blue; + } +} + +.element-non-certified { + position: absolute; + top: 0.4px; + left: 0.4px; +} +.sdc-element-icon { + position: relative; +} + +.uncertified-icon-wapper{ + height: 17px; + width: 17px; + background-color: white; + border-radius: 50%; + position: absolute; + top: -2px; + left: -1px; +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts new file mode 100644 index 0000000000..baadbd8e02 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts @@ -0,0 +1,69 @@ +import {Component, Input, OnInit} from "@angular/core"; +import {ComponentType, SdcElementType, ResourceType} from "../../../../utils/constants"; + + +export class ElementIcon { + iconName: string; + color: string; + backgroundColor: string; + type: string + shape: string; + size: string; + + constructor(name?: string, type?:string, backgroundColor?:string, color?:string, shape?: string, size?:string) { + this.iconName = name || 'default'; + this.type = type || 'resource_24'; + this.backgroundColor = backgroundColor || 'primary'; + this.color = color || "white"; + this.shape = shape || "circle"; + this.size = size || "x_large"; + } +} + +@Component({ + selector: 'sdc-element-icon', + templateUrl: './sdc-element-icon.component.html', + styleUrls: ['./sdc-element-icon.component.less'] +}) +export class SdcElementIconComponent { + + @Input() iconName: string; + @Input() elementType: string; + @Input() uncertified: boolean = false; + + public elementIcon; + + private createIconForDisplay = () => { + switch (this.elementType) { + + case ComponentType.SERVICE: + this.elementIcon = new ElementIcon(this.iconName, "services_24", "lightBlue"); + break; + case ComponentType.SERVICE_PROXY: + this.elementIcon = new ElementIcon(this.iconName, "services_24", "white", "primary"); + break; + case ResourceType.CONFIGURATION: + this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", "white", 'circle', "medium"); + break; + case SdcElementType.GROUP: + this.elementIcon = new ElementIcon("group", "resources_24", "blue", 'white', 'rectangle'); + break; + case SdcElementType.POLICY: + this.elementIcon = new ElementIcon("policy", "resources_24", "darkBlue2", 'white', 'rectangle'); + break; + case ResourceType.CP: + case ResourceType.VL: + this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", '', '', 'medium'); + break; + default: + this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple"); + } + } + + ngOnChanges():void { + this.createIconForDisplay(); + } +} + + + |