summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSarah Abouzainah <sabouzainah.ext@orange.com>2020-10-05 15:18:41 +0200
committerSarah Abouzainah <sabouzainah.ext@orange.com>2020-10-05 17:41:05 +0200
commitf08c5e96d5b4c0792c4709093480f5f6cb452d49 (patch)
treec3771e914a5b2fd465de691dfe76b4f725e2fd94
parenta7581011658acf44c7eff92bd2f2716b91116dc5 (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
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css249
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html724
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts6
-rwxr-xr-xcds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eotbin24032 -> 25056 bytes
-rwxr-xr-xcds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg5
-rwxr-xr-xcds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttfbin23868 -> 24892 bytes
-rwxr-xr-xcds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woffbin23948 -> 24972 bytes
-rwxr-xr-xcds-ui/designer-client/src/assets/icomoon/style.css28
-rw-r--r--cds-ui/designer-client/src/styles.css1
9 files changed, 631 insertions, 382 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">&#xf100;</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">
+ &nbsp;&nbsp;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> &nbsp;
- <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> &nbsp;
- <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> &nbsp;
- <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> &nbsp;
- <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> &nbsp;
- <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> &nbsp;
- <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() {
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
index 6a503aa78..2bdafa68d 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
Binary files differ
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
index 41bd25626..7b07f9c3f 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
@@ -18,6 +18,11 @@
<glyph unicode="&#xe908;" glyph-name="icon-get_started" d="M1003.008 959.872c-199.893 3.584-427.861-100.907-572.16-262.997-137.899-2.603-272.171-59.136-371.029-157.995-5.76-5.675-7.808-14.165-5.291-21.845 2.56-7.723 9.216-13.312 17.237-14.464l164.437-23.552-20.309-22.741c-7.552-8.448-7.168-21.291 0.853-29.312l274.219-274.219c4.139-4.139 9.6-6.229 15.104-6.229 5.077 0 10.155 1.792 14.208 5.419l22.741 20.309 23.552-164.437c1.152-8.021 7.467-13.909 15.104-16.469 1.963-0.64 4.011-0.939 6.101-0.939 6.059 0 12.245 2.645 16.512 6.869 97.493 97.493 154.027 231.765 156.629 369.664 162.261 144.597 267.605 372.48 262.955 572.117-0.299 11.349-9.472 20.523-20.864 20.821zM806.4 591.573c-20.779-20.779-48.085-31.189-75.435-31.189s-54.656 10.411-75.435 31.189c-41.557 41.6-41.557 109.269 0 150.869 41.6 41.6 109.269 41.6 150.869 0s41.6-109.312 0-150.869zM116.224 238.72c-45.653-45.653-108.331-251.904-115.328-275.243-2.261-7.509-0.171-15.659 5.333-21.205 4.096-4.096 9.515-6.272 15.104-6.272 2.048 0 4.096 0.299 6.144 0.896 23.339 6.997 229.589 69.675 275.243 115.328 51.413 51.413 51.413 135.083 0 186.496-51.456 51.413-135.083 51.371-186.496 0z" />
<glyph unicode="&#xe909;" glyph-name="icon-user_guide" d="M182.318 221.526v738.474h-49.18c-72.456 0-131.404-58.948-131.404-131.404v-648.796c30.102 25.97 69.248 41.728 112.030 41.728h68.554zM795.95 450.1c6.458 0 12.862-0.236 19.214-0.66v510.56h-572.956v-738.474h273.492c26.68 130.278 142.202 228.574 280.25 228.574zM423.968 783.658h200.44v-59.89h-200.44zM356.262 653.638h335.852v-59.89h-335.852zM549.012 19.818h-395.51v59.89h369.092c-8.198 26.514-12.636 54.66-12.688 83.818h-396.142c-62.73 0-113.764-51.034-113.764-113.762 0-62.73 51.034-113.764 113.764-113.764h509.716c-29.982 22.73-55.356 51.222-74.468 83.818zM795.95 392.1c-125.748 0-228.052-102.302-228.052-228.050s102.304-228.050 228.052-228.050c125.746 0 228.050 102.304 228.050 228.050 0 125.748-102.304 228.050-228.050 228.050zM795.928 300.576c16.818 0 29.272-13.746 30-30 0.726-16.202-14.308-30-30-30-16.818 0-29.272 13.746-30 30-0.726 16.202 14.308 30 30 30zM825.996 47.13h-60v153.598h60z" />
<glyph unicode="&#xe90a;" glyph-name="icon-autoMap" horiz-adv-x="904" d="M865.588 451.765c0-65.786-53.332-119.118-119.118-119.118s-119.118 53.332-119.118 119.118c0 65.786 53.332 119.118 119.118 119.118s119.118-53.332 119.118-119.118zM19.853 940.147h230.294v-230.294h-230.294zM19.853 193.676h230.294v-230.294h-230.294zM19.853 566.912h230.294v-230.294h-230.294zM885.441 451.765c0 76.628-62.343 138.971-138.971 138.971s-138.971-62.343-138.971-138.971c0-76.628 62.343-138.971 138.971-138.971s138.971 62.343 138.971 138.971zM746.471 352.5c-54.735 0-99.265 44.53-99.265 99.265s44.53 99.265 99.265 99.265c54.735 0 99.265-44.53 99.265-99.265s-44.53-99.265-99.265-99.265zM250.147 960h-230.294c-10.966 0-19.853-8.887-19.853-19.853v-230.294c0-10.966 8.887-19.853 19.853-19.853h230.294c10.966 0 19.853 8.887 19.853 19.853v230.294c0 10.966-8.887 19.853-19.853 19.853zM230.294 729.706h-190.588v190.588h190.588v-190.588zM250.147 213.529h-230.294c-10.966 0-19.853-8.887-19.853-19.853v-230.294c0-10.966 8.887-19.853 19.853-19.853h230.294c10.966 0 19.853 8.887 19.853 19.853v230.294c0 10.966-8.887 19.853-19.853 19.853zM230.294-16.765h-190.588v190.588h190.588v-190.588zM250.147 586.765h-230.294c-10.966 0-19.853-8.887-19.853-19.853v-230.294c0-10.966 8.887-19.853 19.853-19.853h230.294c10.966 0 19.853 8.887 19.853 19.853v230.294c0 10.966-8.887 19.853-19.853 19.853zM230.294 356.471h-190.588v190.588h190.588v-190.588zM329.559 431.912h138.971l-31.765-23.824c-8.771-6.576-10.547-19.023-3.971-27.794 3.901-5.196 9.864-7.941 15.898-7.941 4.149 0 8.321 1.295 11.896 3.971l79.412 59.559c0.101 0.070 7.941 5.956 7.941 15.882 0 6.126-3.017 12.214-7.941 15.882l-79.412 59.559c-8.771 6.584-21.218 4.8-27.794-3.971s-4.8-21.218 3.971-27.794l31.765-23.824h-138.971c-10.966 0-19.853-8.887-19.853-19.853s8.887-19.853 19.853-19.853zM329.559 805.147h168.463l138.971-138.971h-49.345c-10.966 0-19.853-8.887-19.853-19.853s8.887-19.853 19.853-19.853h99.265c12.726 0 22.621 13.215 19.062 25.413l-27.794 95.294c-3.071 10.524-14.099 16.58-24.622 13.502-10.524-3.071-16.565-14.091-13.494-24.622l6.91-23.699-126.687 126.687c-3.722 3.715-8.771 5.809-14.037 5.809h-176.691c-10.966 0-19.853-8.887-19.853-19.853s8.887-19.853 19.853-19.853zM686.912 273.088h-99.265c-10.966 0-19.853-8.887-19.853-19.853s8.887-19.853 19.853-19.853h49.345l-138.971-138.971h-168.463c-10.966 0-19.853-8.887-19.853-19.853s8.887-19.853 19.853-19.853h176.691c5.266 0 10.314 2.094 14.037 5.816l126.687 126.687-6.918-23.707c-3.071-10.531 2.978-21.551 13.502-24.615 1.861-0.543 3.73-0.807 5.568-0.807 8.6 0 16.518 5.638 19.054 14.3 0 0 27.662 94.86 27.794 95.294 3.552 12.206-6.39 25.413-19.062 25.413v0z" />
+<glyph unicode="&#xe90b;" glyph-name="icon-required-star" d="M996.821 593.749l-314.795 48.085-141.099 300.544c-10.539 22.443-47.36 22.443-57.899 0l-141.056-300.544-314.795-48.085c-25.856-3.968-36.181-35.413-18.048-53.973l228.693-234.411-54.059-331.392c-4.309-26.325 23.808-46.080 47.061-33.152l281.173 155.392 281.173-155.435c23.040-12.8 51.413 6.571 47.061 33.152l-54.059 331.392 228.693 234.411c18.133 18.603 7.765 50.048-18.048 54.016v0z" />
+<glyph unicode="&#xe90c;" glyph-name="icon-source" horiz-adv-x="1365" d="M451.884 287.277c-0.917 6.337-4.31 12.047-9.433 15.881l-259.965 194.408 259.965 194.408c5.123 3.834 8.516 9.544 9.433 15.881 0.91 6.337-0.724 12.771-4.565 17.908l-41.298 55.22c-7.992 10.674-23.107 12.86-33.782 4.868l-359.655-268.957c-6.089-4.551-9.681-11.716-9.681-19.328s3.593-14.777 9.681-19.328l359.655-268.957c4.33-3.248 9.406-4.806 14.433-4.806 7.351 0 14.612 3.337 19.349 9.675l41.298 55.22c3.834 5.137 5.475 11.571 4.565 17.908zM1349.929 516.894l-359.641 268.957c-10.674 7.985-25.79 5.799-33.775-4.868l-41.298-55.22c-3.834-5.13-5.475-11.571-4.565-17.908 0.917-6.33 4.303-12.047 9.433-15.881l259.958-194.408-259.958-194.408c-5.13-3.834-8.516-9.55-9.433-15.881-0.91-6.337 0.724-12.778 4.565-17.908l41.298-55.22c4.744-6.337 11.998-9.675 19.349-9.675 5.027 0 10.095 1.565 14.433 4.806l359.641 268.957c6.089 4.551 9.681 11.716 9.681 19.328s-3.6 14.777-9.688 19.328zM912.043 929.411l-63.516 26.858c-5.889 2.496-12.536 2.538-18.473 0.138-5.93-2.407-10.668-7.068-13.157-12.964l-379.259-897.010c-5.192-12.274 0.552-26.438 12.833-31.63l63.516-26.858c3-1.276 6.199-1.903 9.399-1.903 3.082 0 6.165 0.593 9.075 1.772 5.93 2.407 10.661 7.068 13.157 12.964l379.259 897.010c5.186 12.274-0.559 26.431-12.833 31.623z" />
+<glyph unicode="&#xe90d;" glyph-name="icon-add-circle" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" />
+<glyph unicode="&#xe90e;" glyph-name="icon-function-attribute" horiz-adv-x="1229" d="M1166.428 461.798c3.568 8.632 1.58 18.556-5.028 25.151l-415.328 415.328c-9.167 8.851-23.772 8.598-32.629-0.569-8.633-8.944-8.633-23.117 0-32.058l375.967-375.967h-1005.695c-12.742-0.002-23.075-10.331-23.075-23.077s10.331-23.075 23.075-23.075h1005.695l-375.918-375.918c-9.167-8.851-9.42-23.46-0.569-32.629 8.851-9.167 23.46-9.418 32.629-0.569 0.192 0.188 0.38 0.373 0.569 0.569l415.328 415.328c2.132 2.144 3.826 4.686 4.981 7.481zM729.778 32.212c-12.742-0.026-23.094 10.289-23.114 23.035-0.012 6.144 2.431 12.036 6.778 16.376l399.041 398.99-399.041 398.992c-8.851 9.167-8.598 23.772 0.569 32.629 8.944 8.633 23.117 8.633 32.058 0l415.328-415.328c9.010-9.012 9.010-23.615 0-32.629l-415.328-415.328c-4.321-4.312-10.178-6.736-16.29-6.736zM1145.107 447.538h-1061.393c-12.742 0-23.075 10.331-23.075 23.072s10.331 23.075 23.075 23.075h1061.396c12.742 0 23.075-10.331 23.075-23.075s-10.331-23.072-23.077-23.072z" />
+<glyph unicode="&#xe90f;" glyph-name="icon-custom-attribute" d="M35.552 421.088c-19.808 0-35.552 16.256-35.552 36.064s15.744 35.552 35.552 35.552h431.2v431.232c0.032 19.808 16.288 36.064 36.096 36.064s35.552-16.256 35.552-36.064v-431.232h431.2c19.808 0 36.064-15.744 36.064-35.552s-16.256-36.064-36.064-36.064h-431.2v-431.232c0-19.808-15.744-36.064-35.552-36.064s-36.064 16.256-36.064 36.064v431.232h-431.232z" />
<glyph unicode="&#xe915;" glyph-name="icon-add" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" />
<glyph unicode="&#xe952;" glyph-name="icon-archive-sm" d="M943.405 684.258h-864.783c-10.653 0-19.867-3.887-27.644-11.668-7.781-7.777-11.668-16.991-11.668-27.637v-589.626c0-10.644 3.887-19.863 11.668-27.637 7.777-7.781 16.991-11.677 27.644-11.677h864.783c10.647 0 19.854 3.896 27.637 11.677 7.775 7.773 11.662 16.991 11.662 27.637v589.626c0 10.653-3.872 19.858-11.662 27.637-7.775 7.781-16.991 11.668-27.637 11.668zM617.255 499.387c-7.773-7.779-16.991-11.668-27.637-11.668h-157.233c-10.64 0-19.854 3.892-27.637 11.668-7.777 7.781-11.668 16.991-11.668 27.644 0 10.644 3.892 19.858 11.668 27.637 7.781 7.781 16.995 11.673 27.637 11.673h157.249c10.638 0 19.85-3.892 27.637-11.673 7.775-7.777 11.662-16.991 11.662-27.637 0-10.651-3.896-19.863-11.677-27.644zM1010.357 947.749c-7.783 7.781-16.991 11.668-27.639 11.668h-943.409c-10.644 0-19.858-3.887-27.637-11.668-7.779-7.777-11.671-16.991-11.671-27.637v-157.233c0-10.644 3.892-19.854 11.673-27.637 7.779-7.781 16.991-11.668 27.637-11.668h943.394c10.644 0 19.863 3.887 27.652 11.668 7.773 7.781 11.66 16.991 11.66 27.637v157.233c0 10.653-3.887 19.86-11.66 27.637z" />
<glyph unicode="&#xe953;" glyph-name="icon-btn-card-config" d="M971.283 561.778h-95.801c-15.398 0-28.084 8.476-33.982 22.699s-2.901 29.203 7.964 40.088l67.736 67.717c9.956 9.956 15.436 23.211 15.436 37.281 0 14.089-5.48 27.326-15.436 37.3l-86.338 86.338c-19.911 19.911-54.632 19.949-74.581 0l-67.717-67.717c-10.885-10.866-25.903-13.9-40.088-7.983-14.222 5.897-22.699 18.584-22.699 33.982v95.801c0 29.070-23.647 52.717-52.717 52.717h-122.121c-29.070 0-52.717-23.647-52.717-52.717v-95.801c0-15.398-8.476-28.084-22.699-33.982-14.184-5.935-29.203-2.882-40.088 7.983l-67.717 67.717c-19.949 19.949-54.67 19.911-74.581 0l-86.338-86.338c-9.956-9.956-15.436-23.211-15.436-37.3 0-14.071 5.48-27.307 15.436-37.281l67.736-67.717c10.866-10.885 13.843-25.865 7.964-40.088s-18.584-22.699-33.982-22.699h-95.801c-29.070 0-52.717-23.647-52.717-52.717v-122.103c0-29.089 23.647-52.736 52.717-52.736h95.801c15.398 0 28.084-8.476 33.982-22.699s2.901-29.203-7.964-40.088l-67.736-67.717c-9.956-9.956-15.436-23.211-15.436-37.281 0-14.089 5.48-27.326 15.436-37.3l86.338-86.338c19.93-19.93 54.632-19.968 74.581 0l67.717 67.736c10.885 10.866 25.847 13.862 40.088 7.964 14.222-5.897 22.699-18.584 22.699-33.982v-95.801c0-29.070 23.647-52.717 52.717-52.717h122.103c29.070 0 52.717 23.647 52.717 52.717v95.801c0 15.398 8.476 28.084 22.699 33.982 14.241 5.916 29.203 2.901 40.088-7.964l67.717-67.736c19.949-19.949 54.67-19.911 74.581 0l86.338 86.338c9.956 9.956 15.436 23.211 15.436 37.3 0 14.071-5.48 27.307-15.436 37.281l-67.736 67.717c-10.866 10.885-13.843 25.865-7.964 40.088s18.603 22.699 34.001 22.699h95.801c29.070 0 52.717 23.647 52.717 52.717v122.121c0 29.070-23.647 52.717-52.717 52.717zM986.074 386.939c0-8.154-6.637-14.791-14.791-14.791h-95.801c-30.796 0-57.249-17.673-69.025-46.118-11.795-28.444-5.594-59.657 16.194-81.427l67.736-67.717c5.784-5.784 5.784-15.17 0-20.935l-86.338-86.338c-5.765-5.765-15.151-5.803-20.935 0l-67.717 67.736c-21.788 21.788-52.983 27.951-81.427 16.194-28.444-11.776-46.118-38.229-46.118-69.025v-95.801c0-8.154-6.637-14.791-14.791-14.791h-122.121c-8.154 0-14.791 6.637-14.791 14.791v95.801c0 30.796-17.673 57.249-46.118 69.025-9.538 3.963-19.361 5.897-29.070 5.897-19.228 0-37.869-7.585-52.357-22.073l-67.717-67.736c-5.803-5.803-15.189-5.765-20.935 0l-86.338 86.338c-5.784 5.784-5.784 15.17 0 20.935l67.736 67.717c21.769 21.769 27.989 52.983 16.194 81.427-11.776 28.425-38.229 46.099-69.025 46.099h-95.801c-8.154 0-14.791 6.637-14.791 14.791v122.121c0 8.154 6.637 14.791 14.791 14.791h95.801c30.796 0 57.249 17.673 69.025 46.118 11.795 28.444 5.594 59.657-16.194 81.427l-67.736 67.717c-5.784 5.784-5.784 15.17 0 20.935l86.338 86.338c5.765 5.784 15.151 5.784 20.935 0l67.717-67.717c21.751-21.751 52.945-27.989 81.427-16.194 28.444 11.757 46.118 38.21 46.118 69.006v95.801c0 8.154 6.637 14.791 14.791 14.791h122.103c8.173 0 14.81-6.637 14.81-14.791v-95.801c0-30.796 17.673-57.249 46.118-69.025 28.482-11.795 59.657-5.575 81.427 16.194l67.717 67.717c5.803 5.784 15.189 5.784 20.935 0l86.338-86.338c5.784-5.784 5.784-15.17 0-20.935l-67.736-67.717c-21.769-21.769-27.989-52.983-16.194-81.427 11.776-28.444 38.229-46.118 69.025-46.118h95.801c8.154 0.019 14.791-6.618 14.791-14.772v-122.121zM512 618.667c-94.113 0-170.667-76.553-170.667-170.667s76.553-170.667 170.667-170.667c94.113 0 170.667 76.553 170.667 170.667s-76.553 170.667-170.667 170.667zM512 315.259c-73.178 0-132.741 59.563-132.741 132.741s59.563 132.741 132.741 132.741c73.178 0 132.741-59.563 132.741-132.741s-59.563-132.741-132.741-132.741z" />
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
index 84ebbe486..48987f472 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
Binary files differ
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
index 27c38068e..6bea7e8eb 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
Binary files differ
diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css
index 9b17c06f9..899647321 100755
--- a/cds-ui/designer-client/src/assets/icomoon/style.css
+++ b/cds-ui/designer-client/src/assets/icomoon/style.css
@@ -1,10 +1,10 @@
@font-face {
font-family: 'icomoon';
- src: url('fonts/icomoon.eot?pg9o1c');
- src: url('fonts/icomoon.eot?pg9o1c#iefix') format('embedded-opentype'),
- url('fonts/icomoon.ttf?pg9o1c') format('truetype'),
- url('fonts/icomoon.woff?pg9o1c') format('woff'),
- url('fonts/icomoon.svg?pg9o1c#icomoon') format('svg');
+ src: url('fonts/icomoon.eot?h11si2');
+ src: url('fonts/icomoon.eot?h11si2#iefix') format('embedded-opentype'),
+ url('fonts/icomoon.ttf?h11si2') format('truetype'),
+ url('fonts/icomoon.woff?h11si2') format('woff'),
+ url('fonts/icomoon.svg?h11si2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@@ -35,6 +35,24 @@
-moz-osx-font-smoothing: grayscale;
}
+.icon-function-attribute:before {
+ content: "\e90e";
+}
+.icon-custom-attribute:before {
+ content: "\e90f";
+ color: #1b3e6f;
+}
+.icon-add-circle:before {
+ content: "\e90d";
+ color: #103d73;
+}
+.icon-required-star:before {
+ content: "\e90b";
+ color: #ff6469;
+}
+.icon-source:before {
+ content: "\e90c";
+}
.icon-autoMap:before {
content: "\e90a";
}
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 91b1f8652..ac2a87450 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -3081,6 +3081,7 @@ padding: 0 10px 0 0;
}
.template-mapping-list:hover,
.template-mapping-list.active {
+ cursor: pointer;
/* background: #1B3E6F; */
text-decoration: none;
/* color: #fff !important; */