diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer')
3 files changed, 161 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" |