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,21 +58,21 @@ $line-basic: 1px solid #dddddd;
       background: transparent;
       overflow: auto;
       -webkit-overflow-scrolling: touch;
+    }
 
-      .file-drop-zone-container {
+    .file-drop-zone-container {
-        position: relative;
+      position: relative;
 
-        .file-drop-zone {
+      .file-drop-zone {
-          position: absolute;
+        position: absolute;
-          border: 2px solid gray;
+        border: 2px solid gray;
-          background-color: white;
+        background-color: white;
-          width: 600px;
+        width: 600px;
-          height: 150px;
+        height: 150px;
-          bottom: 0px;
+        bottom: 0px;
-          margin: auto;
+        margin: auto;
-          left: 0px;
+        left: 0px;
-          right: 0px;
+        right: 0px;
-        }
       }
     }
   }

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: {}
     });
   }