diff options
author | ShaabanEltanany <shaaban.eltanany.ext@orange.com> | 2020-10-07 10:20:21 +0200 |
---|---|---|
committer | ShaabanEltanany <shaaban.eltanany.ext@orange.com> | 2020-10-07 10:20:21 +0200 |
commit | 0dd225849c1e874219de60b36313000bf17d17d8 (patch) | |
tree | 390550771cac50c5ffde88279017f1377b555ca3 /cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html | |
parent | cbd6d18fc892cb00ce4e405c6b4edf2bc0bceee7 (diff) |
divide html components to action and function attributes
Issue-ID: CCSDK-2874
Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: Ieb428c80a3125909adbad1600861448437b00326
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html')
-rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html | 253 |
1 files changed, 48 insertions, 205 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html index 3c8fa2aa3..537a0a8ca 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -12,7 +12,7 @@ <li class="breadcrumb-item"> <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> <button type="button" class="btn package-info-btn" data-toggle="modal" - data-target="#exampleModalLong"> + data-target="#exampleModalLong"> <i class="icon-info" aria-hidden="true"></i> </button> </li> @@ -22,13 +22,13 @@ </li> </ol> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" - aria-labelledby="exampleModalLongTitle" aria-hidden="true"> + aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <img src="assets/img/icon-close.svg" /> + <img src="assets/img/icon-close.svg"/> </button> </div> <div class="modal-body package-info"> @@ -70,15 +70,15 @@ <li> <div class="btn-group" role="group" aria-label="Basic example"> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Preview"> + data-tooltip="Preview"> <i class="fa fa-eye"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Download"> + data-tooltip="Download"> <i class="fa fa-download"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Share"> + data-tooltip="Share"> <i class="fa fa-share-square"></i> </a> </div> @@ -107,7 +107,7 @@ <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg"> <!--Actions/Functions Side Menu Toogole Button--> <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true" - data-tooltip="Collapse Side bar"> + data-tooltip="Collapse Side bar"> <i class="fa arr-size"></i> </button> <!--Nav Tabs--> @@ -119,9 +119,9 @@ <div class="col-12"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> + aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false">Template</a> + aria-controls=" " aria-selected="false">Template</a> </div> </div> </nav> @@ -162,7 +162,7 @@ <div class="btn-group viewBtns" role="group"> <button type="button" class="btn btn-secondary topologySource active">Designer</button> <button [routerLink]="['/designer/source', viewedPackage.id]" type="button" - class="btn btn-secondary topologyView">Scripting + class="btn btn-secondary topologyView">Scripting </button> </div> </li> @@ -173,15 +173,15 @@ <ng-sidebar-container class="sidebar-container"> <!--Left Side Menu--> <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" - [mode]="'push'" #sidebarLeft> + [mode]="'push'" #sidebarLeft> <nav class="row"> <!--Nav Tabs--> <div class="col"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action" - role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> + role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function" - role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> + role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> </div> </div> </nav> @@ -189,17 +189,17 @@ <div class="col"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-action" role="tabpanel" - aria-labelledby="nav-action-tab"> + aria-labelledby="nav-action-tab"> <!--Action Search Box--> <input type="text" class="form-control input-search-controller" placeholder="Search Actions"> <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary"> Action Attributes </button> - <br /><br /> + <br/><br/> <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary"> Function Attributes </button> - <br /> + <br/> <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action"> + New Action </button> @@ -213,7 +213,7 @@ <li *ngFor="let customActionName of actions"> <label> <i class="icon-file" aria-hidden="true" class="icon-file" - (click)="openFunctionAttributes(customActionName)"></i> + (click)="openFunctionAttributes(customActionName)"></i> {{customActionName}} </label> </li> </ul> @@ -271,217 +271,60 @@ </div> <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" [position]="'right'" #sidebarRight1> - - <app-action-attributes></app-action-attributes> + <div class="container-fluid0"> + <div class="row m-0"> + <div class="col attributesContainer"> + <div class="row m-0 attributesContainertTitle"> + <div class="col-2 pl-0"> + <button (click)="sidebarRight1.close()" class="closeBar" tooltip="Close" placement="bottom"> + <i + class="icon-close" type="button" aria-hidden="true"></i></button> + </div> + <h6 class="col pl-0">Action Attributes</h6> + <div class="col-3 pl-0"> + <div class="btn-group" role="group" aria-label="Basic example"> + <button type="button" class="btn view-source" tooltip="View Action Source" + placement="bottom"><i class="icon-source"></i></button> + <button type="button" data-toggle="modal" data-target="#exampleModalScrollable1" + class="btn trash-item" tooltip="Delete Action" placement="bottom"><i + class="icon-delete-sm" aria-hidden="true"></i></button> + </div> + </div> + </div> + <app-action-attributes></app-action-attributes> + </div> + </div> + </div> </ng-sidebar> <!--Right Side Menu - Function Attribute--> <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'" - [position]="'right'" #sidebarRight2> + [position]="'right'" #sidebarRight2> <div class="container-fluid0"> <div class="row m-0"> <div class="col attributesContainer"> <div class="row m-0 attributesContainertTitle"> <div class="col-2 pl-0"> <button (click)="sidebarRight2.close()" class="closeBar" tooltip="Close" - placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i></button> + placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i> + </button> </div> <h6 class="col pl-0">Function Attributes</h6> <div class="col-3 pl-0"> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn view-source" tooltip="View Function Source" - placement="bottom"><i class="icon-source"></i></button> + placement="bottom"><i class="icon-source"></i></button> <button type="button" class="btn trash-item" tooltip="Delete Function" - placement="bottom"><i class="icon-delete-sm" type="button" - aria-hidden="true"></i></button> - </div> - </div> - </div> - <div class="scrollWrapper"> - <div class="row m-0"> - <div class="col"> - <div class="form-group"> - <label for="exampleInputEmail1">Function Instance Name</label> - <input type="text" class="form-control" placeholder="Function Instance Name"> - </div> - <div class="form-group"> - <label>Function Type</label> - <label class="attribute-value">component-resource-resolution</label> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> - </div> - </div> - </div> - <!--INTERFACES--> - <div class="accordion" id="accordionExample"> - <div class="card"> - <div class="card-header row" id="headingOne"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - Interfaces - </button> - </div> - - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> - <div class="card-body"> - <!--Inputs & Outputs Tabs--> - <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist"> - <li class="nav-item" role="presentation"> - <a class="nav-link active" id="pills-home-tab" data-toggle="pill" - href="#pills-home" role="tab" aria-controls="pills-home" - aria-selected="true">Inputs</a> - </li> - <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-profile-tab" data-toggle="pill" - href="#pills-profile" role="tab" aria-controls="pills-profile" - aria-selected="false">Outputs</a> - </li> - </ul> - <div class="tab-content" id="pills-tabContent"> - <div class="tab-pane fade show active" id="pills-home" role="tabpanel" - aria-labelledby="pills-home-tab"> - <div class="row"> - <div class="col"> - <!--list--> - <div class="attribute-wrap"> - <div class="form-group"> - <label - for="exampleFormControlTextarea1">artifact-prefix-names - <i class="icon-required-star" type="button" - aria-hidden="true"></i></label> - </div> - <div - class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline1" - name="customRadioInline1" - class="custom-control-input"> - <label class="custom-control-label" - for="customRadioInline1">Pre-defined - Template</label> - </div> - <div - class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline2" - name="customRadioInline1" - class="custom-control-input"> - <label class="custom-control-label" - for="customRadioInline2">Input Drivin - Template</label> - </div> - <br /> - <button type="button" class="btn btn-select-template"><i - class="icon-add-circle" type="button" - aria-hidden="true"></i> Select Template</button> - </div> - <!--string--> - <div class="attribute-wrap"> - <div class="form-group"> - <label for="exampleInputEmail1">resoluton-key <i - class="icon-required-star" type="button" - aria-hidden="true"></i></label> - <input type="text" class="form-control"> - </div> - </div> - <!--integer--> - <div class="attribute-wrap"> - <div class="form-group"> - <label for="exampleInputEmail1">request-id <i - class="icon-required-star" type="button" - aria-hidden="true"></i></label> - <input type="number" class="form-control" placeholder="" - value="356"> - </div> - </div> - <!--boolean--> - <div class="attribute-wrap"> - <div class="form-group"> - <label - for="exampleFormControlTextarea1">resolution-summary - <i class="icon-required-star optional-attribute" - type="button" aria-hidden="true"></i></label> - </div> - <div - class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline1" - name="customRadioInline1" - class="custom-control-input"> - <label class="custom-control-label" - for="customRadioInline1">True</label> - </div> - <div - class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline2" - name="customRadioInline1" - class="custom-control-input"> - <label class="custom-control-label" - for="customRadioInline2">False</label> - </div> - </div> - <!-- Add Optional Attributes button --> - </div> - </div> - </div> - <div class="tab-pane fade" id="pills-profile" role="tabpanel" - aria-labelledby="pills-profile-tab">2</div> - </div> - </div> - </div> - </div> - </div> - <!--ARTIFACTS--> - <div class="accordion" id="accordionExample1"> - <div class="card"> - <div class="card-header row" id="headingOne"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> - Artifacts - </button> - </div> - - <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample1"> - <div class="card-body"> - <div class="row"> - <div class="col-12"> - <a class="template-mapping-list"> - <p>baseconfig</p> - <span>Mapping</span> - <span>Template</span> - - <a data-toggle="modal" - data-target="#templateDeletionModal" - class="accordion-delete deleteTemplate" - title="Delete Template"><i class="icon-delete-sm"></i></a> - </a> - - </div> - <div class="col-12"> - <a class="template-mapping-list"> - <p>vpkg</p> - <span>Mapping</span> - <span>Template</span> - <a data-toggle="modal" - data-target="#templateDeletionModal" - class="accordion-delete deleteTemplate" - title="Delete Template"><i class="icon-delete-sm"></i></a> - </a> - </div> - </div> - </div> - </div> + placement="bottom"><i class="icon-delete-sm" type="button" + aria-hidden="true"></i></button> </div> </div> </div> + <app-functions-attribute></app-functions-attribute> </div> </div> </div> </ng-sidebar> - </ng-sidebar-container> -<app-functions-attribute></app-functions-attribute> - |