diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance')
3 files changed, 146 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html new file mode 100644 index 0000000000..d36b7aec6f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html @@ -0,0 +1,8 @@ +<div class="zone-child mode-{{config.mode}}" [class.locked]="activeInstanceMode > MODE.HOVER" + (mouseenter)="setMode(MODE.HOVER)" (mouseleave)="setMode(MODE.NONE)" (click)="setMode(MODE.SELECTED)"> + <div class="zone-child__handle" (click)="setMode(MODE.TAG, $event)">+</div> + <div class="zone-child__body"> + <div class="zone-child__body-content">{{config.count || defaultIconText}}</div> + </div> + <div class="zone-child__name">{{config.name}}</div> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less new file mode 100644 index 0000000000..a1d56df96e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less @@ -0,0 +1,110 @@ +.zone-child { + position:relative; + width:76px; + margin:5px; + + .zone-child__handle { + display:none; + position:absolute; + right:4px; + top:10px; + width:22px; + height:22px; + cursor:pointer; + border: solid white 1px; + border-radius: 2px; + text-align: center; + font-weight:bold; + } + + .zone-child__body { + margin:0 auto; + width:43px; + height:43px; + display:flex; + padding:3px; + + } + + .zone-child__body-content { + border-radius: 2px; + flex:1; + color:white; + font-size:18px; + text-align:center; + display:flex; + align-items: center; + justify-content: center; + } + + .zone-child__name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + text-align:center; + } + /* Dynamic classes below */ + + &.mode-1, &.mode-2, &.mode-3 { //hover, selected, tag + .zone-child__body { + border:solid 2px; + border-radius: 2px; + padding:2px; + cursor:pointer; + } + .zone-child__handle{ + display:block; + cursor:pointer; + } + } + + &.locked { + cursor: default; + } + + // &:not(.locked):hover .zone-child__handle{ + // display:block; + // } + .zone-child__body { + cursor: default; + } + &.mode-3 .zone-child__handle { + width:24px; + height:24px; + right:3px; + top:9px; + display:block; + background-image: linear-gradient(-140deg, #009E98 0%, #97D648 100%); + border: 2px solid #FFFFFF; + border-radius: 2px; + box-shadow: inset 2px -2px 3px 0 #007A3E; + cursor: pointer; + } + +} +.sdc-canvas-zone.group-zone { + .zone-child__handle { + background-color:#009FDB; + } + .zone-child__body { + border-color:#009FDB; + } + .zone-child__body-content { + background: #009FDB; + } +} + +.sdc-canvas-zone.policy-zone { + .zone-child__handle { + background-color:#0568AE; + } + .zone-child__body { + border-color:#1287D9; + .zone-child__body-content { + background: #1287D9; + } + } + .zone-child__body-content { + background: #0568AE; + } +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts new file mode 100644 index 0000000000..8057ae908a --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts @@ -0,0 +1,28 @@ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; +import { ZoneInstanceConfig, ZoneInstanceMode } from 'app/models/graph/zones/zone-child'; + +@Component({ + selector: 'zone-instance', + templateUrl: './zone-instance.component.html', + styleUrls: ['./zone-instance.component.less'], + encapsulation: ViewEncapsulation.None +}) +export class ZoneInstanceComponent { + + @Input() config:ZoneInstanceConfig; + @Input() defaultIconText:string; + @Input() isActive:boolean; + @Input() activeInstanceMode: ZoneInstanceMode; + @Output() modeChange: EventEmitter<any> = new EventEmitter<any>(); + private MODE = ZoneInstanceMode; + + private setMode = (mode:ZoneInstanceMode, event?:any):void => { + if(!this.isActive || this.isActive && mode == ZoneInstanceMode.TAG){ //when active, do not allow hover/select mode toggling + this.modeChange.emit({newMode: mode, instance: this.config}); + } + if(event){ + event.stopPropagation(); + } + } + +}
\ No newline at end of file |