diff options
author | 2020-10-05 15:18:41 +0200 | |
---|---|---|
committer | 2020-10-05 17:41:05 +0200 | |
commit | f08c5e96d5b4c0792c4709093480f5f6cb452d49 (patch) | |
tree | c3771e914a5b2fd465de691dfe76b4f725e2fd94 /cds-ui/designer-client/src/app/modules/feature-modules/packages/designer | |
parent | a7581011658acf44c7eff92bd2f2716b91116dc5 (diff) |
HTML for Action & Function Attributes
Issue-ID: CCSDK-2808
Issue-ID: CCSDK-2281
Issue-ID: CCSDK-2292
Issue-ID: CCSDK-2809
Issue-ID: CCSDK-2810
Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: If37f968a03b18ea5d3d0a7cb8697bd4756b61bcc
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer')
3 files changed, 602 insertions, 377 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 e1de6f60f..43f3818a0 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 @@ -593,39 +593,69 @@ p.compType-4{ .componentContainer p{ font-size: 12px; } -.functionAttributeSidebar{ +.attributeSidebar{ width: 440px; padding: 0px; margin-top: 45px; } -.functionAttributeSidebar .attributesContainer{ +.attributesContainer{ + padding: 0; background: #fff; border: solid 1px #C1CDDD; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); } /*ATTRIBUTES SIDE BAR*/ .attributesSideBar{ - width: 396px; + width: 358px; padding: 0px; - margin-top: 50px; + margin-top: 45px; } .attributesSideBar .attributesContainer{ + height: 85.9vh; + overflow-y: hidden; + padding-bottom: 20px; background: #fff; border: solid 1px #C1CDDD; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); } .closeBar{ float: left; - width: 50%; - height: 42px; - background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ; + padding: 0 !important; + width: 38px; + height: 35px; + background:#D9E3EE; border: 0; outline: 0; - margin-left: -30px; } .closeBar:focus{ outline: none; } +.attributesContainer .scrollWrapper{ + overflow-y: auto; + height: 79vh; +} +.attributesContainer .nav-link{ + padding-top: 7px !important; + padding-bottom: 7px !important; + color: #1B3E6F !important; + text-transform: capitalize !important; + border: solid 1px #ECEDF2 !important; + border-radius: 0 !important; +} +.attributesContainer .nav-item:first-child a{ + border-top-left-radius: 4px !important; + border-bottom-left-radius: 4px !important; + border-right-width: 0 !important; +} +.attributesContainer .nav-item:last-child a{ + border-top-right-radius: 4px !important; + border-bottom-right-radius: 4px !important; + border-left-width: 0 !important; +} +.nav-pills .nav-link.active{ + background-color: #1B3E6F; + color: #fff !important; +} .attributesContainer h1{ margin-bottom: 10px; padding: 12px 0 12px 15px; @@ -635,24 +665,91 @@ p.compType-4{ text-transform: uppercase; color: #1B3E6F; } +.attributesContainertTitle{ + height: 35px; + margin-bottom: 9px !important; + padding: 0; + background: #DEE8F3; + font-size: 12px; +} +.add-attribute{ + margin: 15px 0; + padding: 15px 9px; + background-color: #F4F9FE; +} +.add-attribute h5{ + padding: 0; + margin-bottom: 12px; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + color: #1B3E6F; +} +.add-attribute .btn{ + width: 100%; + background-color: #fff; + border: solid 1px #C1CDDD; + color: #1B3E6F; + line-height: 18px; + border-radius: 4px; +} +.add-attribute .btn:hover{ + background-color: #1B3E6F; +} +.add-attribute .btn:hover i::before{ + color: #fff; +} +.icon-function-attribute{ + font-size: 18px; +} +.add-attribute span{ + font-size: 11px; + line-height: 16px; +} +.attributesContainertTitle .btn-group{ + margin-top: 3px; +} +.attributesContainertTitle .btn{ + margin-left: 8px !important; + padding: 1px 9px !important; + border-radius: 4px !important; +} .attributesContainer h6{ - margin-bottom: 10px; - padding: 12px 0 12px 15px; + padding: 0; + margin-bottom: 0; background: #DEE8F3; + line-height: 35px !important; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #1B3E6F; } -.actionName{ - margin-bottom: 21px; +.view-source, +.view-source:hover{ + background: #103D73; + border-color: #D0DFF1; + color: #fff; + font-size: 11px; +} +.trash-item, +.trash-item:hover{ + background: #fff; + border-color: #D0DFF1; + color: #103D73; +} +.trash-item{ + font-size: 14px; } .attributesContainer label{ color: #1B3E6F; - text-transform: uppercase; - font-size: 11px; + /* text-transform: uppercase; */ + font-size: 12px; font-weight: bold; } +.attributesContainer label.custom-control-label{ + text-transform: unset; + font-weight: normal; +} .attributesContainer .form-group{ margin-bottom: 9px; } @@ -670,23 +767,119 @@ p.compType-4{ .attributesContainer .form-control::placeholder{ color: #CFD7E5; } -.scrolll{ - max-height: 88.75vh; - overflow-y: auto; +.attributesContainer .attribute-value{ + text-transform: unset; + display: block; + width: 100%; + padding: 0 .75rem .375rem 0; + font-size: 12px; + font-weight: normal; +} +.attributesContainer textarea{ + height: 60px; +} +.icon-required-star{ + font-size: 10px; +} +.optional-attribute::before{ + color: #CAD3E0; +} +.attributeOptions{ + display: none; + border: 0; +} +.attributeOptions a:not(:first-child){ + margin-left: 18px; +} +.attributeOptions i{ + color: #103D73 !important; + font-size: 16px; +} +.editAttribute i{ + font-size: 14px; +} +.action-attributes .form-group{ + display: inline-block; + width: 100%; + padding-left: 12px; + /* line-height: 30px; */ +} +.action-attributes .form-group:hover{ + cursor: pointer !important; + background-color: #F5FAFF; +} +.action-attributes .form-group:hover label{ + cursor: pointer !important; + /* padding-left: 12px; */ +} +.action-attributes .form-group:hover .attributeOptions{ + display: inline-block; + position: relative; + left: 8%; + top: 3px; +} + +.btn-select-template{ + background-color: #C3CDDB; + border-radius: 2px; + color: #1B3E6F; + font-size: 12px; +} +.btn-select-template i{ + font-size: 16px; + vertical-align: text-bottom; +} +.attribute-wrap{ + padding-bottom: 15px; + margin-bottom: 9px; + border-bottom: solid 1px #F4F9FE; +} +.attribute-wrap .form-group{ + margin-bottom: 0; +} +.template-mapping-list{ + margin-bottom: 15px; + font-size: 13px; +} +.template-mapping-list p{ + width: 56%; +} +.deleteTemplate{ + right: 30px; + top: -8px; +} +.deleteTemplate i{ + color: #103D73 !important; +} +.icon-close::before{ + color: #103D73; + font-size: 10px !important; +} +.accordion{ + margin-top: 12px; } .accordion > .card{ margin-bottom: 0 !important; border: 0; + box-shadow: none; +} +.card-header .btn-link, +.accordion .card-header .btn-link[aria-expanded="true"], +.accordion .card-header .btn-link[aria-expanded="false"]{ + padding-left: 15px !important; + padding-right: 15px !important; } .accordion > .card .card-header{ margin: 0; - padding: 0; + padding: 0 !important; background-color: #F4F9FE; border: 0; border-radius: 0; } + .accordion > .card .card-body{ - padding-bottom: 10px !important; + padding-top: 20px !important; + padding-bottom: 0 !important; } .accordion .btn-link{ padding: 0; @@ -696,6 +889,9 @@ p.compType-4{ text-transform: uppercase; line-height: 15px; } +.btn-link::before{ + font-size: 15px !important; +} .accordion .btn-link:hover{ color: #103D73; text-decoration: unset; @@ -708,12 +904,12 @@ p.compType-4{ font-weight: normal; font-size: 12px; } -.accordion .card-header .btn-link[aria-expanded="true"]:after{ +/* .accordion .card-header .btn-link[aria-expanded="true"]:after{ content: "\f078"; } .accordion .card-header .btn-link[aria-expanded="false"]:after{ content: "\f054"; -} +} */ .btn-addAttribute{ width: 20px; height: 20px; @@ -778,11 +974,7 @@ p.compType-4{ margin-left: 12px; font-weight: bold; } -.function-attribute{ - margin-right: -16px; -} .trash-span{ - margin-left: 150px; font-size:15px } @@ -856,3 +1048,10 @@ ul.editor{ .zoom-percent{ font-size: 12px; } +/*Modal*/ +.modal-backdrop{z-index: -1} +.modal-holder.modal-backdrop{z-index: 100} +.modal-holder + .modal-dialog {z-index: 1000} +.modal-dialog{ + max-width: 680px; +}
\ No newline at end of file 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 0595db1ce..980a94ca5 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> @@ -103,33 +103,36 @@ </div> </div> </header> - +<!--Editor Bar--> <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--> <div class="collapse navbar-collapse "> + <!--Action Tabs--> <ul class="navbar-nav"> <li class="nav-item active"> <nav class="row"> - <!--Nav Tabs--> <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> </li> </ul> + <!--Requirement/Capability Legend--> <ul class="templateLegend ml-auto mr-auto p-0"> <li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li> <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li> </ul> - + <!--Undo/Redo Buttons--> <ul class="editor navbar"> <li> <button type="button" class="btn tooltip-bottom" data-tooltip="Undo"> @@ -153,34 +156,32 @@ <img src="/assets/img/icon-zoomIn.svg"></button> </li> </ul> - + <!--Designer/Scripting View Tabs--> <ul class="navbar ml-2" style="list-style: none"> <li class="nav-item"> <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> </ul> - </div> </nav> <ng-sidebar-container class="sidebar-container"> - <!-- Controller SideBar --> + <!--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> @@ -188,10 +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 /> + <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary"> + Function Attributes + </button> + <br /> <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action"> + New Action </button> @@ -205,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> @@ -217,16 +225,14 @@ <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 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 --> - + <!--Page content--> <div ng-sidebar-content id="board-paper"> <button class="rotate" (click)="_toggleSidebar1()"> <span> @@ -235,7 +241,9 @@ </span> </button> - <!-- Canvas --> + + <!-- CANVAS --> + <!--Editor Bar--> <div class="editBar text-center"> <div class="btn-group mr-2" role="group" aria-label="First group"> <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo"> @@ -259,185 +267,165 @@ <button type="button" class="btn btn-secondary topologyView">Source</button> </div> </div> - <!-- <div class="card actionContainer"> - <div class="card-header"> - <span>Action 1</span> - </div> - <div class="card-body"> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType1.svg" title=""> - <h2>config-assign</h2> - <p>component-resource-resolution</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType2.svg" title=""> - <h2>execute</h2> - <p>component-netconf-executor</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType3.svg" title=""> - <h2>function 1</h2> - <p>dg-generic</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType2.svg" title=""> - <h2>execute</h2> - <p>component-netconf-executor</p> - </a> - </div> - </div> --> - <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> --> + <!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> --> </div> - <!-- Action Attribute SideBar --> - <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" - [position]="'right'" #sidebarRight> + + <!--Right Side Menu - Action Attribute--> + <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" + [position]="'right'" #sidebarRight1> <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"> - <h1>Action Attributes</h1> - <div class="scrolll"> + <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" class="btn trash-item" tooltip="Delete Action" + 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 actionName"> + <div class="form-group"> <label for="exampleInputEmail1">Action Name</label> - <input type="text" class="form-control" placeholder="Action 1"> + <input type="text" class="form-control" placeholder="Action Name" + value="resource-assignment"> </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"> - Steps - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> - </div> + <!--Add Attribute--> + <div class="row m-b add-attribute"> + <div class="col"> + <h5>Add Attribute</h5> + <div class="row"> + <div class="col pr-0 text-center"> + <button type="button" data-toggle="modal" data-target="#exampleModalScrollable" + class="btn btn-secondary"><i class="icon-custom-attribute" type="button" + aria-hidden="true"></i></button> + <span>Custom Attribute</span> - <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">Name</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">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> </div> + <div class="col text-center"> + <button type="button" class="btn btn-secondary"><i + class="icon-function-attribute" type="button" + aria-hidden="true"></i></button> + <span>Function Attribute</span> + </div> </div> </div> + </div> + <!--INPUTS--> + <div class="accordion" id="accordionExample"> <div class="card"> - <div class="card-header row" id="headingTwo"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseTwo" aria-expanded="true" - aria-controls="collapseTwo"> - Inputs - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> + <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"> + Inputs + </button> </div> - <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" - data-parent="#accordionExample"> - <div class="card-body"> + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample"> + <div class="card-body action-attributes"> <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">Name</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 class="col"> + <div class="form-group"> + <label for="exampleFormControlTextarea1">template-prefix + <i class="icon-required-star" type="button" + aria-hidden="true"></i></label> + <div class="attributeOptions"> + <a data-toggle="modal" data-target="#templateDeletionModal" + class="accordion-delete editAttribute" + tooltip="Edit Attribute" placement="bottom"><i + class="icon-edit"></i></a><a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteAttribute" + tooltip="Delete Attribute" placement="bottom"><i + class="icon-delete-sm"></i></a> + </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">resource-assignment-properties <i + class="icon-required-star" type="button" + aria-hidden="true"></i></label> + <div class="attributeOptions"> + <a data-toggle="modal" data-target="#templateDeletionModal" + class="accordion-delete editAttribute" + tooltip="Edit Attribute" placement="bottom"><i + class="icon-edit"></i></a><a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteAttribute" + tooltip="Delete Attribute" placement="bottom"><i + class="icon-delete-sm"></i></a> + </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">occurrence <i + class="icon-required-star optional-attribute" type="button" + aria-hidden="true"></i></label> + <div class="attributeOptions"> + <a data-toggle="modal" data-target="#templateDeletionModal" + class="accordion-delete editAttribute" + tooltip="Edit Attribute" placement="bottom"><i + class="icon-edit"></i></a><a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteAttribute" + tooltip="Delete Attribute" placement="bottom"><i + class="icon-delete-sm"></i></a> + </div> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">store-result + <i class="icon-required-star optional-attribute" type="button" + aria-hidden="true"></i></label> + <div class="attributeOptions"> + <a data-toggle="modal" data-target="#templateDeletionModal" + class="accordion-delete editAttribute" + tooltip="Edit Attribute" placement="bottom"><i + class="icon-edit"></i></a><a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteAttribute" + tooltip="Delete Attribute" placement="bottom"><i + class="icon-delete-sm"></i></a> + </div> + </div> </div> </div> - <div class="form-group"> - <label for="exampleInputEmail1">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - </div> </div> </div> + </div> + <!--OUTPUTS--> + <div class="accordion" id="accordionExample1"> <div class="card"> - <div class="card-header row" id="headingThree"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseThree" aria-expanded="true" - aria-controls="collapseThree"> - Outputs - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> + <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"> + Outputs + </button> </div> - <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" - data-parent="#accordionExample"> + + <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample1"> <div class="card-body"> <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">Name</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> + <div class="col"> + <div class="form-group"> + <label for="exampleFormControlTextarea1">resolved-data + <i class="icon-required-star optional-attribute" type="button" + aria-hidden="true"></i></label> + </div> </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - </div> </div> </div> @@ -446,212 +434,250 @@ </div> </div> </div> + <!-- Modal --> + </ng-sidebar> - <!-- Function Attribute SideBar --> - <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" - [mode]="'push'" [position]="'right'" #sidebarRight> + <!--Right Side Menu - Function Attribute--> + <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'" + [position]="'right'" #sidebarRight2> <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"> - <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 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> + </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> + <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> + <div class="scrollWrapper"> <div class="row m-0"> <div class="col"> - <div class="form-group actionName"> - <label for="exampleInputEmail1">Function Name</label> - <input type="text" class="form-control" placeholder="Function Name"> + <div class="form-group"> + <label for="exampleInputEmail1">Function Instance Name</label> + <input type="text" class="form-control" placeholder="Function Instance Name"> </div> - </div> - </div> - <div class="row m-0"> - <div class="col"> - <div class=" actionName"> + <div class="form-group"> <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> + <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> - </div> - <div class="accordion" id="accordionExample"> - <div class="card"> - <div class="card-header row" id="headingOne"> - <h2 class="col-10 mb-0"> + <!--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"> - Interface + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + Interfaces </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 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 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"> + <!--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="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - Artifact + data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> + Artifacts </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 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 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> + <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> - </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> + <app-functions-attribute></app-functions-attribute> +<!--Action - Add Custom Attribute - Modal--> +<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" + aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> + <div class="modal-dialog modal-dialog-scrollable" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalScrollableTitle"> + Add Custom Attributes</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <img src="assets/img/icon-close.svg" /> + </button> + </div> + <div class="modal-body"> + <ul class="nav nav-tabs" id="myTab" role="tablist"> + <li class="nav-item"> + <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + </li> + </ul> + <div class="tab-content" id="myTabContent"> + <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> + <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary">Submit Attributes</button> + </div> + </div> + </div> +</div>
\ 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 3078fe757..1475f1ac3 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 @@ -61,7 +61,7 @@ import {ToastrService} from 'ngx-toastr'; export class DesignerComponent implements OnInit, OnDestroy { controllerSideBar: boolean; - attributesSideBar: boolean; + actionAttributesSideBar: boolean; functionAttributeSidebar: boolean; viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); customActionName: string; @@ -96,7 +96,7 @@ export class DesignerComponent implements OnInit, OnDestroy { private packageCreationExtractionService: PackageCreationExtractionService, private toastService: ToastrService) { this.controllerSideBar = true; - this.attributesSideBar = false; + this.actionAttributesSideBar = false; this.showAction = false; this.functionAttributeSidebar = false; @@ -113,7 +113,7 @@ export class DesignerComponent implements OnInit, OnDestroy { } _toggleSidebar2() { - this.attributesSideBar = !this.attributesSideBar; + this.actionAttributesSideBar = !this.actionAttributesSideBar; } publishBluePrint() { |