From 996507f6732adda020e7970bacb2fad6d66f4b4b Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Fri, 10 Jan 2020 18:54:14 +0900
Subject: [PATCH] =?UTF-8?q?=EC=AA=BD=EC=A7=80=20-=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../left-sidenav/message.component.html       | 49 ++++++++++---------
 .../left-sidenav/message.component.scss       | 15 +++++-
 .../translation-section.component.html        |  2 +-
 3 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
index fc8fd634..750388ce 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
@@ -37,52 +37,57 @@
       </form>
     </div>
   </div>
-  <div *ngIf="!isSearch">
+  <div *ngIf="!isSearch" class="message-section">
     <mat-tab-group
       #tabs
       mat-stretch-tabs
       animationDuration="0ms"
       [selectedIndex]="0"
       (selectedIndexChange)="onSelectedIndexChange($event)"
+      class="message-tab"
     >
       <mat-tab [label]="MessageType.Receive">
         <ng-template mat-tab-label>
           {{ 'message.messageTypeReceiving' | translate }}
         </ng-template>
-
-        <ucap-message-list-item
-          *ngFor="let message of messageRetrieveList$ | async"
-          [message]="message"
-          (click)="onClickDetail(message)"
-          class="message-item"
-        ></ucap-message-list-item>
+        <perfect-scrollbar fxFlex="1 1 auto">
+          <ucap-message-list-item
+            *ngFor="let message of messageRetrieveList$ | async"
+            [message]="message"
+            (click)="onClickDetail(message)"
+            class="message-item"
+          ></ucap-message-list-item>
+        </perfect-scrollbar>
       </mat-tab>
       <mat-tab [label]="MessageType.Send">
         <ng-template mat-tab-label>
           {{ 'message.messageTypeOutgoing' | translate }}
         </ng-template>
-
-        <ucap-message-list-item
-          *ngFor="let message of messageSendList$ | async"
-          [message]="message"
-          (click)="onClickDetail(message)"
-          class="message-item"
-        ></ucap-message-list-item>
+        <perfect-scrollbar fxFlex="1 1 auto">
+          <ucap-message-list-item
+            *ngFor="let message of messageSendList$ | async"
+            [message]="message"
+            (click)="onClickDetail(message)"
+            class="message-item"
+          ></ucap-message-list-item>
+        </perfect-scrollbar>
       </mat-tab>
       <mat-tab [label]="MessageType.Reservation">
         <ng-template mat-tab-label>
           {{ 'message.messageTypeReservation' | translate }}
         </ng-template>
-
-        <ucap-message-list-item
-          *ngFor="let message of messageReservationList$ | async"
-          [message]="message"
-          (click)="onClickDetail(message)"
-          class="message-item"
-        ></ucap-message-list-item>
+        <perfect-scrollbar fxFlex="1 1 auto">
+          <ucap-message-list-item
+            *ngFor="let message of messageReservationList$ | async"
+            [message]="message"
+            (click)="onClickDetail(message)"
+            class="message-item"
+          ></ucap-message-list-item>
+        </perfect-scrollbar>
       </mat-tab>
     </mat-tab-group>
   </div>
+
   <div *ngIf="isSearch">
     <div class="search-sub">
       <form [formGroup]="fgSearchType" class="w-100-p">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
index aff91d82..e05fde28 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
@@ -1,3 +1,7 @@
+.message-box {
+  position: relative;
+  height: 100%;
+}
 .current-head {
   h3 {
     display: inline-flex;
@@ -65,7 +69,16 @@
 .mat-tab-label-active {
   opacity: 1;
 }
-
 .message-item {
   cursor: pointer;
 }
+::ng-deep .message-box {
+  .message-section {
+    position: relative;
+    height: calc(100% - 130px);
+    .message-tab {
+      position: relative;
+      height: 100%;
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
index 9ede6f75..7865b1e6 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
@@ -13,7 +13,7 @@
     </span>
     <button
       mat-stroked-button
-      class="btn-translation-send"
+      class="btn-translation-send bg-accent-color"
       (click)="onClickSendTranslationMessage(translationPreviewInfo)"
     >
       <!--{{ 'chat.send' | translate }}-->