Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

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

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

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

@@ -1 +1 @@
-<div>{{ contents }}</div>
+<div class="guest">{{ contents }}</div>

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

@@ -0,0 +1,13 @@
+.guest {
+  display: flex;
+  align-content: center;
+  flex-flow: row;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  padding: 4px 20px;
+  color: #ffffff;
+  border-radius: 100px;
+  justify-content: center;
+  justify-items: center;
+  margin: 10px 0 20px;
+}

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

@@ -1,26 +1,9 @@
-<!--<div class="chat-messages" #scrollMe>
-  <div class="message-row" *ngIf="eventRemain && messages.length > 0">
-    <button mat-button (click)="onClickMore($event)">
-      이전 대화 보기
-      <span
-        *ngIf="
-          !!roomInfo &&
-          !!firstEventSeq &&
-          roomInfo.lastReadEventSeq < firstEventSeq
-        "
-      >
-        안읽은 메시지가 더 있습니다.({{
-          firstEventSeq - (roomInfo.lastReadEventSeq + 1)
-        }})개
-      </span>
-    </button>
-  </div>-->
 <div class="chat-messages" #scrollMe>
   <div
     *ngIf="eventRemain && messages.length > 0"
-    class="message-row view-previous bg-accent-dark"
+    class="message-row view-previous"
   >
-    <button mat-button (click)="onClickMore($event)">
+    <button mat-button (click)="onClickMore($event)" class="bg-accent-dark">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="20"
@@ -36,25 +19,25 @@
         <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>
-      이전 대화 보기
+      <span>이전 대화 보기</span>
-      <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>
     </button>
+    <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>
     <span class="line"></span>
   </div>
 

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

@@ -15,6 +15,7 @@ $meBox-bg: #ffffff;
   background-color: rgba(0, 0, 0, 0.1);
   padding: 10px;
   margin: 10px 0;*/
+  width: 100%;
 }
 
 .message-row {
@@ -176,43 +177,48 @@ $meBox-bg: #ffffff;
   white-space: pre-wrap;
   word-break: break-word;
 }
-.view-previous {
+::ng-deep .view-previous {
   display: flex;
-  align-content: center;
+  flex-flow: column;
-  flex-flow: row;
+  //background-color: rgba(0, 0, 0, 0.4);
-  background-color: rgba(0, 0, 0, 0.4);
-  padding: 4px 10px;
   color: #ffffff;
-  border-radius: 100px;
   justify-content: center;
+  justify-items: center;
   margin: 10px 0 20px;
   button {
-    height: 24px;
+    height: 100%;
-    line-height: 24px;
     width: 100%;
-    svg {
+    border-radius: 100px;
-      stroke: #ffffff;
+    .mat-button-wrapper {
-      align-self: center;
+      justify-items: center;
+      svg {
+        stroke: #ffffff;
+        align-self: center;
+        margin-right: 4px;
+      }
+    }
+  }
+  .unRead-count {
+    display: flex;
+    justify-items: self-end;
+    flex-flow: row;
+    align-items: flex-end;
+    height: 20px;
+    margin: 10px 0;
+    .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;
+      color: #333333;
     }
   }
 }
-.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;
-  }
-}