image viewer and file upload are modified

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -84,7 +84,11 @@
       </ucap-chat-messages>
     </perfect-scrollbar>
     <!-- CHAT MESSAGES -->
+  </div>
+  <!-- / CHAT CONTENT -->
 
+  <!-- CHAT FOOTER -->
+  <div fxFlex="0 0 auto" fxLayout="column">
     <div
       *ngIf="fileDragOver || (files && 0 < files.length)"
       class="file-drop-zone-container"
@@ -95,13 +99,12 @@
         ></ucap-ui-file-upload-queue>
       </div>
     </div>
-  </div>
-  <!-- / CHAT CONTENT -->
 
-  <!-- CHAT FOOTER -->
-  <div fxFlex="0 0 auto" fxLayout="column">
     <!-- REPLY FORM -->
-    <ucap-chat-form (send)="onSendMessage($event)"></ucap-chat-form>
+    <ucap-chat-form
+      (send)="onSendMessage($event)"
+      (sendFiles)="onFileSelected($event)"
+    ></ucap-chat-form>
     <!-- / REPLY FORM -->
   </div>
   <!-- / CHAT FOOTER-->

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss

@@ -58,6 +58,7 @@ $line-basic: 1px solid #dddddd;
       background: transparent;
       overflow: auto;
       -webkit-overflow-scrolling: touch;
+    }
 
     .file-drop-zone-container {
       position: relative;
@@ -75,5 +76,4 @@ $line-basic: 1px solid #dddddd;
       }
     }
   }
-  }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -241,10 +241,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
       ImageViewerDialogResult
     >(ImageViewerDialogComponent, {
       position: {
-        top: '10px'
+        top: '30px'
       },
+      maxWidth: '100vw',
+      maxHeight: '100vh',
+      height: 'calc(100% - 30px)',
       width: '100%',
-      height: '98%',
+      hasBackdrop: false,
       data: {}
     });
   }