diff options
author | Sarah Abouzainah <sabouzainah.ext@orange.com> | 2020-11-26 14:20:30 +0200 |
---|---|---|
committer | Sarah Abouzainah <sabouzainah.ext@orange.com> | 2020-11-26 15:42:59 +0200 |
commit | 6ec780f4333f8b507d1a7e9382ba60cc29b57360 (patch) | |
tree | 9ccbc71389616871d5fd49747f4306ee650c80ab /cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes | |
parent | 6bfd96a32093c03c607ddcb23f29f529504e0342 (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/app/modules/feature-modules/packages/designer/action-attributes')
-rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html | 86 |
1 files changed, 60 insertions, 26 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> |