maximize and minimize functionality for a modal dialog in angular.

Akshay

Hello everyone,

We have developed a softphone application using Angular. The softphone is designed as a phone-shaped modal dialog, which is displayed on a component.

Now, what I would like to achieve is the ability to select and edit data on the component itself when I minimize the softphone (modal dialog). This means that even when the softphone is minimized, I should still be able to interact with and modify the content on the underlying component.


 




    
      
      
    

// here code for the dial-pad

above is the for HTML. for softphone.

.myCustomModalClass .modal-dialog {
  max-width: 17% !important;
}

@media (min-height: 900px) {
  .myCustomModalClass .modal-dialog {
    height: 90% !important;
 
  }
}

::ng-deep .modal-content {
  position: relative !important;
  display: flex;
  flex-direction: column;
  width: 90%;
  pointer-events: auto;
  background-color: #666c70;
  background-clip: padding-box;
  border: 2px solid #140d0d;
  border-radius: 8% !important;
  outline: 0;
  height: 60%;
  align-content: center;
  height: 550px !important;
 
}

.dial-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #666c70;
}

above is the code for CSS.

GetClickToCall(SoftPhonecontent){
this.modalService.open(content, { backdrop: "static", size: "sm", centered: true, windowClass: "myCustomModalClass", keyboard: false });
}

above is the code for Typescript .

Any help would be appritiated.

Thank you.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul3y ago

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 90%;
  pointer-events: auto;
  background-color: #666c70;
  background-clip: padding-box;
  border: 2px solid #140d0d;
  border-radius: 8%;
  outline: 0;
  height: 550px;
  align-content: center;
}

.modal-content.minimized {
  display: none;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
}

isMinimized: boolean = false;

toggleDialog() {
  this.isMinimized = !this.isMinimized;
}

GetClickToCall(content) {
  this.modalService.open(content, { backdrop: "static", size: "sm", centered: true, windowClass: "myCustomModalClass", keyboard: false });
}

Removed the separate maximize button and replaced it with a toggle button that changes its icon based on the isMinimized value.
Removed the maximizeDialog() function.
Added a new toggleDialog() function that toggles the isMinimized value between true and false.
Updated the ngClass directive to add the minimized class to the modal-content div when isMinimized is true, hiding the entire content.
Adjusted the CSS to remove the fixed height and background color of the modal-content, allowing it to adapt to its content.

Akshay3y ago
@Rajkiran Swain thank you for your responce.

We tried this the whole modal-dialog of softphone is not getting minimized

Only dialpad is getting minimize. and still we are not able to interact with and modify the content on the underlying component.

Please help thank you.

Rajkiran Swain3y ago

isMinimized: boolean = false;

minimizeDialog() {
  this.isMinimized = true;
}

maximizeDialog() {
  this.isMinimized = false;
}

GetClickToCall(content) {
  this.modalService.open(content, { backdrop: "static", size: "sm", centered: true, windowClass: "myCustomModalClass", keyboard: false });
}