bug of scroll is fixed

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

@@ -17,7 +17,8 @@
           mat-icon-button
           aria-label="chats button"
           class="responsive-chats-button"
-           *ngIf="!!roomInfo && roomInfo.isTimeRoom">
+          *ngIf="!!roomInfo && roomInfo.isTimeRoom"
+        >
           <mat-icon>timer</mat-icon>
         </button>
       </div>
@@ -26,8 +27,13 @@
           {{ getRoomName() }}
         </h3>
         <!-- Timer Room Info -->
-        <div *ngIf="roomInfo && roomInfo.isTimeRoom" class="room-type text-accent-color ">
-          <span class="bg-accent-light">{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span>비밀 대화방입니다.
+        <div
+          *ngIf="roomInfo && roomInfo.isTimeRoom"
+          class="room-type text-accent-color "
+        >
+          <span class="bg-accent-light"
+            >{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span
+          >비밀 대화방입니다.
         </div>
         <!-- Timer Room Info -->
       </div>
@@ -82,8 +88,6 @@
     (fileDragOver)="onFileDragOver()"
     (fileDragLeave)="onFileDragLeave()"
   >
-
-
     <!-- CHAT MESSAGES -->
     <perfect-scrollbar
       fxFlex="1 1 auto"
@@ -124,6 +128,7 @@
   <div fxFlex="0 0 auto" fxLayout="column">
     <!-- REPLY FORM -->
     <ucap-chat-form
+      #chatForm
       (send)="onSendMessage($event)"
       (sendFiles)="onFileSelected($event)"
     ></ucap-chat-form>

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

@@ -18,12 +18,12 @@
     word-wrap: break-word;
   }
 }
-.container{
+.container {
   position: relative;
-  width:100%;
+  width: 100%;
 }
 .chat-toolbar {
-  width:100%;
+  width: 100%;
   height: 70px;
   min-height: 70px;
   align-items: center;
@@ -53,7 +53,7 @@
       }
     }
     .room-info {
-      display:flex;
+      display: flex;
       flex-flow: column;
       overflow: hidden;
       .room-name {
@@ -65,21 +65,42 @@
         font-size: 14px;
         line-height: normal;
         margin-top: 6px;
-        height:20px;
-        span{
-          border-radius:10px;
-          padding:1px 10px;
-          margin-right:6px;
-          font-size:13px;
+        height: 20px;
+        span {
+          border-radius: 10px;
+          padding: 1px 10px;
+          margin-right: 6px;
+          font-size: 13px;
         }
       }
     }
     .room-option {
-      wdith: 100%;
+      width: 100%;
       margin-left: auto;
     }
   }
 }
 .chat-content {
+  position: relative;
+  background: transparent;
   overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  .file-drop-zone-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.95);
+
+    .file-drop-zone {
+      position: absolute;
+
+      top: 10%;
+      left: 10%;
+      width: 80%;
+      height: 80%;
+    }
+  }
 }

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

@@ -4,7 +4,9 @@ import {
   OnDestroy,
   AfterViewChecked,
   ViewChild,
-  ElementRef
+  ElementRef,
+  AfterContentInit,
+  AfterViewInit
 } from '@angular/core';
 import {
   ucapAnimations,
@@ -43,7 +45,10 @@ import {
 } from '@app/types';
 import { RoomInfo, UserInfo, RoomType } from '@ucap-webmessenger/protocol-room';
 import { tap, take } from 'rxjs/operators';
-import { FileInfo } from '@ucap-webmessenger/ui-chat';
+import {
+  FileInfo,
+  FormComponent as UCapUiChatFormComponent
+} from '@ucap-webmessenger/ui-chat';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { MatMenuTrigger } from '@angular/material';
@@ -67,10 +72,13 @@ import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
   styleUrls: ['./messages.component.scss'],
   animations: ucapAnimations
 })
-export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
+export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild('messageBoxContainer', { static: true })
   private messageBoxContainer: ElementRef;
 
+  @ViewChild('chatForm', { static: true })
+  private chatForm: UCapUiChatFormComponent;
+
   @ViewChild('messageContextMenuTrigger', { static: true })
   messageContextMenuTrigger: MatMenuTrigger;
   messageContextMenuPosition = { x: '0px', y: '0px' };
@@ -167,6 +175,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
       tap(infoList => {
         if (!!infoList && infoList.length > 0) {
           this.baseEventSeq = infoList[0].seq;
+          this.readyToReply();
         }
       })
     );
@@ -175,8 +184,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
       select(AppStore.MessengerSelector.EventSelector.infoStatus)
     );
 
-    this.psChatContent.directiveRef.scrollToBottom(0, 0);
-
     this.interval = setInterval(() => {
       if (!!this.roomInfo.isTimeRoom) {
         this.store.dispatch(EventStore.infoIntervalClear({}));
@@ -198,8 +205,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     clearInterval(this.interval);
   }
 
-  ngAfterViewChecked(): void {
-    this.psChatContent.directiveRef.scrollToBottom(0, 0);
+  ngAfterViewInit(): void {
+    this.readyToReply();
   }
 
   getRoomName() {
@@ -240,6 +247,30 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
 
   selectContact() {}
 
+  readyToReply(): void {
+    setTimeout(() => {
+      this.focusReplyInput();
+      this.scrollToBottom();
+    });
+  }
+
+  focusReplyInput(): void {
+    setTimeout(() => {
+      this.chatForm.focus();
+    });
+  }
+
+  scrollToBottom(speed?: number): void {
+    speed = speed || 0;
+    if (this.psChatContent.directiveRef) {
+      this.psChatContent.directiveRef.update();
+
+      setTimeout(() => {
+        this.psChatContent.directiveRef.scrollToBottom(0, speed);
+      });
+    }
+  }
+
   async onSendMessage(message: string) {
     if (!message || message.trim().length === 0) {
       const result = await this.dialogService.open<

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts

@@ -23,6 +23,9 @@ export class FormComponent implements OnInit {
   @ViewChild('replyForm', { static: false })
   replyForm: NgForm;
 
+  @ViewChild('replyInput', { static: false })
+  replyInput: ElementRef<HTMLTextAreaElement>;
+
   @ViewChild('fileInput', { static: false })
   fileInput: ElementRef<HTMLInputElement>;
 
@@ -30,6 +33,10 @@ export class FormComponent implements OnInit {
 
   ngOnInit() {}
 
+  focus(): void {
+    this.replyInput.nativeElement.focus();
+  }
+
   onSend(event: Event) {
     event.preventDefault();