diff options
Diffstat (limited to 'cds-ui/client/src/app/feature-modules/blueprint/modify-template')
3 files changed, 36 insertions, 13 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 d59597021..8397ae9f6 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 @@ -20,7 +20,7 @@ limitations under the License. --> <div class="modifyTemp"> - <div class="outerDiv divone"> + <div *ngIf="designerMode" class="outerDiv divone"> <mat-accordion> <mat-expansion-panel> <mat-expansion-panel-header style="background-color: #f1f1f1"> @@ -48,20 +48,16 @@ limitations under the License. </mat-accordion> </div> + <button class="enrich-btn">Enrichment</button> + <button (click) ="changeView()" class="toggle-view-btn">{{viewText}}</button> - <div class="outerDiv divtwo" (click)="on = !on" ondrop="dropcalled(event)" ondragover="allowDrop(event)" id="svgDiv"> - <button style="cursor: pointer; position: absolute;top: 4em;right: 27em; padding: 6px;color: white; background-color:#3f51b5;margin-right: 2em;border-radius: 2em; ">Enrichment</button> - <button (click) ="changeView()" style="cursor: pointer; position: absolute;top: 4em;right: 22em; padding: 6px;color: white;background-color:#3f51b5; border-radius: 2em">{{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> - <app-editor *ngIf="editorMode"></app-editor> </div> + <app-editor class="editor-selector" *ngIf="editorMode"></app-editor> - <div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)"> - <div *ngFor="let item of list" cdkDrag>{{ item }}</div> - </div> - - <div *ngIf="on" id="overlay" class="outerDiv divThree"> + <div *ngIf="designerMode && on" id="overlay" class="outerDiv divThree"> <mat-accordion style="width: 100%"> <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> 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 1ddb2559e..74303dcfb 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 @@ -78,4 +78,31 @@ limitations under the License. .mat-expansion-panel-header-title { color: white !important; +} + +.enrich-btn { + cursor: pointer; + position: absolute; + top: 4em; + right: 27em; + padding: 6px; + color: white; + background-color:#3f51b5; + margin-right: 2em; + border-radius: 2em; +} + +.toggle-view-btn { + cursor: pointer; + position: absolute; + top: 4em; + right: 20em; + padding: 6px; + color: white; + background-color:#3f51b5; + border-radius: 2em +} + +.editor-selector { + width: 100%; }
\ 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 1efdefce6..809f31027 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 @@ -28,9 +28,9 @@ import { Component, OnInit } from '@angular/core'; }) export class ModifyTemplateComponent implements OnInit { - designerMode: boolean = true; - editorMode: boolean = false; - viewText: string = "Editor View"; + designerMode: boolean = false; + editorMode: boolean = true; + viewText: string = "Designer View"; constructor() { } |