Merge "Modify Template changes"

2 files changed, 57 insertions, 180 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 8397ae9f6..81a1a851e 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,130 +18,58 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 -->
-
-<div class="modifyTemp">
-  <div *ngIf="designerMode" 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 style="display: flex;flex-direction: row">
+  <div style="width: 30em;">
+  <button (click) ="changeView()" style="
+  background-color: #3f51b5;
+  color: white;
+  border-radius: 2em;
+  padding: 0.5em;
+  min-width: 6em;">{{viewText}}</button>
+  </div>
+  <div style="width: 16em">
+      <button style="margin: 0.5em;
+      background-color: #3f51b5;
+      color: white;
+      border-radius: 2em;
+      padding: 0.5em;
+      min-width: 6em;">Save Changes</button>
   </div>
+  <div style="width: 100%;height: 3em;">
+      <div style="margin-left: 38em">
+          <mat-form-field>
+              <select matNativeControl required>
+            <option value="volvo">SDC</option>
+            <option value="saab">CCSDK</option>
+          </select>
+          </mat-form-field>
+          <button style="margin: 0.5em;
+      background-color: #3f51b5;
+      color: white;
+      border-radius: 2em;
+      padding: 0.5em;
+      min-width: 6em;">Deploy</button>
+          <button style="margin: 0.5em;
+      background-color: #3f51b5;
+      color: white;
+      border-radius: 2em;
+      padding: 0.5em;
+      min-width: 6em;">Save</button>
+          <button style="margin: 0.5em;
+      background-color: #3f51b5;
+      color: white;
+      border-radius: 2em;
+      padding: 0.5em;
+      min-width: 6em;">Download</button>
+
+      </div>
+  </div>
+</div> -->
+
 
+<div class="modifyTemp">
   <button class="enrich-btn">Enrichment</button>
   <button (click) ="changeView()" class="toggle-view-btn">{{viewText}}</button>
-
-  <div *ngIf="designerMode" class="outerDiv divtwo" (click)="on = !on" ondrop="dropcalled(event)" ondragover="allowDrop(event)" id="svgDiv">
-    <app-designer *ngIf="designerMode" (onNodeSelect)="on = !on; viewNodeDetails($event)"></app-designer>
-  </div>
-
+  <app-designer *ngIf="designerMode" (onNodeSelect)="on = !on; viewNodeDetails($event)"></app-designer>
   <app-editor class="editor-selector" *ngIf="editorMode"></app-editor>
-
-  <div *ngIf="designerMode && on" id="overlay" class="outerDiv divThree">
-    <mat-accordion style="width: 100%">
-
-        <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
-            <mat-expansion-panel-header style="background-color: #f1f1f1">
-              <mat-panel-title>
-                Type
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-    
-            <div class="item-list">
-              <div class="item-box">vnf-netconf-device</div>
-            </div>
-          </mat-expansion-panel>
-
-      <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-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-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
-        <mat-expansion-panel-header style="background-color: #f1f1f1">
-          <mat-panel-title>
-            Artifacts
-          </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-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
-        <mat-expansion-panel-header style="background-color: #f1f1f1">
-          <mat-panel-title>
-            Inputs
-          </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-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
-        <mat-expansion-panel-header style="background-color: #f1f1f1">
-          <mat-panel-title>
-            Capabilities
-          </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 74303dcfb..2d9685e24 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
@@ -19,51 +19,6 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-.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; 
@@ -72,35 +27,29 @@ limitations under the License.
     width: 100%
 }
 
-.mat-expansion-panel-header{
-  background-color: #3f51b5 !important; 
-}
-
-.mat-expansion-panel-header-title {
-  color: white !important;
-}
-
 .enrich-btn {
   cursor: pointer;
   position: absolute;
-  top: 4em;
-  right: 27em;
+  top: 3.6em;
+  right: 10em;
   padding: 6px;
   color: white;
   background-color:#3f51b5;
   margin-right: 2em;
-  border-radius: 2em; 
+  border-radius: 2em;
+  z-index: 1;
 }
 
 .toggle-view-btn {
   cursor: pointer;
   position: absolute;
-  top: 4em;
-  right: 20em;
+  top: 3.6em;
+  right: 3em;
   padding: 6px;
   color: white;
   background-color:#3f51b5;
-  border-radius: 2em
+  border-radius: 2em;
+  z-index: 1;
 }
 
 .editor-selector {