Skip to content

Commit

Permalink
bug-fixed: cds-action-reply-frame preview component not update UI aft…
Browse files Browse the repository at this point in the history 
…er frame is loaded
  • Loading branch information
Gabriele Panico committed Nov 2, 2023
1 parent fda0f79 commit db09871
Show file tree
Hide file tree
Showing 11 changed files with 137 additions and 211 deletions.
2 changes: 1 addition & 1 deletion .../cds-action-reply/elements/cds-action-reply-button/cds-action-reply-button.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@


.button-reply-wrp:hover {
transform: scale(1.05);
// transform: scale(1.05);
.button-controls {
opacity: 1;
}
Expand Down
48 changes: 12 additions & 36 deletions ...st/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,10 @@
<div class="text">Click to add frame</div>
</div>
<div *ngIf="response.metadata.src" class="content-frame">
<iframe
id="contentFrame"
#iframe allowfullscreen
style= "border:none;"
[width]="frameWidth"
[height]="frameHeight"
[src]="framePath">
</iframe>
<cds-element-from-url
class="frame-panel"
[metadata] = response.metadata>
</cds-element-from-url>
</div>

<div>
Expand All @@ -68,35 +64,16 @@


<div class="text-editor-wrapper" *ngIf="!previewMode">

<div class="text-editor">

<div class="response-frame-wrapper"
[ngStyle]="{'width':framePath? 'auto' : '100%' }">
<div *ngIf="!response.metadata.src" class="response-frame-panel">
<cds-element-from-url class="frame-panel"
[metadata] = response.metadata
(loadPathElement)="onLoadPathElement()">
</cds-element-from-url>
</div>

<div class="content-frame">
<iframe *ngIf="response.metadata.src"
id="contentFrame"
#iframe allowfullscreen
style= "border:none;"
[width]="frameWidth"
[height]="frameHeight"
[src]="framePath">
</iframe>

<div class="control-button delete" (click)="onDeletePathElement()">
<em class="material-icons">clear</em>
</div>
</div>

<div class="response-frame-wrapper">
<cds-element-from-url class="frame-panel"
[metadata] = response.metadata
(onChangeMetadata)="onLoadPathElement()"
(onDeletedMetadata)="onDeletedMetadata($event)">
</cds-element-from-url>
</div>



<cds-textarea
class="text-editable-div"
Expand All @@ -106,8 +83,7 @@
(blur)="onBlur($event)"
(changeTextarea)="onChangeTextarea($event)">
</cds-textarea>



</div>

</div>
Expand Down
144 changes: 12 additions & 132 deletions ...st/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,31 +90,6 @@ appdashboard-filter{
margin: 5px auto;
max-width: calc(100% - 20px);

cds-element-from-url::ng-deep {
.row-upload{
.control-label{
font-size: .7em;
color: #647283;
}
.btn-save{
font-size: .7em;
padding: 4px;
margin: 0;
}
}

.row-dimension{
.control-label{
font-size: .8em;
color: #647283;
}

.row-info{
flex-basis: 80px;
}
}
}

&.no-image{
display: flex;
gap: 10px;
Expand Down Expand Up @@ -247,124 +222,29 @@ appdashboard-filter{
}


.response-frame-panel {
border: 2px dashed $blu-light-02;
border-radius: 6px;
display: flex;
justify-content: center;
font-size: 16px;
padding: 10px; //10px 20px 20px;
text-align: center;
.response-frame-wrapper{
position: relative;
display: block;
border-radius: 8px;
margin-left: 30px;
margin-right: 30px;
// margin-top: 10px;
margin-bottom: 10px;
position: relative;
padding: 0px;
background: rgba(255, 255, 255, 0.383);
overflow: visible;
// max-width: calc(100% - 66px);
width: auto;
// width: calc(100% - 30px);
}


.frame-panel {
position: relative;
display: flex;
width: 100%;
}

.text-editable-div {
margin-left: 20px;
display: block;
margin-top: 0px;
margin-left: 30px;
width: calc(100% - 66px);
}
// .frame-panel {
// position: absolute;
// left: 0;
// right: 0;
// top: 0;
// bottom: 0;
// z-index: 1;
// border-radius: 8px;
// margin: 0px;
// padding: 0;
// // &:hover{
// // background-color: #006cffc9;
// // transition: background-color 0.3s ease-in;
// // .frame-response {
// // display: inline-block;
// // }
// // }
// }
.bck-frame{
background-color: #006cffc9;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}




.response-frame-uploader-overlay {
background: #f0f4f7;
}

.response-frame-uploader label {
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.response-frame-uploader label input {
display: none;
}




.content-frame {
display: flex;
justify-content: center;
font-size: 16px;
text-align: center;
margin-left: 30px;
margin-bottom: 15px;
position: relative;
max-width: calc(100% - 60px);
width: auto;
height: auto;

#contentFrame {
position: relative;
.frame-panel {
border-radius: 6px;
}
.control-button {
&.delete {
position: absolute;
top: 0px;
right: 0px;
margin-right: 0px;
opacity: 0;
color: $color-withe-hex;
cursor: pointer;
transition: all .3s ease-in-out;
}
}
&:hover{
.control-button {
&.delete {
margin-right: -24px;
opacity: 1;
}
}
display: block;
overflow: hidden;
}
}


/** box-textarea **/
cds-textarea.text-editable-div ::ng-deep{
display: block;
Expand Down
6 changes: 6 additions & 0 deletions ...list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,12 @@ export class CdsActionReplyFrameComponent implements OnInit {
this.moveDownResponse.emit(this.index);
}

/** */
onDeletedMetadata(event){
this.response.metadata.src = null;
this.changeActionReply.emit();
}

/** onChangeTextarea */
onChangeTextarea(text:string) {
if(!this.previewMode){
Expand Down
79 changes: 48 additions & 31 deletions ...o/cds-dashboard/cds-canvas/base-elements/element-from-url/element-from-url.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,55 @@
<div class="row-upload">
<div class="response-image-uploader-overlay">

<div class="form-group">
<label class="control-label">
{{ 'Add path' | translate }}
</label>
<input type = "text"
[(ngModel)] = "pathElement"
class="input form-control"/>
</div>

<button
type="button"
class="btn btn-primary cds-blue-button"
(click)="onLoadPathElement()">
{{ 'load frame' | translate }}
</button>
<div *ngIf="!metadata.src" class="response-frame-panel">
<div class="row-upload">
<div class="response-image-uploader-overlay">

<div class="form-group">
<label class="control-label">
{{ 'Add path' | translate }}
</label>
<input type = "text"
[(ngModel)] = "pathElement"
class="input form-control"/>
</div>

<button
type="button"
class="btn btn-primary cds-blue-button"
(click)="onLoadPathElement()">
{{ 'load frame' | translate }}
</button>
</div>

</div>


<!-- <div class="row-dimension">
<div class="row-info">
<span class="control-label">{{ 'width' | translate }}:</span>
<input [(ngModel)] = "widthElement" type="text" class="input ng-untouched ng-pristine ng-valid">
</div>
<div class="row-info">
<span class="control-label">{{ 'height' | translate }}:</span>
<input [(ngModel)] = "heightElement" type="text" class="input ng-untouched ng-pristine ng-valid">
</div>
</div> -->
</div>




<!-- <div class="row-dimension">
<div class="row-info">
<span class="control-label">{{ 'width' | translate }}:</span>
<input [(ngModel)] = "widthElement" type="text" class="input ng-untouched ng-pristine ng-valid">
<div *ngIf="metadata.src" class="content-frame">
<iframe
id="contentFrame"
#iframe allowfullscreen
style= "border:none;"
[width]="widthElement"
[height]="heightElement"
[src]="sanitizerUrl()">
</iframe>

<div class="control-button delete" (click)="onDeletePathElement()">
<em class="material-icons">clear</em>
</div>
<div class="row-info">
<span class="control-label">{{ 'height' | translate }}:</span>
<input [(ngModel)] = "heightElement" type="text" class="input ng-untouched ng-pristine ng-valid">
</div>
</div> -->
</div>
40 changes: 40 additions & 0 deletions ...o/cds-dashboard/cds-canvas/base-elements/element-from-url/element-from-url.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,4 +95,44 @@
border-radius: 4px;
text-align: right;
}
}

.response-frame-panel {
border: 2px dashed $blu-light-02;
border-radius: 6px;
display: flex;
justify-content: center;
font-size: 16px;
padding: 10px; //10px 20px 20px;
text-align: center;
}

.content-frame {
display: flex;
width: auto;

#contentFrame {
position: relative;
border-radius: 6px;
}
.control-button {
&.delete {
position: absolute;
top: 0px;
right: 0px;
margin-right: 0px;
opacity: 0;
color: $blu;
cursor: pointer;
transition: all .3s ease-in-out;
}
}
&:hover{
.control-button {
&.delete {
margin-right: -24px;
opacity: 1;
}
}
}
}
Loading

0 comments on commit db09871

Please sign in to comment.