summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src
diff options
context:
space:
mode:
authorSarah Abouzainah <sabouzainah.ext@orange.com>2020-11-26 14:20:30 +0200
committerSarah Abouzainah <sabouzainah.ext@orange.com>2020-11-26 15:42:59 +0200
commit6ec780f4333f8b507d1a7e9382ba60cc29b57360 (patch)
tree9ccbc71389616871d5fd49747f4306ee650c80ab /cds-ui/designer-client/src
parent6bfd96a32093c03c607ddcb23f29f529504e0342 (diff)
Add attribute details on hover - List, Get value, Import
Issue-ID: CCSDK-2292 Issue-ID: CCSDK-2780 Issue-ID: CCSDK-2779 Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com> Change-Id: Iee01016e6102b21b644aaa93b66f661ced8f529d
Diffstat (limited to 'cds-ui/designer-client/src')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html86
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css95
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html16
-rw-r--r--cds-ui/designer-client/src/styles.css9
4 files changed, 170 insertions, 36 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 23adaef46..d9b727b2e 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
@@ -14,8 +14,8 @@
<div class="row">
<div class="col pr-0 text-center">
<button type="button" data-toggle="modal" data-target="#exampleModalScrollable"
- class="btn btn-secondary" (click)="clearFormInputs()"><i class="icon-custom-attribute" type="button"
- aria-hidden="true" ></i></button>
+ class="btn btn-secondary" (click)="clearFormInputs()"><i class="icon-custom-attribute"
+ type="button" aria-hidden="true"></i></button>
<span>Create Custom</span>
</div>
<div class="col text-center">
@@ -28,7 +28,7 @@
</div>
</div>
<!--INPUTS-->
- <div class="accordion" id="accordionExample">
+ <div class="accordion action-accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
@@ -43,7 +43,15 @@
<div class="row">
<div class="col">
<div class="form-group" *ngFor="let input of inputs">
- <label >{{input.name}}
+ <label class="tooltipHTML">{{input.name}}
+ <span class="tooltiptext">
+ <h5>integer</h5>
+ <h6>Value:</h6>
+ <span>function_name</span>
+ <span>attribute_name</span>
+ <span>artifact_name</span>
+ <span>parameter_name</span>
+ </span>
<i [hidden]="!input.required" class="icon-required-star" type="button"
aria-hidden="true"></i>
<i [hidden]="input.required" class="icon-required-star optional-attribute"
@@ -64,7 +72,7 @@
</div>
</div>
<!--OUTPUTS-->
- <div class="accordion" id="accordionExample1">
+ <div class="accordion action-accordion" id="accordionExample1">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
@@ -80,7 +88,15 @@
<div class="row">
<div class="col">
<div class="form-group" *ngFor="let output of outputs">
- <label >{{output.name}}
+ <label class="tooltipHTML">{{output.name}}
+ <span class="tooltiptext">
+ <h5>integer</h5>
+ <h6>Value:</h6>
+ <span>function_name</span>
+ <span>attribute_name</span>
+ <span>artifact_name</span>
+ <span>parameter_name</span>
+ </span>
<i [hidden]="!output.required" class="icon-required-star" type="button"
aria-hidden="true"></i>
<i [hidden]="output.required" class="icon-required-star optional-attribute"
@@ -259,8 +275,8 @@
<div class="form-group row">
<div class="col">
<input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
- <div class="container">
- <!-- <div *ngFor="let tempInput of steps">{{tempInput}}</div>-->
+ <div class="container p-0">
+ <!-- <div *ngFor="let tempInput of steps" class="selectedWrapper">{{tempInput}}</div> -->
</div>
</div>
</div>
@@ -295,15 +311,20 @@
aria-labelledby="list-home-list">
<div class="scrollWrapper">
<div *ngIf="suggestedAttributes.length>0"
- class="btn-group btn-group-toggle" data-toggle="buttons">
- <label class="btn btn-secondary"
- *ngFor="let suggestedAttribute of suggestedAttributes"
- [id]="suggestedAttribute"
- (click)="addTempOutputAttr(suggestedAttribute)">
+ class="btn-group btn-group-toggle" data-toggle="buttons">
+ <label class="btn tooltipHTML tooltipGetAtt"
+ *ngFor="let suggestedAttribute of suggestedAttributes"
+ [id]="suggestedAttribute"
+ (click)="addTempOutputAttr(suggestedAttribute)">
+ <span class="tooltiptext">
+ <h5>integer</h5>
+ </span>
<input type="radio" name="options"
[id]="suggestedAttribute+'.,.'"
autocomplete="off" [checked]="suggestedAttributes[0].includes(suggestedAttribute)">
{{suggestedAttribute}}
+ <i class="icon-required-star" type="button"
+ aria-hidden="true"></i>
</label>
</div>
@@ -434,15 +455,17 @@
aria-controls="profile" aria-selected="false" >Outputs</a>
</li>
</ul>
- <div class="tab-content border-0 mt-2" id="myTabContent">
+ <div class="tab-content border-0" id="myTabContent">
<!--INPUTS Tab-->
<div class="tab-pane fade show active create-form" id="input" role="tabpanel"
aria-labelledby="input-tab">
<div class="form-group row">
<div class="col">
- <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
- <div class="container">
- <div *ngFor="let tempInput of tempInputs">{{tempInput}}</div>
+<!--<input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">-->
+ <div class="container p-0">
+ <label>Selected Attributes</label>
+ <div *ngFor="let tempInput of tempInputs" class="selectedWrapper">{{tempInput}}
+ </div>
</div>
</div>
</div>
@@ -472,13 +495,18 @@
aria-labelledby="list-home-list">
<div class="scrollWrapper">
<div *ngIf="suggestedInputs.length>0" class="btn-group btn-group-toggle"
- data-toggle="buttons">
- <label class="btn btn-secondary active"
- *ngFor="let suggestedInput of suggestedInputs"
- (click)="addTempInput(suggestedInput)">
+ data-toggle="buttons">
+ <label class="btn tooltipHTML tooltipGetAtt active"
+ *ngFor="let suggestedInput of suggestedInputs"
+ (click)="addTempInput(suggestedInput)">
+ <span class="tooltiptext">
+ <h5>integer</h5>
+ </span>
<input type="radio" name="options" [id]="suggestedInput"
autocomplete="off" (click)="addTempInput(suggestedInput)">
{{suggestedInput}}
+ <i class="icon-required-star" type="button"
+ aria-hidden="true"></i>
</label>
</div>
<div *ngIf="suggestedInputs.length == 0">
@@ -495,8 +523,9 @@
<div class="form-group row">
<div class="col">
<input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
- <div class="container">
- <div *ngFor="let tempOutput of tempOutputs">{{tempOutput}}</div>
+ <div class="container p-0">
+ <div *ngFor="let tempOutput of tempOutputs" class="selectedWrapper">{{tempOutput}}
+ </div>
</div>
</div>
</div>
@@ -526,13 +555,18 @@
aria-labelledby="list-home-list">
<div class="scrollWrapper">
<div *ngIf="suggestedOutputs.length > 0" class="btn-group btn-group-toggle"
- data-toggle="buttons">
- <label class="btn btn-secondary active"
- *ngFor="let suggestedOutput of suggestedOutputs">
+ data-toggle="buttons">
+ <label class="btn tooltipHTML tooltipGetAtt active"
+ *ngFor="let suggestedOutput of suggestedOutputs">
+ <span class="tooltiptext">
+ <h5>integer</h5>
+ </span>
<input type="radio" name="options" [id]="suggestedOutput"
autocomplete="off"
(dblclick)="addTempOutput(suggestedOutput)">
{{suggestedOutput}}
+ <i class="icon-required-star" type="button"
+ aria-hidden="true"></i>
</label>
</div>
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 b076af378..2a2aaba47 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
@@ -949,7 +949,8 @@ p.compType-4{
.accordion > .card .card-body{
padding-bottom: 0 !important;
}
-.function-accordion .card{
+.function-accordion .card,
+.action-accordion .card{
overflow: inherit !important;
box-shadow: none;
}
@@ -1186,9 +1187,10 @@ ul.editor{
margin-left: 50px;
}
.createAttributeTabs .tab-content{
- margin-top: 20px;
+ /* margin-top: 20px; */
padding: 20px 50px;
border: solid 1px #F4F9FE;
+ border-top: 0;
}
.createAttributeTabs .listBoxTitle{
font-size: 11px;
@@ -1282,6 +1284,26 @@ ul.editor{
box-shadow: none;
border: 0;
}
+.container{
+ min-height: 66px;
+ border-bottom: solid 1px #EFEFF4;
+ line-height: 24px;
+}
+.container label{
+ display: block;
+ /* color: #C3CDDB; */
+}
+.container .selectedWrapper{
+ display: inline-block;
+ width: auto;
+ margin-right: 6px;
+ margin-bottom: 9px;
+ padding: 0 10px;
+ background: #E0E8F2;
+ border-radius: 12px;
+ font-size: 13px;
+ line-height: 24px;
+}
/*FORM*/
.create-form .col-form-label{
color: #1B3E6F;
@@ -1649,3 +1671,72 @@ ul.editor{
.carousel::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
} */
+
+
+.tooltipHTML{
+ position: relative;
+ display: inline-block;
+}
+.tooltipHTML .tooltiptext{
+ visibility: hidden;
+ position: absolute;
+ z-index: 1;
+ top: 35px;
+ left: 50px;
+ width: 316px;
+ margin-left: -62px;
+ padding: 9px 12px;
+ background-color: #fff;
+ color: #1B3E6F;
+ border-radius: 2px;
+ font-weight: normal;
+ box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
+ border: solid 1px #DEE8F3;
+ /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
+ opacity: 0;
+ transition: opacity 1s;
+}
+.tooltipHTML.tooltipGetAtt .tooltiptext{
+ top: 38px;
+ left: 70px;
+ width: auto;
+}
+.tooltipHTML .tooltiptext::after {
+ content: '';
+ display: block;
+ width: 0;
+ height: 0;
+ position: absolute;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-bottom: 6px solid #DEE8F3;
+ left: 9px;
+ top: -6px;
+}
+.tooltipHTML:hover .tooltiptext {
+ visibility: visible;
+ opacity: 1;
+}
+.tooltiptext h5{
+ margin-bottom: 5px;
+}
+.tooltipGetAtt h5{
+ margin-bottom: 0;
+ font-size: 12px;
+}
+.tooltiptext h6{
+ background: transparent;
+ line-height: 24px !important;
+ color: #C3CDDB;
+ text-transform: initial;
+}
+.tooltipHTML .tooltiptext span{
+ display: inline-block;
+ margin-right: 3px;
+ margin-bottom: 3px;
+ padding: 3px 6px;
+ background-color: #E0E8F2;
+ border-radius: 12px;
+ line-height: 16px;
+ color: #1B3E6F;
+}
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 505844c57..b8a79c3c8 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
@@ -102,13 +102,13 @@
</div>
<!--boolean-->
<!-- <div *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'"> -->
- <div class="form-group"
- *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'">
- <label for="exampleFormControlTextarea1">{{ requiredInput }}
- <i class="icon-required-star" type="button"
- [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
- aria-hidden="true"></i></label><br />
-
+ <div *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'">
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">{{ requiredInput }}
+ <i class="icon-required-star" type="button"
+ [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
+ aria-hidden="true"></i></label><br />
+ </div>
<div class="custom-control custom-radio custom-control-inline">
<input [value]="true"
[(ngModel)]="currentFuncion['inputs'][requiredInput]" type="radio"
@@ -116,7 +116,7 @@
name="{{'functionRadioInline' + i}}" class="custom-control-input">
<label class="custom-control-label"
for="{{'functionRadioInline' + i}}">True</label>
- </div><br />
+ </div>
<div class="custom-control custom-radio custom-control-inline">
<input [value]="false"
[(ngModel)]="currentFuncion['inputs'][requiredInput]" type="radio"
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 0207371db..1506be07d 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -32,6 +32,15 @@ button:focus{
border: solid 1px #ECEDF2 !important;
color: #FF6469 !important;
}
+.btn-secondary:not(:disabled):not(.disabled).active,
+.btn-secondary:not(:disabled):not(.disabled):active{
+ border-color: transparent !important;
+}
+.btn-secondary:not(:disabled):not(.disabled).active:focus,
+.btn-secondary:not(:disabled):not(.disabled):active:focus{
+ box-shadow: none !important;
+ border-color: transparent !important;
+}
.btn:disabled:hover{
cursor: default;
}