diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/tile')
| -rw-r--r-- | catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts (renamed from catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts) | 6 | ||||
| -rw-r--r-- | catalog-ui/src/app/ng2/components/ui/tile/tile.component.html | 43 | ||||
| -rw-r--r-- | catalog-ui/src/app/ng2/components/ui/tile/tile.component.less | 15 | ||||
| -rw-r--r-- | catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts | 34 |
4 files changed, 89 insertions, 9 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts b/catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts index 55b34400d6..5dec67e495 100644 --- a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts +++ b/catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts @@ -3,13 +3,13 @@ import { BrowserModule } from '@angular/platform-browser'; import { TileComponent } from './tile.component'; import { GlobalPipesModule } from "../../../pipes/global-pipes.module"; import { TooltipModule } from "../tooltip/tooltip.module"; -import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multiline-ellipsis.module"; +import {SdcUiComponentsModule} from "onap-ui-angular"; @NgModule({ - imports: [BrowserModule, GlobalPipesModule, TooltipModule, MultilineEllipsisModule], + imports: [BrowserModule, GlobalPipesModule, SdcUiComponentsModule, TooltipModule], declarations: [TileComponent], exports: [TileComponent], entryComponents: [TileComponent] }) -export class TileModule { } +export class SdcTileModule { } diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html index 018384db1f..239053e9f8 100644 --- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html +++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html @@ -23,15 +23,21 @@ <div class='sdc-tile-content' data-tests-id="dashboard-Elements" (click)="tileClicked()"> <div class='sdc-tile-content-icon'> - <div [ngClass]="[component.iconSprite, component.icon]" [ngClass]="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}" + <div [ngClass]="[component.iconSprite, component.icon]" + [ngClass]="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}" [attr.data-tests-id]="component.name"></div> </div> <div class='sdc-tile-content-info'> - <div class="sdc-tile-info-line title" [attr.data-tests-id]="component.name | resourceName" [tooltip]="component.name | resourceName" [tooltipDisabled]="!hasEllipsis"> - <multiline-ellipsis className="w-sdc-tile-multiline-ellipsis" [lines]="3" (hasEllipsisChanged)="hasEllipsis = $event">{{component.name | resourceName}}</multiline-ellipsis> + <div class="sdc-tile-info-line title" [attr.data-tests-id]="component.name | resourceName" + [tooltip]="component.name | resourceName" [tooltipDisabled]="!hasEllipsis"> + <multiline-ellipsis className="w-sdc-tile-multiline-ellipsis" [lines]="3" + (hasEllipsisChanged)="hasEllipsis = $event">{{component.name | resourceName}} + </multiline-ellipsis> + </div> + <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V + {{component.version}} </div> - <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V {{component.version}}</div> </div> </div> @@ -42,3 +48,32 @@ </div> </div> + +<!--<sdc-tile>--> +<!--<sdc-tile-header>--> +<!--<div [ngClass]="{'blue': component.isService(), 'purple': component.isResource()}">{{component.isResource() ?--> +<!--component.getComponentSubType(): 'S' }}--> +<!--</div>--> +<!--</sdc-tile-header>--> +<!--<sdc-tile-content>--> +<!--<div class='sdc-tile-content-icon blue'>--> +<!--<svg-icon--> +<!--[type]="catalogIcon.type"--> +<!--[name]="catalogIcon.iconName"--> +<!--[size]="catalogIcon.size"--> +<!--[mode]="catalogIcon.color"--> +<!--[backgroundShape]="catalogIcon.shape"--> +<!--[backgroundColor]="catalogIcon.backgroundColor"--> +<!--[disabled]="false"--> +<!-->--> +<!--</svg-icon>--> +<!--</div>--> +<!--<div class="sdc-tile-content-info">--> +<!--<span class="sdc-tile-info-line title">{{component.name | resourceName}}</span>--> +<!--<div class="sdc-tile-info-line subtitle">{{'V'+ component.version}}</div>--> +<!--</div>--> +<!--</sdc-tile-content>--> +<!--<sdc-tile-footer>--> +<!--<span class="sdc-tile-footer-cell">{{component.getStatus(sdcMenu)}}</span>--> +<!--</sdc-tile-footer>--> +<!--</sdc-tile>-->
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less index e69de29bb2..febf46e99c 100644 --- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less +++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less @@ -0,0 +1,15 @@ + + +//This was done as a fix for the wrong dispaly that was in every ui-tile. +//All other styles located in mail.less + +.sdc-tile { + display: block; + + .sdc-tile-content { + overflow: visible; + height: 80%; + .sdc-tile-content-icon { + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts index b6f63584be..f5d9e88934 100644 --- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts @@ -1,6 +1,8 @@ import {Component, Input, Output, Inject, EventEmitter} from '@angular/core'; import {Component as ComponentModel} from 'app/models'; import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config"; +import {ElementIcon} from "../sdc-element-icon/sdc-element-icon.component"; +import {ComponentType, ResourceType, SdcElementType} from "../../../../utils/constants"; @Component({ selector: 'ui-tile', @@ -10,14 +12,42 @@ import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config"; export class TileComponent { @Input() public component: ComponentModel; @Output() public onTileClick: EventEmitter<ComponentModel>; - + public catalogIcon: ElementIcon; public hasEllipsis: boolean; - constructor(@Inject(SdcMenuToken) public sdcMenu:IAppMenu) { + constructor(@Inject(SdcMenuToken) public sdcMenu: IAppMenu) { this.onTileClick = new EventEmitter<ComponentModel>(); this.hasEllipsis = false; } + ngOnInit(): void { + switch (this.component.componentType) { + + case ComponentType.SERVICE: + if (this.component.icon === 'defaulticon') { + this.catalogIcon = new ElementIcon(this.component.icon, "services_60", 'lightBlue', 'white'); + } else { + this.catalogIcon = new ElementIcon(this.component.icon, "services_60", '', 'lightBlue'); + } + break; + case ComponentType.RESOURCE: + switch (this.component.getComponentSubType()) { + case ResourceType.CP: + case ResourceType.VL: + this.catalogIcon = new ElementIcon(this.component.icon, "resources_24", "purple", "white", "circle", 'medium'); + break; + default: + if (this.component.icon === 'defaulticon') { + this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", "purple", "white", "circle", 'x_large'); + } else { + this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", '', "error"); + } + + } + + } + } + public tileClicked() { this.onTileClick.emit(this.component); } |