From 5d44c1d2f126cee4e1b645f76b059a5d7aa544cf Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 29 Oct 2019 18:19:41 +0900
Subject: [PATCH] image viewer and file upload are modified

---
 .../components/messages.component.html        | 13 ++++++----
 .../components/messages.component.scss        | 26 +++++++++----------
 .../components/messages.component.ts          |  7 +++--
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index fff56f70..828706c4 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/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-->
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
index a945a34c..b53ad412 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/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 {
-        position: relative;
+    .file-drop-zone-container {
+      position: relative;
 
-        .file-drop-zone {
-          position: absolute;
-          border: 2px solid gray;
-          background-color: white;
-          width: 600px;
-          height: 150px;
-          bottom: 0px;
-          margin: auto;
-          left: 0px;
-          right: 0px;
-        }
+      .file-drop-zone {
+        position: absolute;
+        border: 2px solid gray;
+        background-color: white;
+        width: 600px;
+        height: 150px;
+        bottom: 0px;
+        margin: auto;
+        left: 0px;
+        right: 0px;
       }
     }
   }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index d543978b..feb12ced 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/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: {}
     });
   }