summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSarah Abouzainah <sabouzainah.ext@orange.com>2020-10-13 18:12:04 +0200
committerSarah Abouzainah <sabouzainah.ext@orange.com>2020-10-13 18:13:39 +0200
commit87f19fdcf1a1ca6555a9810f9629775fa10e18af (patch)
tree970c02d6d24014046f81fb247b3d17f8b8aacf8d
parent182d67ef5c4acb5b0a551e604fa4f0d505f6931d (diff)
Add Optional Attributes Menu
Issue-ID: CCSDK-2812 Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com> Change-Id: Id2f89c57d974f5317b33725a9de67f48a3eb3d7c
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html173
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css104
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html24
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html78
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html4
-rw-r--r--cds-ui/designer-client/src/styles.css6
6 files changed, 251 insertions, 138 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
index ba4fba69a..63cf4bd6c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
@@ -3,8 +3,7 @@
<div class="col">
<div class="form-group">
<label for="exampleInputEmail1">Action Name</label>
- <input type="text" class="form-control" placeholder="Action Name"
- value="resource-assignment">
+ <input type="text" class="form-control" placeholder="Action Name" value="resource-assignment">
</div>
</div>
</div>
@@ -15,15 +14,13 @@
<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>
+ class="btn btn-secondary"><i class="icon-custom-attribute" type="button"
+ aria-hidden="true"></i></button>
<span>Custom Attribute</span>
-
-
</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>
+ <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>
@@ -32,31 +29,30 @@
<!--INPUTS-->
<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">
- Inputs
- </button>
+ <div class="card-header" id="headingOne">
+ <h2 class="mb-0">
+ <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
+ aria-expanded="true" aria-controls="collapseOne">
+ Inputs
+ </button>
+ </h2>
</div>
- <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
- data-parent="#accordionExample">
+ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body action-attributes">
<div class="row">
<div class="col">
<div class="form-group" *ngFor="let input of inputs">
<label for="exampleFormControlTextarea1">{{input.name}}
- <i [hidden]="!input.required" class="icon-required-star"
- type="button" aria-hidden="true"></i>
+ <i [hidden]="!input.required" class="icon-required-star" type="button"
+ aria-hidden="true"></i>
<i [hidden]="input.required" type="button" aria-hidden="true"></i>
</label>
<div class="attributeOptions">
<a data-toggle="modal" data-target="#exampleModalScrollable2"
- class="accordion-delete editAttribute"
- tooltip="Edit Attribute" placement="bottom"><i
- class="icon-edit"></i></a>
- <a class="accordion-delete deleteAttribute"
- tooltip="Delete Attribute" placement="bottom"><i
- class="icon-delete-sm"></i></a>
+ class="accordion-delete editAttribute" tooltip="Edit Attribute"
+ placement="bottom"><i class="icon-edit"></i></a>
+ <a class="accordion-delete deleteAttribute" tooltip="Delete Attribute"
+ placement="bottom"><i class="icon-delete-sm"></i></a>
</div>
</div>
</div>
@@ -68,25 +64,25 @@
<!--OUTPUTS-->
<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="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
- Outputs
- </button>
+ <div class="card-header" id="headingOne">
+ <h2 class="mb-0">
+ <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
+ aria-expanded="true" aria-controls="collapseTwo">
+ Outputs
+ </button>
+ </h2>
</div>
- <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
- data-parent="#accordionExample1">
+ <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample1">
<div class="card-body">
<div class="row">
<div class="col">
<div class="form-group" *ngFor="let output of outputs">
<label for="exampleFormControlTextarea1">{{output.name}}
- <i [hidden]="output.required"
- class="icon-required-star" type="button"
- aria-hidden="true"></i>
- <i [hidden]="!output.required" class="optional-attribute"
- type="button" aria-hidden="true"></i>
+ <i [hidden]="output.required" class="icon-required-star" type="button"
+ aria-hidden="true"></i>
+ <i [hidden]="!output.required" class="optional-attribute" type="button"
+ aria-hidden="true"></i>
</label>
</div>
@@ -99,14 +95,14 @@
</div>
<!--Action - Add Custom Attribute - Modal-->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
- aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
+ 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"/>
+ <img src="assets/img/icon-close.svg" />
</button>
</div>
<div class="modal-body createAttributeTabs">
@@ -114,60 +110,55 @@
<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">Inputs</a>
+ aria-controls="home" aria-selected="true">Inputs</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">Outputs</a>
+ aria-controls="profile" aria-selected="false">Outputs</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!--INPUTS Tab-->
<div class="tab-pane fade show active create-form" id="home" role="tabpanel"
- aria-labelledby="home-tab">
+ aria-labelledby="home-tab">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
<div class="col-sm-9">
<input [(ngModel)]="inputActionAttribute.name" type="email" class="form-control"
- id="inputEmail3" placeholder="Attribute name">
+ id="inputEmail3" placeholder="Attribute name">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<input [(ngModel)]="inputActionAttribute.description" type="text" class="form-control"
- id="inputPassword3"
- placeholder="Add some description">
+ id="inputPassword3" placeholder="Add some description">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
<div class="col-sm-9">
<div class="list-group list-group-horizontal">
- <button type="button"
- class="list-group-item list-group-item-action"
- (click)="setInputType('String')">
+ <button type="button" class="list-group-item list-group-item-action"
+ (click)="setInputType('String')">
String
</button>
- <button type="button"
- class="list-group-item list-group-item-action"
- (click)="setInputType('Integer')">Integer
+ <button type="button" class="list-group-item list-group-item-action"
+ (click)="setInputType('Integer')">Integer
</button>
- <button type="button"
- class="list-group-item list-group-item-action"
- (click)="setInputType('Boolean')">Boolean
+ <button type="button" class="list-group-item list-group-item-action"
+ (click)="setInputType('Boolean')">Boolean
</button>
<button type="button" class="list-group-item list-group-item-action"
- (click)="setInputType('List')">List
+ (click)="setInputType('List')">List
</button>
<button type="button" class="list-group-item list-group-item-action"
- (click)="setInputType('Other')">Other
+ (click)="setInputType('Other')">Other
</button>
</div>
<input [hidden]="!isInputOtherType" type="text" class="form-control mt-2 mb-2"
- id="inputPassword4"
- placeholder="Add Other type name"
- [(ngModel)]="inputOtherType" (change)="setInputType(inputOtherType)">
+ id="inputPassword4" placeholder="Add Other type name" [(ngModel)]="inputOtherType"
+ (change)="setInputType(inputOtherType)">
</div>
</div>
@@ -176,12 +167,12 @@
<div class="col-sm-9">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1"
- class="custom-control-input" (click)="setInputRequired(true)">
+ class="custom-control-input" (click)="setInputRequired(true)">
<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" (click)="setInputRequired(false)">
+ class="custom-control-input" (click)="setInputRequired(false)">
<label class="custom-control-label" for="customRadioInline2">False</label>
</div>
</div>
@@ -193,15 +184,14 @@
<label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
<div class="col-sm-9">
<input [(ngModel)]="outputActionAttribute.name" type="email" class="form-control"
- id="inputEmail3" placeholder="Attribute name">
+ id="inputEmail3" placeholder="Attribute name">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
- <input [(ngModel)]="outputActionAttribute.description"
- type="text" class="form-control" id="inputPassword3"
- placeholder="Add some description">
+ <input [(ngModel)]="outputActionAttribute.description" type="text" class="form-control"
+ id="inputPassword3" placeholder="Add some description">
</div>
</div>
<div class="form-group row">
@@ -209,30 +199,26 @@
<div class="col-sm-9">
<div class="list-group list-group-horizontal">
<button type="button" class="list-group-item list-group-item-action">String</button>
- <button type="button"
- class="list-group-item list-group-item-action"
- (click)="setOutputType('Integer')">
+ <button type="button" class="list-group-item list-group-item-action"
+ (click)="setOutputType('Integer')">
Integer
</button>
- <button type="button"
- class="list-group-item list-group-item-action"
- (click)="setOutputType('Boolean')">
+ <button type="button" class="list-group-item list-group-item-action"
+ (click)="setOutputType('Boolean')">
Boolean
</button>
<button type="button" class="list-group-item list-group-item-action"
- (click)="setOutputType('List')">
+ (click)="setOutputType('List')">
List
</button>
- <button type="button"
- class="list-group-item list-group-item-action"
- (click)="setOutputType('Other')">
+ <button type="button" class="list-group-item list-group-item-action"
+ (click)="setOutputType('Other')">
Other
</button>
</div>
<input [hidden]="!isOutputOtherType" type="text" class="form-control mt-2 mb-2"
- id="inputPassword3"
- placeholder="Add Other type name"
- [(ngModel)]="outputOtherType" (change)="setOutputType(outputOtherType)">
+ id="inputPassword3" placeholder="Add Other type name" [(ngModel)]="outputOtherType"
+ (change)="setOutputType(outputOtherType)">
</div>
</div>
<div class="form-group row">
@@ -240,14 +226,14 @@
<div class="col-sm-9">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1"
- class="custom-control-input" (click)="setOutputRequired(true)">
+ class="custom-control-input" (click)="setOutputRequired(true)">
<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">
+ class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2"
- (click)="setOutputRequired(false)">False</label>
+ (click)="setOutputRequired(false)">False</label>
</div>
</div>
</div>
@@ -263,14 +249,14 @@
</div>
<!--Delete Action - Modal-->
<div class="modal fade" id="exampleModalScrollable1" tabindex="-1" role="dialog"
- aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
- <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+ aria-labelledby="exampleModalScrollableTitle1" 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="exampleModalScrollableTitle1">
Delete Action</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">
@@ -285,14 +271,14 @@
</div>
<!--Action - Edit Custom Attribute - Modal-->
<div class="modal fade" id="exampleModalScrollable2" tabindex="-1" role="dialog"
- aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
- <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+ aria-labelledby="exampleModalScrollableTitle2" 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="exampleModalScrollableTitle2">
Edit Custom Attributes</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 createAttributeTabs">
@@ -301,23 +287,22 @@
<label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name"
- value="resource-assignment-properties">
+ value="resource-assignment-properties">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputPassword3"
- placeholder="Add some description"
- value="Dynamic PropertyDefinition for workflow(resource-assignment).">
+ placeholder="Add some description"
+ value="Dynamic PropertyDefinition for workflow(resource-assignment).">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
<div class="col-sm-9">
<div class="list-group list-group-horizontal">
- <button type="button"
- class="list-group-item list-group-item-action">String
+ <button type="button" class="list-group-item list-group-item-action">String
</button>
<button type="button" class="list-group-item list-group-item-action">Integer</button>
<button type="button" class="list-group-item list-group-item-action">Boolean</button>
@@ -326,7 +311,7 @@
</button>
</div>
<input type="text" class="form-control mt-2 mb-2" id="inputPassword3"
- placeholder="Add Other type name" value="dt-resource-assignment-properties">
+ placeholder="Add Other type name" value="dt-resource-assignment-properties">
</div>
</div>
<div class="form-group row">
@@ -334,12 +319,12 @@
<div class="col-sm-9">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1"
- class="custom-control-input" checked>
+ class="custom-control-input" checked>
<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">
+ class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">False</label>
</div>
</div>
@@ -352,4 +337,4 @@
</div>
</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.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index 6d590dc8f..1d2a939bd 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
@@ -469,10 +469,10 @@ p.compType-4{
color: #C7D0DD;
font-size: 12px;
}
-.custom-control-input:checked ~ .custom-control-label{
+/* .custom-control-input:checked ~ .custom-control-label{
background-color: #1B3E6F !important;
color: #fff;
-}
+} */
.inserActionBtns .btn{
border-radius: 15px !important;
padding: 6px 20px;
@@ -845,6 +845,7 @@ p.compType-4{
}
.btn-select-template{
+ display: inherit;
background-color: #C3CDDB;
border-radius: 2px;
color: #1B3E6F;
@@ -859,6 +860,11 @@ p.compType-4{
margin-bottom: 9px;
border-bottom: solid 1px #F4F9FE;
}
+.function-accordion .attribute-wrap:nth-last-child(1){
+ margin-bottom: 0;
+ padding-bottom: 0;
+ border-bottom: 0;
+}
.attribute-wrap .form-group{
margin-bottom: 0;
}
@@ -880,19 +886,30 @@ p.compType-4{
color: #103D73;
font-size: 10px !important;
}
+/*Accordion*/
.accordion{
margin-top: 12px;
}
+.accordion .card-header .btn-link{
+ padding-left: 20px !important;
+ padding-right: 20px !important;
+}
.accordion > .card{
+ box-shadow: none;
margin-bottom: 0 !important;
- border: 0;
+}
+.accordion > .card .card-body{
+ padding-bottom: 0 !important;
+}
+.function-accordion .card{
+ overflow: inherit !important;
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;
+ padding-left: 20px !important;
+ padding-right: 20px !important;
}
.accordion > .card .card-header{
margin: 0;
@@ -928,7 +945,11 @@ p.compType-4{
float: left;
font-weight: normal;
font-size: 12px;
-}
+} */
+
+
+
+
/* .accordion .card-header .btn-link[aria-expanded="true"]:after{
content: "\f078";
}
@@ -1165,3 +1186,72 @@ ul.editor{
background-color: transparent !important;
color: #1B3E6F;
}
+/*Optional Attributes Menu*/
+.optional-attributes-menu{
+ margin-top: 20px;
+ padding: 10px 20px;
+ border-top: solid 1px #ECEDF2;
+ border-bottom: solid 1px #ECEDF2;
+ background-color: #F4F9FE;
+}
+.optional-attributes-menu .dropdown{
+ width: 100%;
+}
+.optional-attributes-menu .dropdown-text,
+.optional-attributes-menu .dropdown-text:hover,
+.optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text,
+.optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{
+ top: 0;
+ text-align: center;
+ font-weight: normal;
+ text-indent: 0;
+ background-color: #fff;
+ box-shadow: none;
+ border: solid 1px #C1CDDD;
+ border-radius: 2px;
+}
+.optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text,
+.optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{
+ background-color: #D0DFF1 !important;
+ border-color: #C1CDDD;
+ border-radius: 2px !important;
+ color: #1B3E6F !important;
+}
+.optional-attributes-menu .dropdown-text i{
+ font-size: 17px;
+ vertical-align: middle;
+}
+.optional-attributes-menu .dropdown-content:hover,
+.optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-content{
+ top: 36px;
+ width: 100%;
+ padding: 5px 0;
+ border-radius: 2px;
+ background-color: #F4F9FE;
+ border-color: #D0DFF1;
+ font-size: 13px;
+}
+.optional-attributes-menu .dropdown-content li{
+ padding: 0 5px;
+ line-height: 36px;
+ border-bottom: solid 1px #EAF4FF;
+}
+.optional-attributes-menu .dropdown-content li a{
+ display: inline;
+}
+.optional-attributes-menu .dropdown-content li:hover,
+.optional-attributes-menu .dropdown-content li:hover a{
+ background-color: #D0DFF1;
+}
+.optional-attributes-menu li i{
+ font-size: 20px;
+ margin-top: 10px;
+ margin-right: 10px;
+}
+
+.temp-buttons .btn{
+ font-size: 13px;
+ margin: 12px;
+ padding: 8px 12px !important;
+ line-height: 14px;
+} \ 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 e717d9019..d4fea67bb 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
@@ -192,14 +192,19 @@
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/>
+
+ <div class="row temp-buttons">
+ <div class="col text-center">
+ <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary">
+ Action Attributes
+ </button>
+ </div>
+ <div class="col text-center">
+ <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary">
+ Function Attributes
+ </button>
+ </div>
+ </div>
<button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
+ &nbsp;&nbsp;New Action
</button>
@@ -277,8 +282,7 @@
<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>
+ <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">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
index c0c7ece98..91386fd66 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
@@ -5,7 +5,7 @@
<label for="exampleInputEmail1">Function Instance Name</label>
<input type="text" class="form-control" placeholder="Function Instance Name">
</div>
- <div class="form-group">
+ <div class="form-group mb-0">
<label>Function Type</label>
<label class="attribute-value">component-resource-resolution</label>
</div>
@@ -15,14 +15,17 @@
</div>
</div>
</div>
- <!--INTERFACES-->
- <div class="accordion" id="accordionExample">
+
+ <div class="accordion function-accordion" id="accordionExample">
+ <!--INTERFACES-->
<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">
- Interfaces
- </button>
+ <div class="card-header" id="headingOne">
+ <h2 class="mb-0">
+ <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
+ aria-expanded="true" aria-controls="collapseOne">
+ Interfaces
+ </button>
+ </h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
@@ -39,6 +42,7 @@
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
+ <!--Inputs-->
<div class="tab-pane fade show active" id="pills-home" role="tabpanel"
aria-labelledby="pills-home-tab">
<div class="row">
@@ -64,8 +68,8 @@
</div>
<br />
<button type="button" data-toggle="modal" data-target="#templateModal"
- class="btn btn-select-template"><i class="icon-add-circle" type="button"
- aria-hidden="true"></i> Select Template</button>
+ class="btn btn-select-template m-auto"><i class="icon-add-circle"
+ type="button" aria-hidden="true"></i> Select Template</button>
</div>
<!--string-->
<div class="attribute-wrap" *ngFor="let requiredInput of requiredInputs">
@@ -102,10 +106,41 @@
<label class="custom-control-label" for="customRadioInline2">False</label>
</div>
</div> -->
- <!-- Add Optional Attributes button -->
+ </div>
+ </div>
+ <!-- Add Optional Attributes button -->
+ <div class="row">
+ <div class="col p-0">
+ <div class="optional-attributes-menu">
+ <div class="dropdown">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">
+ <i class="icon-add-circle" type="button" aria-hidden="true"></i> Add
+ Optional Attributes
+ </div>
+ <ul class="dropdown-content save-blueprint">
+ <li>
+ <a>resolution-key</a>
+ <i class="icon-add-circle float-right" type="button"
+ aria-hidden="true"></i>
+ </li>
+ <li>
+ <a>occurrence</a>
+ <i class="icon-add-circle float-right" type="button"
+ aria-hidden="true"></i>
+ </li>
+ <li>
+ <a>store-result</a>
+ <i class="icon-add-circle float-right" type="button"
+ aria-hidden="true"></i>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
</div>
</div>
+ <!--Outputs-->
<!-- Optional params -->
<div class="tab-pane fade" id="pills-profile" role="tabpanel"
aria-labelledby="pills-profile-tab">
@@ -121,18 +156,17 @@
</div>
</div>
</div>
- </div>
<!--ARTIFACTS-->
- <div [hidden]="selectedTemplates.size == 0" 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="#collapseTwo"
- aria-expanded="true" aria-controls="collapseTwo">
- Artifacts
- </button>
+ <div class="card" [hidden]="selectedTemplates.size == 0" class="accordion" id="accordionExample1">
+ <div class="card-header" id="headingTwo">
+ <h2 class="mb-0">
+ <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
+ aria-expanded="true" aria-controls="collapseTwo">
+ Artifacts
+ </button>
+ </h2>
</div>
-
- <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample1">
+ <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-12" *ngFor="let file of getKeys(selectedTemplates)">
@@ -157,7 +191,7 @@
<!--function - Select Template - Modal-->
<div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModalTitle"
aria-hidden="true">
- <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+ <div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="templateModalTitle">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index 3c9cbc644..4efb9a20e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -7,8 +7,8 @@
<div class="container-fluid body-container">
<!--Tour Starter-->
- <input id="clicker" [checked]="startTour" type="checkbox" />
- <label class="ml-1" for="clicker">Start the tour</label>
+ <input id="clicker" [checked]="startTour" type="checkbox" style="display: none;" />
+ <label class="ml-1" for="clicker" style="display: none;">Start the tour</label>
<div class="panel-wrap packageWizard">
<div class="panel">
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 252cb89b1..ce9fdd781 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -78,6 +78,9 @@ body{
width: 14px !important;
height: 14px;
}
+.btn[aria-expanded="true"] > .card{
+ overflow: visible;
+}
.card-header .btn[aria-expanded="true"],
.card-header .btn[aria-expanded="false"]{
padding-left: 25px !important;
@@ -2926,9 +2929,6 @@ animation: glowing 1500ms infinite;
position: absolute;
top: 13px;
}
-.ace_scroller{
- /* overflow: auto !important; */
-}
.ace_print-margin{
left: 100% !important;
background: #eee !important;