diff options
| author |   Sarah Abouzainah <sabouzainah.ext@orange.com> | 2020-12-01 20:27:36 +0200 |
|---|---|---|
| committer |   KAPIL SINGAL <ks220y@att.com> | 2020-12-02 18:08:16 +0000 |
| commit | ee01e433cb623d2cbcdc8b61a10bd455f698c980 (patch) | |
| tree | e322008660f6c3120447e2e1c7a6b219f216b12b /cds-ui/designer-client/src/app/modules/feature-modules | |
| parent | 2f0772212f44e6722957ee9a9cd19d3529a1a765 (diff) | |
Fix Action position in Designer Canvas
Issue-ID: CCSDK-2286
Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: Ib7520945b51122fc95c1dcbb7ecffecedb469eef
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules')
12 files changed, 162 insertions, 172 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index 4ce93057a..9f0028bd9 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -836,7 +836,7 @@ <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="removePackageModalLabel">Delete Script</h5> + <h5 class="modal-title" id="removePackageModalLabel">Delete Package</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i class="icon-action-close"></i> </button> @@ -846,7 +846,7 @@ </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> - <button type="button" (click)="deletePackage()" data-dismiss="modal" class="btn btn-primary">Delete + <button type="button" (click)="deletePackage()" data-dismiss="modal" class="btn btn-danger">Delete </button> </div> </div> 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 d0ddf0196..415179735 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,14 +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" (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"> <button (click)="printSomethings()" [disabled]="!isFunctionAttributeActive" type="button" - data-toggle="modal" data-target="#exampleModalScrollable3" class="btn btn-secondary"><i + data-toggle="modal" data-target="#exampleModalScrollable3" class="btn btn-secondary"><i class="icon-function-attribute" type="button" aria-hidden="true"></i></button> <span>Import From Function</span> </div> @@ -34,7 +33,7 @@ <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"> + aria-expanded="true" aria-controls="collapseOne"> Inputs </button> </h2> @@ -49,21 +48,21 @@ <h5>{{input.type}}</h5> <div *ngIf="input.value"> <h6>Value:</h6> - <span>{{input.value}}</span> + <span>{{input.value}}</span> </div> </span> <i [hidden]="!input.required" class="icon-required-star" type="button" - aria-hidden="true"></i> + aria-hidden="true"></i> <i [hidden]="input.required" class="icon-required-star optional-attribute" - type="button" aria-hidden="true"></i> + 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" (click)="editAttribute(input)"><i class="icon-edit"></i></a> + class="accordion-delete editAttribute" tooltip="Edit Attribute" + placement="bottom" (click)="editAttribute(input)"><i class="icon-edit"></i></a> <a class="accordion-delete deleteAttribute" tooltip="Delete Attribute" - (click)="markDeletedInput(input)" - data-toggle="modal" data-target="#exampleModalScrollable1" placement="bottom"><i + (click)="markDeletedInput(input)" data-toggle="modal" + data-target="#exampleModalScrollable1" placement="bottom"><i class="icon-delete-sm"></i></a> </div> </div> @@ -79,7 +78,7 @@ <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"> + aria-expanded="true" aria-controls="collapseTwo"> Outputs </button> </h2> @@ -93,29 +92,29 @@ <label class="tooltipHTML">{{output.name}} <span class="tooltiptext"> <h5>{{output.type}}</h5> - <div *ngIf="output?.value !=null + <div *ngIf="output?.value !=null && output?.value['get_attribute'] !=null"> - <h6>Value:</h6> - <span>{{output.value.get_attribute[0]}}</span> - <span>{{output.value.get_attribute[1]}}</span> - <span>{{output.value.get_attribute[2]}}</span> - <span>{{output.value.get_attribute[3]}}</span> - <span>{{output.value.get_attribute[4]}}</span> - </div> + <h6>Value:</h6> + <span>{{output.value.get_attribute[0]}}</span> + <span>{{output.value.get_attribute[1]}}</span> + <span>{{output.value.get_attribute[2]}}</span> + <span>{{output.value.get_attribute[3]}}</span> + <span>{{output.value.get_attribute[4]}}</span> + </div> </span> <i [hidden]="!output.required" class="icon-required-star" type="button" - aria-hidden="true"></i> + aria-hidden="true"></i> <i [hidden]="output.required" class="icon-required-star optional-attribute" - type="button" aria-hidden="true"></i> + type="button" aria-hidden="true"></i> </label> <div class="attributeOptions"> <a data-toggle="modal" data-target="#exampleModalScrollablte" - class="accordion-delete editAttribute" tooltip="Edit Attribute" - placement="bottom" (click)="editAttribute(output)"><i class="icon-edit"></i></a> + class="accordion-delete editAttribute" tooltip="Edit Attribute" + placement="bottom" (click)="editAttribute(output)"><i class="icon-edit"></i></a> <a class="accordion-delete deleteAttribute" tooltip="Delete Attribute" - (click)="markDeletedInput(output)" - data-toggle="modal" data-target="#exampleModalScrollable1" placement="bottom"><i + (click)="markDeletedInput(output)" data-toggle="modal" + data-target="#exampleModalScrollable1" placement="bottom"><i class="icon-delete-sm"></i></a> </div> </div> @@ -128,14 +127,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"> @@ -143,29 +142,29 @@ <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"> @@ -173,26 +172,25 @@ <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')"> + (click)="setInputType('string')"> String </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setInputType('integer')">Integer + (click)="setInputType('integer')">Integer </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setInputType('boolean')">Boolean + (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> @@ -201,12 +199,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> @@ -218,14 +216,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"> + id="inputPassword3" placeholder="Add some description"> </div> </div> <div class="form-group row"> @@ -233,14 +231,14 @@ <div class="col-sm-9"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline3" name="customRadioInline3" - class="custom-control-input" (click)="setOutputRequired(true)"> + class="custom-control-input" (click)="setOutputRequired(true)"> <label class="custom-control-label" for="customRadioInline3">True</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline4" name="customRadioInline3" - class="custom-control-input"> + class="custom-control-input"> <label class="custom-control-label" for="customRadioInline4" - (click)="setOutputRequired(false)">False</label> + (click)="setOutputRequired(false)">False</label> </div> </div> </div> @@ -249,29 +247,28 @@ <div class="col-sm-9"> <div class="list-group list-group-horizontal"> <button type="button" class="list-group-item list-group-item-action" - (click)="setOutputType('string')">String + (click)="setOutputType('string')">String </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setOutputType('integer')"> + (click)="setOutputType('integer')"> Integer </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setOutputType('boolean')"> + (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')"> + (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> <!--Get Attribute Value--> @@ -298,10 +295,10 @@ <b class="listBoxTitle">1. Choose Function Name</b> <div class="list-group addedFunctionsList" id="list-tab" role="tablist"> <input type="text" class="form-control input-search-controller" - placeholder="Functions"> + placeholder="Functions"> <div class="scrollWrapper" *ngFor="let step of steps"> <a class="list-group-item list-group-item-action active" id="list-home-list" - data-toggle="list" href="#list-home" role="tab" aria-controls="home"> + data-toggle="list" href="#list-home" role="tab" aria-controls="home"> <i class="icon-resource_resolution mr-1" aria-hidden="true"></i> {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="getAttributesAndOutputs( this.designerState.template.workflows[actionName]['steps'][step]['target'] @@ -314,26 +311,25 @@ <b class="listBoxTitle">2. Choose Attribute Name</b> <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent"> <input type="text" class="form-control input-search-controller" - placeholder="Attributes"> + placeholder="Attributes"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" - aria-labelledby="list-home-list"> + aria-labelledby="list-home-list"> <div class="scrollWrapper"> <div *ngIf="suggestedAttributes.length>0" - class="btn-group btn-group-toggle" data-toggle="buttons"> + class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn tooltipHTML tooltipGetAtt" - *ngFor="let suggestedAttribute of suggestedAttributes" - [id]="suggestedAttribute" - (click)="addTempOutputAttr(suggestedAttribute)"> + *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)"> + [id]="suggestedAttribute+'.,.'" autocomplete="off" + [checked]="suggestedAttributes[0].includes(suggestedAttribute)"> {{suggestedAttribute}} <i class="icon-required-star" type="button" - aria-hidden="true"></i> + aria-hidden="true"></i> </label> </div> @@ -350,20 +346,19 @@ <b class="listBoxTitle">3. Choose Artifact Name</b> <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent"> <input type="text" class="form-control input-search-controller" - placeholder="Attributes"> + placeholder="Attributes"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" - aria-labelledby="list-home-list"> + aria-labelledby="list-home-list"> <div class="scrollWrapper"> <div *ngIf="currentArtifacts.length>0" - class="btn-group btn-group-toggle" data-toggle="buttons"> + class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary" - *ngFor="let suggestedArtifact of currentArtifacts" - (click)="addArtifactFile(suggestedArtifact)"> + *ngFor="let suggestedArtifact of currentArtifacts" + (click)="addArtifactFile(suggestedArtifact)"> <input type="radio" name="options" [id]="suggestedArtifact" - autocomplete="off" - (click)="addArtifactFile(suggestedArtifact)" - [checked]="currentArtifacts[0].includes(suggestedArtifact)" - > + autocomplete="off" + (click)="addArtifactFile(suggestedArtifact)" + [checked]="currentArtifacts[0].includes(suggestedArtifact)"> {{suggestedArtifact}} </label> @@ -376,29 +371,25 @@ </div> </li> <!--Parameter--> - <li id="carousel__slide4" - [hidden]="isParametersHidden" tabindex="3" + <li id="carousel__slide4" [hidden]="isParametersHidden" tabindex="3" class="carousel__slide"> <b class="listBoxTitle">4. Choose Parameter Name</b> <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent"> <input type="text" class="form-control input-search-controller" - placeholder="Attributes"> + placeholder="Attributes"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" - aria-labelledby="list-home-list"> + aria-labelledby="list-home-list"> <div class="scrollWrapper"> <div *ngIf="suggestedMappingParameters.length>0" - class="btn-group btn-group-toggle" data-toggle="buttons"> + class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary" - *ngFor="let suggestedMappingParameter of suggestedMappingParameters" - (click)="addSuggestedMappingParameter(suggestedMappingParameter)"> + *ngFor="let suggestedMappingParameter of suggestedMappingParameters" + (click)="addSuggestedMappingParameter(suggestedMappingParameter)"> <!--[class]="suggestedMappingParameters[0].includes(suggestedMappingParameter)?'btn btn-secondary active':'btn btn-secondary'"> --> <input type="radio" name="options" - [id]="suggestedMappingParameter" - autocomplete="off" - (click)="addSuggestedMappingParameter(suggestedMappingParameter)" - [checked]="suggestedMappingParameters[0].includes(suggestedMappingParameter)" - - > + [id]="suggestedMappingParameter" autocomplete="off" + (click)="addSuggestedMappingParameter(suggestedMappingParameter)" + [checked]="suggestedMappingParameters[0].includes(suggestedMappingParameter)"> {{suggestedMappingParameter}} </label> @@ -422,10 +413,8 @@ <li class="carousel__navigation-item" [hidden]="isNotComponentResourceResolution"> <a href="#carousel__slide3" class="carousel__navigation-button">Artifacts</a> </li> - <li class="carousel__navigation-item" - [hidden]="isParametersHidden"> - <a href="#carousel__slide4" - class="carousel__navigation-button">Parameters</a> + <li class="carousel__navigation-item" [hidden]="isParametersHidden"> + <a href="#carousel__slide4" class="carousel__navigation-button">Parameters</a> </li> </ol> </aside> @@ -443,14 +432,14 @@ <!--Action - Add Attribute From Function - Modal--> <div class="modal fade" id="exampleModalScrollable3" tabindex="-1" role="dialog" - aria-labelledby="exampleModalScrollableTitle3" aria-hidden="true"> + aria-labelledby="exampleModalScrollableTitle3" 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="exampleModalScrollableTitle3"> Add Attributes from Function</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"> @@ -458,17 +447,17 @@ <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="#input" 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="#output" role="tab" - aria-controls="profile" aria-selected="false">Outputs</a> + aria-controls="profile" aria-selected="false">Outputs</a> </li> </ul> <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"> + aria-labelledby="input-tab"> <div class="form-group row"> <div class="col"> <!--<input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">--> @@ -485,10 +474,10 @@ <b class="listBoxTitle">1. Choose Function Name</b> <div class="list-group addedFunctionsList" id="list-tab" role="tablist"> <input type="text" class="form-control input-search-controller" - placeholder="Functions"> + placeholder="Functions"> <div class="scrollWrapper" *ngFor="let step of steps"> <a class="list-group-item list-group-item-action active" id="list-home-list" - data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i + data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i class="icon-resource_resolution mr-1" aria-hidden="true"></i> {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs( this.designerState.template.workflows[actionName]['steps'][step]['target'] @@ -500,23 +489,22 @@ <b class="listBoxTitle">2. Choose Input Attribute Name</b> <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent"> <input type="text" class="form-control input-search-controller" - placeholder="Attributes"> + placeholder="Attributes"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" - aria-labelledby="list-home-list"> + aria-labelledby="list-home-list"> <div class="scrollWrapper"> <div *ngIf="suggestedInputs.length>0" class="btn-group btn-group-toggle" - data-toggle="buttons"> + data-toggle="buttons"> <label class="btn tooltipHTML tooltipGetAtt active" - *ngFor="let suggestedInput of suggestedInputs" - (click)="addTempInput(suggestedInput)"> + *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)"> + autocomplete="off" (click)="addTempInput(suggestedInput)"> {{suggestedInput}} - <i class="icon-required-star" type="button" - aria-hidden="true"></i> + <i class="icon-required-star" type="button" aria-hidden="true"></i> </label> </div> <div *ngIf="suggestedInputs.length == 0"> @@ -545,10 +533,10 @@ <b class="listBoxTitle">1. Choose Function Name</b> <div class="list-group addedFunctionsList" id="list-tab" role="tablist"> <input type="text" class="form-control input-search-controller" - placeholder="Functions"> + placeholder="Functions"> <div class="scrollWrapper" *ngFor="let step of steps"> <a class="list-group-item list-group-item-action active" id="list-home-list" - data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i + data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i class="icon-resource_resolution mr-1" aria-hidden="true"></i> {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs( this.designerState.template.workflows[actionName]['steps'][step]['target'] @@ -560,23 +548,21 @@ <b class="listBoxTitle">2. Choose output Attribute Name</b> <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent"> <input type="text" class="form-control input-search-controller" - placeholder="Attributes"> + placeholder="Attributes"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" - aria-labelledby="list-home-list"> + aria-labelledby="list-home-list"> <div class="scrollWrapper"> <div *ngIf="suggestedOutputs.length > 0" class="btn-group btn-group-toggle" - data-toggle="buttons"> + data-toggle="buttons"> <label class="btn tooltipHTML tooltipGetAtt active" - *ngFor="let suggestedOutput of suggestedOutputs"> + *ngFor="let suggestedOutput of suggestedOutputs"> <span class="tooltiptext"> <h5>integer</h5> </span> <input type="radio" name="options" [id]="suggestedOutput" - autocomplete="off" - (dblclick)="addTempOutput(suggestedOutput)"> + autocomplete="off" (dblclick)="addTempOutput(suggestedOutput)"> {{suggestedOutput}} - <i class="icon-required-star" type="button" - aria-hidden="true"></i> + <i class="icon-required-star" type="button" aria-hidden="true"></i> </label> </div> @@ -603,22 +589,22 @@ <!--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-scrollable" role="document"> + aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true"> + <div class="modal-dialog modal-dialog-scrollable" role="document" style="width: 30%;"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle1"> - Delete Action</h5> + Delete Action "{{actionName}}"</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"> - Are you sure you want to delete <b>{{suggestedDeletedInput.name}}</b> from {{actionName}}? + Are you sure you want to delete <b>{{suggestedDeletedInput.name}}</b> action "{{actionName}}"? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> - <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="deleteActionAttribute()"> + <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="deleteActionAttribute()"> Delete </button> </div> @@ -627,14 +613,14 @@ </div> <!--Action - Edit Custom Attribute - Modal--> <div class="modal fade" id="exampleModalScrollable2" tabindex="-1" role="dialog" - aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true"> + 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"> @@ -643,15 +629,15 @@ <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" - [ngModel]="this.suggestedEditedAttribute.name"> + [ngModel]="this.suggestedEditedAttribute.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 type="text" class="form-control" id="inputPassword3" - placeholder="Add some description" - [ngModel]="this.suggestedEditedAttribute.description"> + placeholder="Add some description" + [ngModel]="this.suggestedEditedAttribute.description"> </div> </div> <div class="form-group row"> @@ -659,23 +645,23 @@ <div class="col-sm-9"> <div class="list-group list-group-horizontal"> <button type="button" class="list-group-item list-group-item-action" - [className]="suggestedEditedAttribute.type.includes('string')?'' + + [className]="suggestedEditedAttribute.type.includes('string')?'' + 'list-group-item list-group-item-action active':'list-group-item list-group-item-action'">String </button> <button type="button" class="list-group-item list-group-item-action" - [className]="suggestedEditedAttribute.type.includes('integer')?'' + + [className]="suggestedEditedAttribute.type.includes('integer')?'' + ' list-group-item list-group-item-action active':'list-group-item list-group-item-action'">Integer</button> <button type="button" class="list-group-item list-group-item-action" - [className]="suggestedEditedAttribute.type.includes('boolean')?'' + + [className]="suggestedEditedAttribute.type.includes('boolean')?'' + 'list-group-item list-group-item-action active':'list-group-item list-group-item-action'">Boolean</button> <button type="button" class="list-group-item list-group-item-action" - [className]="suggestedEditedAttribute.type.includes('list')?'' + + [className]="suggestedEditedAttribute.type.includes('list')?'' + 'list-group-item list-group-item-action active':'list-group-item list-group-item-action'">List</button> <button type="button" class="list-group-item list-group-item-action">Other </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"> @@ -683,14 +669,13 @@ <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" - [ngModel]="suggestedEditedAttribute.required" [checked]="suggestedEditedAttribute.required"> + class="custom-control-input" [ngModel]="suggestedEditedAttribute.required" + [checked]="suggestedEditedAttribute.required"> <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" - [checked]="!suggestedEditedAttribute.required"> + class="custom-control-input" [checked]="!suggestedEditedAttribute.required"> <label class="custom-control-label" for="customRadioInline2">False</label> </div> </div> @@ -703,4 +688,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 963b6a43c..0e27c1838 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 @@ -2,7 +2,7 @@ body{ /* background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important; background-size: 6px 6px !important; */ - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJ2LTQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzIGlkPSJ2LTMiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHJlY3QgaWQ9InYtNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI0FBQUFBQSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgaWQ9InYtNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+") !important; + /* background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJ2LTQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzIGlkPSJ2LTMiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHJlY3QgaWQ9InYtNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI0FBQUFBQSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgaWQ9InYtNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+") !important; */ background-color: #fff !important; } @@ -273,6 +273,8 @@ button.rotate{ height: 95%; } */ /* .ng-sidebar__content.ng-sidebar__content--animate{ + position: relative; + top: 200px; padding-top: 70px !important; } */ @@ -430,6 +432,10 @@ p.compType-4{ color: #C3CDDB; } /*PAUSE*/ +/* .ng-sidebar__content .joint-paper > svg{ + top: 80px; + left: 30px; +} */ .functionsList .joint-paper{ width: 100% !important; height: 72vh !important; @@ -756,8 +762,8 @@ p.compType-4{ width: 100%; background-color: #fff; border: solid 1px #C1CDDD; - color: #1B3E6F; - line-height: 18px; + color: #1B3E6F !important; + line-height: 18px !important; border-radius: 4px; } .add-attribute .btn:hover{ @@ -769,8 +775,8 @@ p.compType-4{ .add-attribute .btn:focus{ box-shadow: none; } -.icon-function-attribute{ - font-size: 18px; +.icon-function-attribute::before{ + font-size: 16px; } .add-attribute span{ font-size: 11px; 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 c51c7fa7b..e725a52c5 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 @@ -125,14 +125,14 @@ <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> <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" style="visibility: hidden;">Template</a> </div> </div> </nav> </li> </ul> <!--Requirement/Capability Legend--> - <ul class="templateLegend ml-auto mr-auto p-0"> + <ul class="templateLegend ml-auto mr-auto p-0" style="visibility: hidden;"> <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> 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 a210e58bf..b73231b00 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 @@ -289,8 +289,9 @@ export class DesignerComponent implements OnInit, OnDestroy { el: $('#board-paper'), model: this.boardGraph, height: 720, - width: 1100, - gridSize: 10, + width: 1300, + // origin: { x: 80, y: 70 }, + gridSize: 10, // background line sizes drawGrid: true, // background: { // color: 'rgba(0, 255, 0, 0.3)' diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts index 417f60ba4..dd65bdbc1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts @@ -25,7 +25,7 @@ const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeNa markup: `<defs> <rect id="custom-action" x="0" y="30" width="${rectWidth}" height="${rectHeight}"></rect> - <filter x="-1.7%" y="-2.2%" width="103.5%" height="105.5%" filterUnits="objectBoundingBox" id="filter-2"> + <filter x="-1.7%" y="-2.2%" width="100%" height="100%" filterUnits="objectBoundingBox" id="filter-2"> <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology> <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> @@ -36,21 +36,18 @@ const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeNa </filter> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> - <g id="7.2-Designer---Insert-Action" transform="translate(-395.000000, -137.000000)"> - <g id="workflow-container" transform="translate(401.000000, 137.000000)"> + <g id="7.2-Designer---Insert-Action" transform="translate(-380, 5)"> + <g id="workflow-container" transform="translate(401, 120)"> <g id="Card"> <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use> <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use> </g> <g id="name"> - <path d="M2,0 L85,0 C86.1045695,-2.02906125e-16 87, - 0.8954305 87,2 L87,30 L87,30 L0,30 L0, - 2 C-1.3527075e-16,0.8954305 0.8954305, - 2.02906125e-16 2,0 Z" id="Rectangle" + <path id="Rectangle" fill="#C3CDDB"></path> <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue" - font-size="12" font-weight="bold" fill="#1B3E6F"> - <tspan id="label" x="20" y="20">Action 1</tspan> + font-size="13" font-weight="bold" fill="#1273EB"> + <tspan id="label" x="0" y="20">Action 1</tspan> </text> </g> </g> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts index 7411eed49..8e03b63d0 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts @@ -22,13 +22,13 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl } }, { markup: - `<g id="func-board-element" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + `<g id="func-board-element" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(25,100)"> <g id="func-board-element-parent-component" transform="translate(-742.000000, -207.000000)"> <g id="workflow-container" transform="translate(401.000000, 137.000000)"> <g id="func-board-element-conponent" transform="translate(30.000000, 70.000000)"> <g id="execute" transform="translate(304.000000, 0.000000)"> <g id="Group" transform="translate(7.000000, 0.000000)"> - <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="280" height="150" rx="3"></rect> + <rect id="func-board-element-rectangle" fill="#1B3E6F" x="5" y="0" width="280" height="150" rx="3"></rect> <g id="Group-4" transform="translate(20.000000, 25.000000)" fill="#FFFFFF"> <g id="database0-copy" transform="translate(115.000000, 5.000000)" fill-rule="nonzero"> <path d="M35.544,6.00705882 C34.7265882, diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html index 641caf2ad..8b93920e1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html @@ -38,7 +38,7 @@ <h5 class="mb-0 d-flex justify-content-between"> <button class="btn btn-link " data-toggle="collapse" aria-expanded="false" (click)="changeDivShow(mapIndex)"> - <i class="icon-file-code"></i> {{file.key}} + <i class="icon-file-code"></i> {{file.key}} <span class="readonlyTxt">(ReadOnly)</span> </button> <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal1" @@ -64,7 +64,7 @@ <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" data-dismiss="modal" (click)="removeFile()" - class="btn btn-primary">Delete</button> + class="btn btn-danger">Delete</button> </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html index 16bf7fccd..e011d47cd 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html @@ -76,7 +76,7 @@ </div> <div id="container"> <div id="target"> - <div class="card creat-card"> + <div class="card creat-card mb-4"> <div class="single-line customKeyTitle"> <h5 class="label-name w-100 "> Custom key diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html index ea74b4435..5027c5c02 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html @@ -47,7 +47,7 @@ <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" (click)="removeFile(fileToDelete?.key,0)" - data-dismiss="modal" class="btn btn-primary">Delete</button> + data-dismiss="modal" class="btn btn-danger">Delete</button> </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index 7aaf1a3ab..36525c3f8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -144,17 +144,18 @@ <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="removeProps()" tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button> - <div style="line-height: 35px;font-size: 10px;"> + <div class="mappingSelectedAtt"> <span>{{selectedProps.size}} selected </span> <span>({{mappingRes.length}} attributes in total)</span> </div> </div> - <mat-paginator [pageSizeOptions]="[10, 25,50, 100,this.mappingRes.length]"> - </mat-paginator> <mat-form-field class="tableFilter float-right"> <mat-label>Filter</mat-label> <input matInput (keyup)="initApplyFilter($event)" placeholder="Ex. Mia" #input> </mat-form-field> + <mat-paginator [pageSizeOptions]="[10, 25,50, 100,this.mappingRes.length]"> + </mat-paginator> + <table mat-table matSortDisableClear [dataSource]="initDataSource" matSort> <!-- select Column --> <ng-container matColumnDef="select"> @@ -338,7 +339,7 @@ <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" (click)="confirmDelete()" data-dismiss="modal" - class="btn btn-primary">Delete</button> + class="btn btn-danger">Delete</button> </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html index 1af379582..3a023b781 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html @@ -58,7 +58,7 @@ <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" (click)="condifrmDelete()" data-dismiss="modal" - class="btn btn-primary">Delete</button> + class="btn btn-danger">Delete</button> </div> </div> </div> |