diff options
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 | 360 |
1 files changed, 178 insertions, 182 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 52503cf53..2bd484258 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 @@ -33,11 +33,11 @@ </div> <div class="modal-body"> <div class="row package-info"> - <div class="col-12"> + <div class="col"> <h3>Test Package <span class="package-version">Version 1.0.2</span></h3> </div> - <div class="col-12 mb-3"> + <div class="col mb-3"> <span class="badge badge-primary">test</span> <span class="badge badge-primary">vDNS-CDS</span> <span class="badge badge-primary">SCALE-OUT</span> @@ -100,7 +100,7 @@ </div> </header> <div class="source-button editBar"> - + <div class="btn-group viewBtns" role="group"> <!-- <button (click)="_toggleSidebar1()" class="topologySource active"> <i style="font-size:24px" class="fa"></i> @@ -118,54 +118,43 @@ <nav class="row"> <!--Nav Tabs--> - <div class="col-12"> + <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> - <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> + <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> + <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> </div> </div> </nav> - - - <div class="row mt-2"> - <div class="col-12"> + <div class="row"> + <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"> <!--Action Search Box--> - <div> - <h1>Search</h1> - </div> + <input type="text" class="form-control input-search-controller" placeholder="Search Actions"> - <div class="btn-group actionBtns col-8" role="group"> - <button (click)="insertCustomActionIntoBoard()" type="button" class="btn insert-custom"> - + New Action - </button> - </div> - - <div> - <div *ngIf="showAction" class="custom-control"> - <label><span><i class="fa fa-file-o" aria-hidden="true" style="margin-right: 20px;"></i></span> + <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action"> + + New Action + </button> + <div class="actionsList"> + <div *ngIf="showAction" class="custom-control"> + <label><i class="icon-file" aria-hidden="true"></i> {{customActionName}} </label> - </div> </div> - </div> - - <div class="tab-pane fade" id="nav-function" role="tabpanel" - aria-labelledby="nav-function-tab"> - <div class="col-12 text-center p-0"> - <b>Drag and drop function to Action’s box</b> - <div id="palette-paper" class="col-12 componentsList"> </div> </div> </div> + <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab"> + <!--Function Search Box--> + <input type="text" class="form-control input-search-controller" placeholder="Search Functions"> + <div id="palette-paper" class="componentsList"> </div> + </div> + </div> </div> </div> - - + <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a></div> </ng-sidebar> <!-- Page content --> @@ -242,7 +231,7 @@ <h1>Action Attributes</h1> <div class="scrolll"> <div class="row m-0"> - <div class="col-12"> + <div class="col"> <div class="form-group actionName"> <label for="exampleInputEmail1">Action Name</label> <input type="text" class="form-control" placeholder="Action 1"> @@ -388,36 +377,36 @@ </div> </ng-sidebar> - <!-- Function Attribute SideBar --> - <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" [mode]="'push'" - [position]="'right'" #sidebarRight> + <!-- Function Attribute SideBar --> + <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" + [mode]="'push'" [position]="'right'" #sidebarRight> <div class="container-fluid0"> <div class="row m-0"> <div class="col-2 pr-0"> <!-- <button (click)="sidebarRight.close()" class="closeBar"></button> --> </div> <div class="col-10 attributesContainer p-0"> - <div class="row m-0"> - <div class="col-12"> - <div class="col-3"> - <button (click)="sidebarRight.close()" class="closeBar"></button> - </div> + <div class="row m-0"> + <div class="col"> + <div class="col-3"> + <button (click)="sidebarRight.close()" class="closeBar"></button> + </div> + + <div class="function-attribute"> + <h6>Function Attributes + <span class="trash-span"> + <i class="fa fa-trash" type="button" aria-hidden="true"></i> + </span> + </h6> + </div> + + + </div> + </div> - <div class="function-attribute"> - <h6>Function Attributes - <span class="trash-span"> - <i class="fa fa-trash" type="button" aria-hidden="true"></i> - </span> - </h6> - </div> - - - </div> - </div> - <div> <div class="row m-0"> - <div class="col-12"> + <div class="col"> <div class="form-group actionName"> <label for="exampleInputEmail1">Function Name</label> <input type="text" class="form-control" placeholder="Function Name"> @@ -425,165 +414,172 @@ </div> </div> <div class="row m-0"> - <div class="col-12"> + <div class="col"> <div class=" actionName"> <label>Function Type</label> <div class="dropdown w-100"> <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">component-resource-resolution <i class="fa fa-caret-down"></i></div> + <div class="dropdown-text">component-resource-resolution <i + class="fa fa-caret-down"></i></div> <ul class="dropdown-content w-100"> <li> <div class="form-group "> - <li>other component</li> - </div> - </li> - </ul> + <li>other component</li> </div> + </li> + </ul> </div> </div> </div> - <div class="accordion" id="accordionExample"> - <div class="card"> - <div class="card-header row" id="headingOne"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - Interface - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> + </div> + <div class="accordion" id="accordionExample"> + <div class="card"> + <div class="card-header row" id="headingOne"> + <h2 class="col-10 mb-0"> + <button class="btn btn-link" type="button" data-toggle="collapse" + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + Interface + </button> + </h2> + <div class="col-2 p-0 text-center"> + <button class="btn btn-addAttribute" type="button"></button> </div> + </div> - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> - <div class="card-body"> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">ResourceResolutionComponent</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Resoluton-key</label> - <input type="text" class="form-control"> + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample"> + <div class="card-body"> + <div class="row"> + <div class="col-9"> + <label for="exampleInputEmail1">ResourceResolutionComponent</label> + <button type="button" class="btn p-0"> + <img src="/assets/img/icon-edit.svg"> + </button> </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Store result</label> - </div> - <div class="form-group"> - <label> - <input class="with-gap radio-btn" name="group1" type="radio"/> - <span class="radio-btn">True</span> - </label> - <label class="radio-btn"> - <input class="with-gap radio-btn" name="group1" type="radio" /> - <span class="radio-btn">False</span> - </label> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder=""> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Artifact Prefix Name</label> - <input type="text" class="form-control" placeholder=""> - + <div class="col-3"> + <button type="button" class="btn btn-deleteAttribute">Delete</button> </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Resoluton-key</label> + <input type="text" class="form-control"> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">Store result</label> + </div> + <div class="form-group"> + <label> + <input class="with-gap radio-btn" name="group1" type="radio" /> + <span class="radio-btn">True</span> + </label> + <label class="radio-btn"> + <input class="with-gap radio-btn" name="group1" type="radio" /> + <span class="radio-btn">False</span> + </label> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Target</label> + <input type="text" class="form-control" placeholder=""> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">Artifact Prefix Name</label> + <input type="text" class="form-control" placeholder=""> </div> + </div> </div> - </div> - <div class="accordion" id="accordionExample"> - <div class="card"> - <div class="card-header row" id="headingOne"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - Artifact - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> + </div> + + <div class="accordion" id="accordionExample"> + <div class="card"> + <div class="card-header row" id="headingOne"> + <h2 class="col-10 mb-0"> + <button class="btn btn-link" type="button" data-toggle="collapse" + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + Artifact + </button> + </h2> + <div class="col-2 p-0 text-center"> + <button class="btn btn-addAttribute" type="button"></button> </div> + </div> - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> - <div class="card-body"> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">base config-template</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Type</label> - <div class="dropdown w-100"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">artifact-template-velocity <i class="fa fa-caret-down"></i></div> - <ul class="dropdown-content w-100"> - <li> - <div class="form-group "> - <li>ddwd</li> - </div> - </li> - </ul> - </div> + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample"> + <div class="card-body"> + <div class="row"> + <div class="col-9"> + <label for="exampleInputEmail1">base config-template</label> + <button type="button" class="btn p-0"> + <img src="/assets/img/icon-edit.svg"> + </button> </div> - - <div style="height: 30px; margin-top: 30px;"><hr></div> - - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">base config-mapping</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> + <div class="col-3"> + <button type="button" class="btn btn-deleteAttribute">Delete</button> </div> - <div class="form-group"> - <label for="exampleInputEmail1">Type</label> - <div class="dropdown w-100"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">artifact-mapping resource <i class="fa fa-caret-down"></i></div> - <ul class="dropdown-content w-100"> - <li> - <div class="form-group "> - <li>ddwd</li> - </div> - </li> - </ul> - </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Type</label> + <div class="dropdown w-100"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">artifact-template-velocity <i + class="fa fa-caret-down"></i></div> + <ul class="dropdown-content w-100"> + <li> + <div class="form-group "> + <li>ddwd</li> </div> + </li> + </ul> + </div> + </div> + + <div style="height: 30px; margin-top: 30px;"> + <hr> + </div> - <div style="height: 30px; margin-top: 30px;"><hr></div> + <div class="row"> + <div class="col-9"> + <label for="exampleInputEmail1">base config-mapping</label> + <button type="button" class="btn p-0"> + <img src="/assets/img/icon-edit.svg"> + </button> + </div> + <div class="col-3"> + <button type="button" class="btn btn-deleteAttribute">Delete</button> </div> </div> + <div class="form-group"> + <label for="exampleInputEmail1">Type</label> + <div class="dropdown w-100"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">artifact-mapping resource <i + class="fa fa-caret-down"></i></div> + <ul class="dropdown-content w-100"> + <li> + <div class="form-group "> + <li>ddwd</li> + </div> + </li> + </ul> + </div> + </div> + + <div style="height: 30px; margin-top: 30px;"> + <hr> </div> - </div> </div> </div> + </div> </div> + </div> + </div> + </div> </ng-sidebar> -</ng-sidebar-container> +</ng-sidebar-container>
\ No newline at end of file |