페이징처리 공통 css빼기, 읽지않은 메시지 이전대화보기 디자인적용

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss

@@ -151,27 +151,6 @@
   }
 }
 
-::ng-deep .mat-paginator {
-  .mat-paginator-container {
-    justify-content: center;
-  }
-  .mat-paginator-navigation-first {
-    order: 1;
-  }
-  .mat-paginator-navigation-previous {
-    order: 2;
-  }
-  // override material paginator page switch
-  .mat-paginator-range-label {
-    order: 3;
-  }
-  .mat-paginator-navigation-next {
-    order: 4;
-  }
-  .mat-paginator-navigation-last {
-    order: 5;
-  }
-}
 ::ng-deep .mat-form-field-appearance-legacy {
   .mat-form-field-infix {
     padding: 6px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/notice.component.scss

@@ -66,6 +66,11 @@
   box-sizing: border-box;
   display: flex;
   border-top: 1px solid #dddddd;
+  .mat-paginator {
+    .mat-paginator-container {
+      justify-content: center;
+    }
+  }
   .btn-box {
     height: 50px;
     padding-bottom: 10px;
@@ -77,7 +82,7 @@
   }
 }
 
-.mat-paginator {
+/*::ng-deep .mat-paginator {
   .mat-paginator-container {
     justify-content: center;
   }
@@ -97,7 +102,7 @@
   .mat-paginator-navigation-last {
     order: 5;
   }
-}
+}*/
 .mat-form-field-appearance-legacy {
   .mat-form-field-infix {
     padding: 6px;

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss

@@ -2,6 +2,7 @@
   display: flex;
   align-content: center;
   flex-flow: row;
+  align-items: flex-end;
   .line {
     height: 1px;
     background-color: #cccccc;

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.html

@@ -1,4 +1,4 @@
-<div class="read-here bg-warn-color">
+<div class="read-here bg-warn-color ">
   <!--<span class="line"></span>-->
   <span>여기까지 읽었습니다.</span>
   <!--<span class="line"></span>-->

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.scss

@@ -7,4 +7,5 @@
   color: #ffffff;
   border-radius: 100px;
   justify-content: center;
+  margin: 10px 0 20px;
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -1,4 +1,4 @@
-<div class="chat-messages" #scrollMe>
+<!--<div class="chat-messages" #scrollMe>
   <div class="message-row" *ngIf="eventRemain && messages.length > 0">
     <button mat-button (click)="onClickMore($event)">
       이전 대화 보기
@@ -14,7 +14,45 @@
         }})개
       </span>
     </button>
+  </div>-->
+<div class="chat-messages" #scrollMe>
+  <div class="unRead-count" *ngIf="
+        !!roomInfo &&
+        !!firstEventSeq &&
+        roomInfo.lastReadEventSeq < firstEventSeq
+      ">
+    <span class="line"></span>
+    <span class="count">
+      안읽은 메시지가 <span class="text-warn-color">({{ firstEventSeq - (roomInfo.lastReadEventSeq + 1) }})</span>개
+      더 있습니다.
+    </span>
+    <span class="line"></span>
   </div>
+  <div
+    *ngIf="eventRemain && messages.length > 0"
+    class="message-row view-previous bg-accent-dark"
+  >
+    <button mat-button (click)="onClickMore($event)">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        stroke="currentColor"
+        fill="none"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle class="st0" cx="10" cy="10" r="7.3" />
+        <polyline class="st0" points="12.9,10 10,7.1 7.1,10 " />
+        <line class="st0" x1="10" y1="12.9" x2="10" y2="7.1" />
+      </svg>
+      이전 대화 보기
+    </button>
+    <span class="line"></span>
+  </div>
+
   <!-- MESSAGE -->
   <div
     *ngFor="let message of messages; let i = index"

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss

@@ -158,3 +158,43 @@ $meBox-bg: #ffffff;
   white-space: pre-wrap;
   word-break: break-word;
 }
+.view-previous {
+  display: flex;
+  align-content: center;
+  flex-flow: row;
+  background-color: rgba(0, 0, 0, 0.4);
+  padding: 4px 10px;
+  color: #ffffff;
+  border-radius: 100px;
+  justify-content: center;
+  margin: 10px 0 20px;
+  button {
+    height: 24px;
+    line-height: 24px;
+    width: 100%;
+    svg {
+      stroke: #ffffff;
+      align-self: center;
+    }
+  }
+}
+.unRead-count {
+  display: flex;
+  justify-items: self-end;
+  flex-flow: row;
+  align-items: flex-end;
+  .line {
+    height: 1px;
+    background-color: #cccccc;
+    width: 40%;
+    flex: 1 1 auto;
+    margin-bottom: 10px;
+    display: inline-flex;
+  }
+  .count {
+    width: 260px;
+    font-size: 13px;
+    text-align: center;
+    font-weight: 600;
+  }
+}

projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss

@@ -12,7 +12,8 @@
 @import 'partials/icons';
 @import 'partials/normalize';
 @import 'partials/scrollbars';
-@import 'partials/presence.scss';
+@import 'partials/paginator';
+@import 'partials/presence';
 @import 'partials/list-item';
 @import 'partials/dialogs';
 

projects/ucap-webmessenger-ui/src/assets/scss/partials/_paginator.scss

@@ -0,0 +1,23 @@
+@charset 'utf-8';
+
+.mat-paginator {
+  .mat-paginator-container {
+    justify-content: center;
+  }
+  .mat-paginator-navigation-first {
+    order: 1;
+  }
+  .mat-paginator-navigation-previous {
+    order: 2;
+  }
+  // override material paginator page switch
+  .mat-paginator-range-label {
+    order: 3;
+  }
+  .mat-paginator-navigation-next {
+    order: 4;
+  }
+  .mat-paginator-navigation-last {
+    order: 5;
+  }
+}