From 22605ae51e16e60bf9767c1729ebaf05c7b54b4c Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 29 Oct 2019 11:39:34 +0900
Subject: [PATCH] perfect scrollbar of messeages is added

---
 .../components/messages.component.html        | 24 ++++++++++---------
 .../components/messages.component.scss        | 22 ++++++++---------
 .../components/messages.component.ts          | 14 +++++------
 3 files changed, 30 insertions(+), 30 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 066d70ac..fff56f70 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
@@ -70,17 +70,19 @@
     <!-- Timer Room Info -->
 
     <!-- CHAT MESSAGES -->
-    <ucap-chat-messages
-      [messages]="eventList$ | async"
-      [userInfos]="userInfoList"
-      [loginRes]="loginRes"
-      [sessionVerInfo]="sessionVerInfo"
-      (massDetail)="onMassDetail($event)"
-      (save)="onSave($event)"
-      (imageViewer)="onImageViewer($event)"
-      (contextMenu)="onContextMenuMessage($event)"
-    >
-    </ucap-chat-messages>
+    <perfect-scrollbar fxFlex="1 1 auto" #psChatContent>
+      <ucap-chat-messages
+        [messages]="eventList$ | async"
+        [userInfos]="userInfoList"
+        [loginRes]="loginRes"
+        [sessionVerInfo]="sessionVerInfo"
+        (massDetail)="onMassDetail($event)"
+        (save)="onSave($event)"
+        (imageViewer)="onImageViewer($event)"
+        (contextMenu)="onContextMenuMessage($event)"
+      >
+      </ucap-chat-messages>
+    </perfect-scrollbar>
     <!-- CHAT MESSAGES -->
 
     <div
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 90dc506d..a945a34c 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
@@ -1,5 +1,5 @@
 @charset 'utf-8';
-$line-basic:1px solid #dddddd;
+$line-basic: 1px solid #dddddd;
 @mixin ellipsis($row) {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -28,9 +28,9 @@ $line-basic:1px solid #dddddd;
       height: 70px;
       min-height: 70px;
       border-bottom: $line-basic;
-      background-color:#ffffff;
-      .chat-header{
-        width:100%;
+      background-color: #ffffff;
+      .chat-header {
+        width: 100%;
         .responsive-chats-button {
           padding: 0;
           width: 40px;
@@ -42,14 +42,14 @@ $line-basic:1px solid #dddddd;
           font-weight: 100;
           line-height: 40px;
         }
-        .room-name{
-          font-size:16px;
-          padding:0 10px;
-          @include ellipsis(1)
+        .room-name {
+          font-size: 16px;
+          padding: 0 10px;
+          @include ellipsis(1);
         }
-        .room-option{
-          width:100px;
-          margin-left:auto;
+        .room-option {
+          width: 100px;
+          margin-left: auto;
         }
       }
     }
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 ca3a84af..d543978b 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
@@ -55,6 +55,7 @@ import {
   ImageViewerDialogResult
 } from '@app/layouts/common/dialogs/image-viewer.dialog.component';
 import { Maximum_Range } from '@ucap-webmessenger/core';
+import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
 
 @Component({
   selector: 'app-layout-messenger-messages',
@@ -70,6 +71,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
   messageContextMenuTrigger: MatMenuTrigger;
   messageContextMenuPosition = { x: '0px', y: '0px' };
 
+  @ViewChild('psChatContent', { static: true })
+  psChatContent: PerfectScrollbarComponent;
+
   environmentsInfo: EnvironmentsInfo;
 
   loginRes: LoginResponse;
@@ -143,7 +147,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
       select(AppStore.MessengerSelector.EventSelector.selectAllInfoList)
     );
 
-    this.scrollToBottomForMessageBoxContainer();
+    this.psChatContent.directiveRef.scrollToBottom(0, 0);
   }
 
   ngOnDestroy(): void {
@@ -159,7 +163,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
   }
 
   ngAfterViewChecked(): void {
-    this.scrollToBottomForMessageBoxContainer();
+    this.psChatContent.directiveRef.scrollToBottom(0, 0);
   }
 
   getRoomName() {
@@ -220,12 +224,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo: this.roomInfo }));
   }
 
-  private scrollToBottomForMessageBoxContainer(): void {
-    try {
-      this.messageBoxContainer.nativeElement.scrollTop = this.messageBoxContainer.nativeElement.scrollHeight;
-    } catch (err) {}
-  }
-
   /** MassText Detail View */
   onMassDetail(value: number) {
     this.store.dispatch(