summaryrefslogtreecommitdiffstats
path: root/cds-ui
diff options
context:
space:
mode:
authorDan Timoney <dtimoney@att.com>2019-02-22 20:45:26 +0000
committerGerrit Code Review <gerrit@onap.org>2019-02-22 20:45:26 +0000
commitafa8baf78420f3d0a1532f94ec59bf13067705a8 (patch)
treeb778722e26865b5539037db0918790dbfb8a4afc /cds-ui
parent4465c32a9e09c7777528b259bcb18bb6289f6d1f (diff)
parent43b7f54d9a69aec3c460044f5c969ba61ebb590e (diff)
Merge "Added Ace-editor component"
Diffstat (limited to 'cds-ui')
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html28
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss19
2 files changed, 31 insertions, 16 deletions
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 9dbaf6728..4c1a7dc9e 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
@@ -19,27 +19,29 @@ limitations under the License.
============LICENSE_END============================================ -->
<div class="container">
- <div class="fileViewContainer">
- <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+ <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>
- <span (click)="fileClicked(node.name)">{{node.name}}</span>
+ <!-- use a disabled button to provide padding for tree leaf -->
+ <button mat-icon-button disabled></button>
+ <span (click)="fileClicked(node.name)">{{node.name}}</span>
</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">
+ <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
- <span (click)="fileClicked(node.name)">{{node.name}}</span>
+ <span (click)="fileClicked(node.name)">{{node.name}}</span>
</mat-tree-node>
- </mat-tree>
- </div>
- <div class="editorConatiner">
- <p>Here comes the actual editor</p>
- </div>
+ </mat-tree>
+ </div>
+ <div class="editorConatiner">
+ <ace-editor [(text)]="text" mode="json" #editor class="aceEditor"></ace-editor>
+ </div>
+</div>
+<div style="position:relative">
+ <button mat-button class="savebtn" (click)="updateBlueprint()">Save</button>
</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 f7e6f493c..f2778840c 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
@@ -18,20 +18,33 @@ See the License for the specific language governing permissions and
limitations under the License.
============LICENSE_END============================================
*/
+
.container {
display: flex;
flex-direction: row;
-
+ margin-top: 8px;
.fileViewContainer {
width: 20%;
margin: 2px
}
-
.editorConatiner {
width: 80%;
background-color: gainsboro;
- height: 533px;
+ height: 450px !important;
margin-left: 5em;
}
+}
+.aceEditor {
+ overflow: hidden;
+ height: 100% !important;
+ background-color: white !important;
+ border: 1px solid #3f87a6;
+ border-left: 5px solid #3f87a6;
+}
+.savebtn {
+ color: white;
+ background-color: #3f51b5;
+ position: absolute;
+ bottom: 5px;
} \ No newline at end of file