diff options
author | 2020-06-04 17:45:57 +0200 | |
---|---|---|
committer | 2020-06-05 13:50:37 +0000 | |
commit | ced915588f42312b3e65accea0ff72f095c929ce (patch) | |
tree | 7667d395ee9acba8e0ea4cecae2521f7415fc8a1 /cds-ui/designer-client/src/app/modules/feature-modules/packages/designer | |
parent | f36451a9d5bcc88adb3a7f0062976cbc8ec668b1 (diff) |
Actions list - UI
Issue-ID: CCSDK-2411
Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I4eccc5261e4c4ae9c9a60f0c4c518129973b066d
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer')
4 files changed, 250 insertions, 214 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css index a095b3dfc..5054a8e9e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -12,6 +12,18 @@ body{ color: #fff; } +/*Bootstrap*/ +.controllerSidebar .nav-tabs{ + border-bottom-width: 2px; +} +.controllerSidebar .nav-tabs .nav-link{ + padding: 12px 0 !important; + text-align: center; +} +.controllerSidebar .nav-tabs .nav-link::before{ + content: ""; +} + /*Header*/ header{ position: relative; @@ -240,9 +252,9 @@ tspan#type{ } /*ACTIONS & COMPONENTS MENU*/ .input-search-controller{ - height: 50px; - padding-left: 30px; - background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat; + height: 40px; + padding-left: 42px; + background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat; border-radius: 0; border: 0; border-bottom: solid 1px #D7E7F9; @@ -254,16 +266,11 @@ tspan#type{ font-size: 11px; } .input-search-controller:focus{ - + background-color: #fff !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); + text-shadow: none; border-color: #DEE8F3; } -.actions-scroll{ - max-height: 29vh; - overflow-y: auto; - margin-top: 12px; - margin-bottom: 20px; -} .componentsList p{ margin-bottom: 0; padding-left: 30px; @@ -296,10 +303,37 @@ p.compType-4{ .controllerSidebar{ width: 320px; + padding: 0; + overflow: hidden !important; background: #F4F9FE; border: solid 1px #C1CDDD; box-shadow: 0 2px 6px rgba(47, 83, 151, .10); } +.helpBox{ + position : absolute; + bottom : 0; + width: 100%; + height : 40px; + margin-top : 24px; + padding-left: 20px; + background: #fff; + border-top: solid 1px #C1CDDD; + font-size: 14px; + line-height: 40px; + color: #0070F4; +} +.helpBox .icon-info{ + margin-left: 0; + margin-right: 10px; +} +.helpBox .icon-info::before{ + color: #0070F4 !important; +} +.controllerSidebar .row, +.controllerSidebar .col{ + margin: 0; + padding: 0; +} .controllerSidebar h1{ margin-bottom: 15px; padding: 12px 0 12px 12px; @@ -315,6 +349,7 @@ p.compType-4{ font-size: 12px; color: #C3CDDB; } + .actionBtns .btn{ margin: 0px 15px 16px -90px; /* padding: 9px 20px; */ @@ -325,24 +360,25 @@ p.compType-4{ float: left; } -.actionBtns .btn.insert-custom{ - /* background: white; */ - /* border: solid 1px #1B3E6F; */ +.new-action, +.new-action:hover{ + margin: 9px 0 4px 18px; + padding: 6px; + font-size: 13px; + font-weight: bold; color: #1B3E6F; } -.actionBtns .btn.import-action{ - border: solid 1px #D0DFF1; - color: #1B3E6F; - +.new-action:hover{ + background: #D7E7F9; } -.actionsList, .componentsList{ - padding: 0 12px 20px; + margin-top: 16px; + padding: 0 20px 10px; } .componentsList{ padding-bottom: 0; - height: calc( 100vh - 218px)!important; - overflow: scroll; + /* height: calc( 100vh - 218px)!important; + overflow: scroll;*/ background: #F4F9FE !important; } .custom-control.custom-checkbox:hover, @@ -350,18 +386,18 @@ p.compType-4{ cursor: pointer; } .custom-control{ - padding-top: 10px; - width: 315px; height: 40px; - margin-left: -15px; font-size: 14px; - padding-bottom: 0; + line-height: 40px; } .custom-control:hover{ background-color: white; } - -.actionsList .custom-checkbox, +.actionsList, +.componentsList{ + height: 65vh !important; + overflow-y: auto; +} .componentsList .list-group-item{ margin-bottom: 10px; padding-left: 40px; @@ -374,7 +410,7 @@ p.compType-4{ padding: 6px; vertical-align: unset; color: #1B3E6F; - font-size: 14px; + font-size: 13px; line-height: 20px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; @@ -409,6 +445,12 @@ p.compType-4{ border: solid 1px #D9E6F2; color: #C3CDDB; } +.controllerSidebar .custom-control label{ + margin-bottom: 0; +} +.controllerSidebar .custom-control i{ + margin-right: 9px; +} /*Components List*/ .componentsList .list-group-item{ padding-left: 36px; @@ -507,7 +549,7 @@ p.compType-4{ .functionAttributeSidebar{ width: 440px; padding: 0px; - margin-top: 50px; + margin-top: 45px; } .functionAttributeSidebar .attributesContainer{ background: #fff; 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 diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts index 3d10f99e7..9b8781d9b 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -180,7 +180,7 @@ export class DesignerComponent implements OnInit, OnDestroy { this.palettePaper = new joint.dia.Paper({ el: $('#palette-paper'), model: this.paletteGraph, - width: 300, + width: 318, height: $('#palette-paper').height(), // background: { // color: 'rgba(0, 255, 0, 0.3)' diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css index 75274ba33..bc1890bdb 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css @@ -6,8 +6,6 @@ body{ background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important; background-size: 6px 6px !important; } - - /*Header*/ header{ height: 60px; |