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

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss

@@ -81,7 +81,7 @@
       flex-flow: row;
       align-items: center;
       font-size: 18px;
-      font-weight: 500;
+      font-weight: 600;
       padding: 10px 0 6px;
       line-height: 24px;
       color: #222222;

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -236,6 +236,9 @@ $daesang-grey: (
   .border-accent-color {
     border: 1px solid mat-color($accent);
   }
+  .stroke-accent-darkest {
+    stroke: mat-color($accent, 800);
+  }
   .border-warn-color {
     border: mat-color($warn);
   }

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

@@ -1,20 +1,20 @@
 <div class="event-main">
-  <div class="event-header">
+  <div class="event-header bg-accent-darkest">
     {{ message.sentMessageJson.title }}
   </div>
   <ul class="event-info">
-    <li class="event-title">
+    <li class="event-sender bg-accent-brightest text-accent-darkest">
+      <span class="bg-accent-dark"> 발송인</span>
+      {{ message.sentMessageJson.sendName }}
+    </li>
+    <li class="event-time bg-accent-brightest text-accent-darkest">
+      <span class="bg-accent-dark">발송시간</span>
+      {{ message.sentMessageJson.postDate | ucapDate: 'YYYY.MM.DD a hh:mm' }}
+    </li>
+    <li class="event-content">
       {{ message.sentMessageJson.content }}
     </li>
-    <li class="event-date">
-      <span>발송인</span>{{ message.sentMessageJson.sendName }}
-    </li>
-    <li class="event-time">
-      <span>발송시간</span
-      >{{ message.sentMessageJson.postDate | ucapDate: 'YYYY.MM.DD a hh:mm' }}
-    </li>
   </ul>
-
   <!-- <div class="btn-box">
     <button mat-button (click)="onClickSave()">상세보기</button>
   </div> -->

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

@@ -3,30 +3,43 @@
   text-align: left;
   .event-header {
     padding: 10px;
-    background-color: #efefef;
-    text-align: center;
     font-size: 14px;
     font-weight: 600;
+    margin: 6px 6px 2px;
+    padding: 10px 20px;
+    border-radius: 3px 3px 0 0;
   }
   .event-info {
-    padding: 10px 14px;
+    margin: 0 4px;
     line-height: 1.6em;
     li {
-      margin-bottom: 4px;
       &.event-title {
-        border-bottom: 1px solid #dddddd;
         margin-bottom: 10px;
         padding-bottom: 10px;
         font-size: 14px;
       }
-      &.event-date,
+      &.event-sender,
       &.event-time {
-        color: #666666;
+        padding: 4px 10px;
+        border-bottom: 1px dotted #dddddd;
+        span {
+          width: 80px;
+          padding: 2px 6px;
+          margin-right: 10px;
+          border-radius: 100px;
+          line-height: 20px;
+          display: inline-flex;
+          justify-content: center;
+          font-size: 0.96em;
+          margin-bottom: 2px;
+        }
       }
-      span {
+      &.event-content {
-        padding: 2px 6px;
+        padding: 10px;
-        background-color: #efefef;
+        color: #444444;
-        margin-right: 10px;
+        font-weight: normal;
+        margin-bottom: 10px;
+        font-size: 1em;
       }
     }
   }

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

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

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

@@ -2,17 +2,9 @@
   display: flex;
   align-content: center;
   flex-flow: row;
-  .line {
+  //background-color: rgba(0, 0, 0, 0.4);
-    height: 1px;
+  padding: 4px 10px;
-    background-color: #cccccc;
+  color: #ffffff;
-    width: 40%;
+  border-radius: 100px;
-    flex: 1 1 auto;
+  justify-content: center;
-    margin-bottom: 10px;
-  }
-  .date {
-    width: 160px;
-    font-size: 13px;
-    text-align: center;
-    font-weight: 600;
-  }
 }

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

@@ -1,135 +1,3 @@
-/*.chat-messages {
-  position: relative;
-  padding: 16px 40px;
-
-  .message-row {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-end;
-    padding: 0 16px 4px 16px;
-
-    .avatar {
-      position: absolute;
-      left: -32px;
-      margin: 0;
-    }
-
-    .bubble {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 12px;
-      max-width: 100%;
-
-      .message {
-        white-space: pre-wrap;
-        line-height: 1.2;
-      }
-
-      .time {
-        position: absolute;
-        display: none;
-        width: 100%;
-        font-size: 11px;
-        margin-top: 8px;
-        top: 100%;
-        left: 0;
-        white-space: nowrap;
-      }
-    }
-
-    &.contact {
-      .bubble {
-        border-top-left-radius: 5px;
-        border-bottom-left-radius: 5px;
-
-        border-top-right-radius: 20px;
-        border-bottom-right-radius: 20px;
-
-        .time {
-          margin-left: 12px;
-        }
-      }
-
-      &.first-of-group {
-        .bubble {
-          border-top-left-radius: 20px;
-        }
-      }
-
-      &.last-of-group {
-        .bubble {
-          border-bottom-left-radius: 20px;
-        }
-      }
-    }
-
-    &.me {
-      padding-left: 40px;
-
-      .avatar {
-        order: 2;
-        margin: 0 0 0 16px;
-      }
-
-      .bubble {
-        margin-left: auto;
-
-        border-top-left-radius: 20px;
-        border-bottom-left-radius: 20px;
-
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-
-        .time {
-          justify-content: flex-end;
-          right: 0;
-          margin-right: 12px;
-        }
-      }
-
-      &.first-of-group {
-        .bubble {
-          border-top-right-radius: 20px;
-        }
-      }
-
-      &.last-of-group {
-        .bubble {
-          border-bottom-right-radius: 20px;
-        }
-      }
-    }
-
-    &.contact + .me,
-    &.me + .contact {
-      padding-top: 20px;
-      margin-top: 20px;
-    }
-
-    &.first-of-group {
-      .bubble {
-        border-top-left-radius: 20px;
-        padding-top: 13px;
-      }
-    }
-
-    &.last-of-group {
-      .bubble {
-        border-bottom-left-radius: 20px;
-        padding-bottom: 13px;
-
-        .time {
-          display: flex;
-        }
-      }
-    }
-  }
-}
-*/
 $otherBox-line: #cccccc;
 $otherBox-bg: #ffffff;
 $meBox-line: #cccccc;
@@ -141,12 +9,12 @@ $meBox-bg: #ffffff;
   flex-direction: column;
 }
 .information-msg {
-  width: 100%;
+  /* width: 100%;
   height: 100%;
   text-align: center;
   background-color: rgba(0, 0, 0, 0.1);
   padding: 10px;
-  margin: 10px 0;
+  margin: 10px 0;*/
 }
 
 .message-row {