summaryrefslogtreecommitdiffstats
path: root/cds-ui/client/src/app/feature-modules/blueprint
diff options
context:
space:
mode:
authorArundathi Patil <arundpil@in.ibm.com>2019-02-13 13:16:08 +0530
committerIBM602-PC0F1E3C\Arundathi <arundpil@in.ibm.com>2019-02-13 13:16:23 +0530
commit63e3a86f6d3bfce736b4be1372fb109f7003efda (patch)
treea643dc5e8c7ac2e3fe9eb9e28d4928ab6f6bd0ae /cds-ui/client/src/app/feature-modules/blueprint
parentad2884574d3aa59be58de627de9d035bde98eb4d (diff)
Added layout changes for modify template
Layout changes for 2nd stepper Issue-ID: CCSDK-975 Change-Id: Ie238a930545e55b5a3a8d19e8966a19bca3691a7 Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>
Diffstat (limited to 'cds-ui/client/src/app/feature-modules/blueprint')
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html79
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss65
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts5
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
]
})