aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui
diff options
context:
space:
mode:
authorEzhilarasi <ezhrajam@in.ibm.com>2019-02-22 14:54:47 +0530
committerEzhilarasi R <ezhrajam@in.ibm.com>2019-02-22 10:16:00 +0000
commit43b7f54d9a69aec3c460044f5c969ba61ebb590e (patch)
treef30f6f170a530af6060acace708c5750ae696307 /cds-ui
parentd94c81e03562abd5fe097c21bba1b00d2bd9bdea (diff)
Added Ace-editor component
Change-Id: Ib140ee5b32ab738b88cc1d499ca9248373a3bb99 Issue-ID: CCSDK-704 Signed-off-by: Ezhilarasi <ezhrajam@in.ibm.com>
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