diff options
Diffstat (limited to 'cds-ui/client/src/app/feature-modules/blueprint/modify-template')
3 files changed, 143 insertions, 6 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html index f9cb8234b..c41bdafb7 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html @@ -18,8 +18,79 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ --> -<p> - modify-template works! -</p> -<router-outlet></router-outlet> +<div class="modifyTemp"> + <div class="outerDiv divone"> + <mat-accordion> + <mat-expansion-panel> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Node types + </mat-panel-title> + </mat-expansion-panel-header> + <div class="flex-container"> + <div class="item-box" *ngFor="let item of todo" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Policy + </mat-panel-title> + </mat-expansion-panel-header> + <div class="flex-container"> + <div class="item-box">Policy 1</div> + <div class="item-box">Policy 1</div> + <div class="item-box">Policy 1</div> + </div> + </mat-expansion-panel> + </mat-accordion> + </div> + + + <div class="outerDiv divtwo" (click)="on = !on" ondrop="dropcalled(event)" ondragover="allowDrop(event)" id="svgDiv"> + <!-- <canvas class="cnv" height="500"> --> + <!-- <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[pendingList,reviewList]" + style="height: 100%;width: 100%" (cdkDropListDropped)="drop($event)"> --> + <!-- <canvas id="canvasArea" class="cnv" height="500" width="500" (click)="selected($event)"> --> + <!-- <div class="item-box" *ngFor="let item of done" cdkDrag>{{item}}</div> --> + <!-- </canvas> --> + <!-- </div> --> + <!-- </canvas> --> + <!-- <svg id="svgArea" width="1000px" height="100%" style="background-color: #C0C0C0"> --> + <!-- <rect x="0" y="0" width="300" height="200" fill="yellow"></rect> --> + <!-- </svg> --> + </div> + + + <div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)"> + <div *ngFor="let item of list" cdkDrag>{{ item }}</div> + </div> + + <div *ngIf="on" id="overlay" class="outerDiv divThree"> + <mat-accordion style="width: 100%"> + + <mat-expansion-panel> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Properties + </mat-panel-title> + </mat-expansion-panel-header> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Interface + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + </mat-accordion> + </div> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss index 22941b5fa..1ddb2559e 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss @@ -1,7 +1,7 @@ /* ============LICENSE_START========================================== =================================================================== -Copyright (C) 2018 IBM Intellectual Property. All rights reserved. +Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved. =================================================================== Unless otherwise specified, all software contained herein is licensed @@ -17,4 +17,65 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ -*/
\ No newline at end of file +*/ + +.outerDiv { + display: flex; + // align-items: center; + // justify-content: center; + margin: 1px; + padding: 16px; + border-radius: 8px; + } + + .divone { + height: 100%; + width: 18%; + background-color: #D7D1D1; + } +.divtwo { + height: 100%; + width: 100%; + background-color: #D7D1D1; +} +.divThree{ + width: 30%; + height: 100%; + background-color: #D7D1D1; +} + +.flex-container { + display: flex; + flex-wrap: wrap; +} + +.flex-container > div { + background-color: #f1f1f1; + width: 53px; + margin: 2px; + text-align: center; + line-height: 53px; + font-size: 13px; +} +.cnv +{ + background-image: url('http://i.imgur.com/M3PFd.png'); + background-position: 39px 32px; + background-repeat: repeat; + width: 100% +} + +.modifyTemp { + display: flex; + flex-direction: row; + height: 524px; + width: 100% +} + +.mat-expansion-panel-header{ + background-color: #3f51b5 !important; +} + +.mat-expansion-panel-header-title { + color: white !important; +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts index f502de4b1..eed926b7f 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts @@ -20,8 +20,11 @@ limitations under the License. */ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { CdkTableModule } from '@angular/cdk/table'; + import { ModifyTemplateComponent } from './modify-template.component'; import { ModifyTemplateRoutingModule } from './modify-template-routing.module'; +import { AppMaterialModule } from '../../../common/modules/app-material.module'; @NgModule({ declarations: [ @@ -32,6 +35,8 @@ import { ModifyTemplateRoutingModule } from './modify-template-routing.module'; ], imports: [ CommonModule, + CdkTableModule, + AppMaterialModule, ModifyTemplateRoutingModule ] }) |