diff options
author | Rupinder <rupinsi1@in.ibm.com> | 2020-05-28 16:44:05 +0530 |
---|---|---|
committer | KAPIL SINGAL <ks220y@att.com> | 2020-05-28 15:52:31 +0000 |
commit | d04515ae5983945d24fa2a339827ee938e5cb6ab (patch) | |
tree | 9d815100532b759d66f21db24639c893482ec3fe /cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html | |
parent | 045eb1725eb72e727dfb17ad0296de05f422556f (diff) |
added a basic function attribute sidebar
Designed a basic function attribute sidebar, it is still work in
progress. Need to work on Content depends on current selection of
Function.
Issue-ID: CCSDK-2281
Change-Id: Ifd6019348d530deb043d1a0275cd93413e128c7c
Signed-off-by: Rupinder <rupinsi1@in.ibm.com>
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 | 204 |
1 files changed, 201 insertions, 3 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 6904d5781..52503cf53 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 @@ -102,9 +102,9 @@ <div class="source-button editBar"> <div class="btn-group viewBtns" role="group"> - <button (click)="_toggleSidebar1()" class="topologySource active"> + <!-- <button (click)="_toggleSidebar1()" class="topologySource active"> <i style="font-size:24px" class="fa"></i> - </button> + </button> --> <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</button> @@ -230,7 +230,7 @@ </div> --> <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> --> </div> - <!-- Attribute SideBar --> + <!-- Action Attribute SideBar --> <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" [position]="'right'" #sidebarRight> <div class="container-fluid0"> @@ -388,4 +388,202 @@ </div> </ng-sidebar> + <!-- 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="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="form-group actionName"> + <label for="exampleInputEmail1">Function Name</label> + <input type="text" class="form-control" placeholder="Function Name"> + </div> + </div> + </div> + <div class="row m-0"> + <div class="col-12"> + <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> + <ul class="dropdown-content w-100"> + <li> + <div class="form-group "> + <li>other component</li> + </div> + </li> + </ul> + </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"> + 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> + <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> + + <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> + + <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> |