diff options
Diffstat (limited to 'cds-ui/client/src')
6 files changed, 91 insertions, 74 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 53bbc6dfa..64b201d81 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 @@ limitations under the License. <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 @@ limitations under the License. </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 @@ limitations under the License. </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 58f0ab85d..136c08bfa 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 @@ limitations under the License. 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 81a1a851e..a77be5ba0 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 @@ See the License for the specific language governing permissions and 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 2d9685e24..609d6faf0 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 @@ limitations under the License. .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 809f31027..e39ce019c 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 @@ limitations under the License. ============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 @@ import { Component, OnInit } from '@angular/core'; }) 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 @@ export class ModifyTemplateComponent implements OnInit { } } + downloadCBA() { + this.editorComp.download(); + } + } diff --git a/cds-ui/client/src/styles.scss b/cds-ui/client/src/styles.scss index 1a81d0d71..10d55776d 100644 --- a/cds-ui/client/src/styles.scss +++ b/cds-ui/client/src/styles.scss @@ -24,3 +24,25 @@ limitations under the License. .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 |