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>

1 files changed, 75 insertions, 4 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