From a7218ebcef4088682512a21d5918c5ed70a25bb3 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Mon, 28 Oct 2019 16:45:07 +0900
Subject: [PATCH] style is modified

---
 .../ucap-webmessenger-app/src/app/app.module.ts    |  4 ++++
 .../components/left-sidenav/chat.component.html    | 13 ++++++++-----
 .../components/left-sidenav/chat.component.scss    | 14 ++++++++++++++
 .../layouts/messenger/messenger.layout.module.ts   |  8 ++++++++
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/app.module.ts b/projects/ucap-webmessenger-app/src/app/app.module.ts
index 93696aa2..b4826c78 100644
--- a/projects/ucap-webmessenger-app/src/app/app.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app.module.ts
@@ -5,6 +5,8 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
 import { UCapCommonApiModule } from '@ucap-webmessenger/api-common';
 import { UCapExternalApiModule } from '@ucap-webmessenger/api-external';
 import { UCapPublicApiModule } from '@ucap-webmessenger/api-public';
@@ -54,6 +56,8 @@ import { AppNativeLayoutModule } from './layouts/native/native.layout.module';
 
     MatProgressBarModule,
 
+    PerfectScrollbarModule,
+
     UCapCommonApiModule.forRoot({ urls: environment.urls.apiCommon }),
 
     UCapPublicApiModule.forRoot({
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
index 09ede2f5..9a94a635 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
@@ -1,5 +1,5 @@
-<div>
-  <mat-form-field>
+<div class="app-layout-chat-left-sidenav-chat-header">
+  <mat-form-field class="w-100-p">
     <input
       matInput
       #inputSearch
@@ -20,10 +20,13 @@
     </button>
   </mat-form-field>
 </div>
-<div style="height:100%">
-  <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
+<div class="app-layout-chat-left-sidenav-chat-list" perfectScrollbar>
+  <cdk-virtual-scroll-viewport
+    itemSize="20"
+    class="app-layout-chat-left-sidenav-chat-list-viewport"
+  >
     <ucap-room-list-item
-      *ngFor="let room of getRoomList()"
+      *cdkVirtualFor="let room of getRoomList()"
       [loginRes]="loginRes"
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
index 2400c68f..893614a7 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
@@ -1,3 +1,17 @@
+.app-layout-chat-left-sidenav-chat-header {
+  width: 100%;
+  height: 50px;
+}
+
+.app-layout-chat-left-sidenav-chat-list {
+  height: calc(100% - 50px);
+}
+
+.app-layout-chat-left-sidenav-chat-list-viewport {
+  width: 100%;
+  height: 100%;
+}
+
 .room-name {
   white-space: nowrap;
   overflow: hidden;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
index c1770132..e35dff82 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
@@ -5,6 +5,8 @@ import { CommonModule } from '@angular/common';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -21,6 +23,8 @@ import { MatInputModule } from '@angular/material/input';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { OverlayModule } from '@angular/cdk/overlay';
 
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
 import { UCapUiModule } from '@ucap-webmessenger/ui';
 import { UCapUiChatModule } from '@ucap-webmessenger/ui-chat';
 import { UCapUiRoomModule } from '@ucap-webmessenger/ui-room';
@@ -39,6 +43,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     DragDropModule,
     ReactiveFormsModule,
     OverlayModule,
+    ScrollingModule,
     MatFormFieldModule,
     MatInputModule,
     MatBadgeModule,
@@ -53,6 +58,9 @@ import { ReactiveFormsModule } from '@angular/forms';
     MatTabsModule,
     MatToolbarModule,
     MatChipsModule,
+
+    PerfectScrollbarModule,
+
     UCapUiModule,
     UCapUiChatModule,
     UCapUiRoomModule,