Merge "Modify Component HTML changes"
diff --git a/cds-ui/client/angular.json b/cds-ui/client/angular.json
index 9d07cff..96b4df0 100644
--- a/cds-ui/client/angular.json
+++ b/cds-ui/client/angular.json
@@ -29,7 +29,8 @@
"styles": [
"src/styles.scss",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
- "./node_modules/material-design-icons/iconfont/material-icons.css"
+ "./node_modules/material-design-icons/iconfont/material-icons.css",
+ "./node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"./node_modules/ace-builds/src-min/ace.js",
diff --git a/cds-ui/client/package.json b/cds-ui/client/package.json
index 0eea31e..8963be3 100644
--- a/cds-ui/client/package.json
+++ b/cds-ui/client/package.json
@@ -30,8 +30,8 @@
"@types/d3": "^5.7.0",
"core-js": "^2.5.4",
"d3": "^5.9.1",
- "font-awesome": "^4.7.0",
"file-saver": "^2.0.1",
+ "font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jszip": "^3.2.0",
"material-design-icons": "^3.0.1",
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
index 53bbc6d..64b201d 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
@@ -21,13 +21,10 @@
<div class="container">
<div class="fileViewContainer">
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
- <!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
- <!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
<button mat-icon-button (click)="selectFileToView(node)">{{node.name}}</button>
</mat-tree-node>
- <!-- This is the tree node template for expandable nodes -->
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
@@ -39,26 +36,12 @@
</mat-tree>
</div>
<div class="editorConatiner">
+ <i class="fa fa-save save-icon" style="font-size:24px" (click)="updateBlueprint()"></i>
<ace-editor [(text)]="text" [(mode)]="mode" #editor class="aceEditor"></ace-editor>
</div>
</div>
-<!-- <div style="position:relative">
- <button mat-button class="savebtn" (click)="updateBlueprint();SaveToBackend()">Save</button>
- <button mat-button class="savebtn" style="margin-left: 82px;" (click)="download();">Download</button>
-</div>
-<div>
- <mat-form-field>
- <select matNativeControl required>
- <option value="volvo">SDC</option>
- <option value="saab">CCSDK</option>
- </select>
- </mat-form-field>
- <button mat-button class="savebtn">Deploy</button>
- <button mat-button class="savebtn">Save</button>
-</div> -->
-
-<div style="display: flex;flex-direction: row">
+<!-- <div style="display: flex;flex-direction: row">
<div style="height: 6em;
width: 30em;">
@@ -102,4 +85,4 @@
</div>
</div>
-</div>
\ No newline at end of file
+</div> -->
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
index 58f0ab8..136c08b 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
@@ -41,12 +41,20 @@
overflow: hidden;
height: 100% !important;
background-color: white !important;
- border: 1px solid #3f87a6;
- border-left: 5px solid #3f87a6;
+ border: 1px solid #3f51b5;
+ // border-left: 5px solid #3f51b5;
}
.savebtn {
color: white;
background-color: #3f51b5;
position: absolute;
bottom: 5px;
+}
+.save-icon{
+ position: absolute;
+ left: 59em;
+ color: #3f51b5;
+ font-size: 24px;
+ cursor: pointer;
+ z-index: 1;
}
\ No newline at end of file
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 81a1a85..a77be5b 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,58 +18,30 @@
limitations under the License.
============LICENSE_END============================================
-->
-<!-- <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>
<app-designer *ngIf="designerMode" (onNodeSelect)="on = !on; viewNodeDetails($event)"></app-designer>
<app-editor class="editor-selector" *ngIf="editorMode"></app-editor>
-</div>
\ No newline at end of file
+</div>
+
+<div style="display: flex;flex-direction: row">
+ <div style="width: 30em;">
+ <button class="btn-active" (click) ="changeView()">{{viewText}}</button>
+ </div>
+ <div style="width: 16em">
+ </div>
+ <div style="width: 100%;height: 3em;">
+ <div style="display: flex;flex-direction: row-reverse">
+ <button class="btn-active" (click)="downloadCBA()">Download</button>
+ <button [disabled]="!isEnriched" [ngClass]="{ 'mat-button-active': isEnriched, 'mat-button-disablled': !isEnriched}" mat-button [matMenuTriggerFor]="menu">Deploy</button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item>Deploy</button>
+ <button mat-menu-item>Test</button>
+ </mat-menu>
+ <button [disabled]="!isEnriched" [ngClass]="{ 'btn-active': isEnriched, 'btn-disablled': !isEnriched}" class="btn-active">Publish</button>
+ <button class="btn-active">Save</button>
+ <button class="btn-active">Enrich</button>
+
+ </div>
+ </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 2d9685e..609d6fa 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
@@ -54,4 +54,27 @@
.editor-selector {
width: 100%;
+}
+
+.mat-button-active{
+ margin: 0.5em;
+ background-color: #3f51b5 !important;
+ color: white !important;
+ border-radius: 4px;
+ border: none;
+ line-height: none !important;
+ // padding: 0.5em;
+ min-width: 6em;
+ cursor: pointer;
+}
+
+.mat-button-disablled {
+ background-color: #c5cae8 !important;
+ border-radius: 4px;
+ color: darkgray !important;
+ line-height: none !important;
+ margin: 0.5em;
+ // padding: 0.5em;
+ min-width: 6em;
+ cursor: initial;
}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
index 809f310..e39ce01 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
@@ -19,7 +19,9 @@
============LICENSE_END============================================
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import { EditorComponent } from './editor/editor.component';
@Component({
selector: 'app-modify-template',
@@ -28,10 +30,13 @@
})
export class ModifyTemplateComponent implements OnInit {
+ isEnriched: boolean = false;
designerMode: boolean = false;
editorMode: boolean = true;
viewText: string = "Designer View";
+ @ViewChild(EditorComponent) editorComp: EditorComponent;
+
constructor() { }
ngOnInit() {
@@ -53,4 +58,8 @@
}
}
+ downloadCBA() {
+ this.editorComp.download();
+ }
+
}
diff --git a/cds-ui/client/src/styles.scss b/cds-ui/client/src/styles.scss
index 1a81d0d..10d5577 100644
--- a/cds-ui/client/src/styles.scss
+++ b/cds-ui/client/src/styles.scss
@@ -24,3 +24,25 @@
.mat-card:not([class*=mat-elevation-z]) {
box-shadow: none !important;
}
+
+.btn-active {
+ margin: 0.5em;
+ background-color: #3f51b5;
+ color: white;
+ border-radius: 4px;
+ border: none;
+ padding: 0.5em;
+ min-width: 6em;
+ cursor: pointer;
+}
+
+.btn-disablled {
+ background-color: #c5cae8;
+ border-radius: 4px;
+ color: darkgray;
+ margin: 0.5em;
+ padding: 0.5em;
+ min-width: 6em;
+ border: none;
+ cursor: initial;
+}
\ No newline at end of file