diff options
Diffstat (limited to 'cds-ui/client')
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 |