쪽지- view수정중

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss

@@ -126,3 +126,12 @@
     }
   }
 }
+
+.char-search {
+  width: 100%;
+  height: 80px;
+  background-color: #ffffff;
+  padding: 20px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+  border-bottom: 1px solid #dddddd;
+}

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

@@ -9,11 +9,66 @@
     </mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <mat-drawer-container autosize [hasBackdrop]="true">
+    <mat-drawer-container
-      <div fxFlex fxLayout="column" fxLayoutAlign=" stretch">
+      autosize
-        <div class="title">
+      [hasBackdrop]="true"
+      class="message-container"
+    >
+      <div
+        fxFlex
+        fxLayout="column"
+        fxLayoutAlign=" stretch"
+        class="message-info"
+      >
+        <div class="profile">
+          <span class="profile-img-mask">
+            <img />
+          </span>
+          <span
+            *ngIf="messageInfo.type === MessageType.Receive"
+            class="people sender bg-accent-color"
+            alt="보낸사람"
+          >
+            <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"
+            >
+              <line class="st0" x1="5.8" y1="14.2" x2="14.2" y2="5.8" />
+              <polyline class="st0" points="5.8,5.8 14.2,5.8 14.2,14.2 " />
+            </svg>
+          </span>
+          <span
+            *ngIf="messageInfo.type !== MessageType.Receive"
+            class="people receiver bg-accent-color"
+            alt="받는사람"
+          >
+            <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"
+            >
+              <line class="st0" x1="14.2" y1="5.8" x2="5.8" y2="14.2" />
+              <polyline class="st0" points="14.2,14.2 5.8,14.2 5.8,5.8 " />
+            </svg>
+          </span>
+          <span class="name">{{ getSendReceiverNames() }}</span>
+        </div>
+        <div class="title text-accent-darkest">
           {{ messageInfo.title }}
-          <span>
+          <span class="btn-menu ">
             <button
               mat-icon-button
               aria-label="message menu"
@@ -26,49 +81,33 @@
             </button>
           </span>
         </div>
-        <div class="info">
+        <div class="date">
-          <ul>
+          <span
-            <li>
+            *ngIf="messageInfo.type === MessageType.Receive"
-              <span
+            class="label bg-warn-color "
-                *ngIf="messageInfo.type === MessageType.Receive"
+            >받은시간</span
-                class="label"
+          >
-                >보낸사람</span
+          <span
-              >
+            *ngIf="messageInfo.type === MessageType.Send"
-              <span
+            class="label bg-warn-color "
-                *ngIf="messageInfo.type !== MessageType.Receive"
+            >보낸시간</span
-                class="label"
+          >
-                >받는사람</span
+          <span
-              >
+            *ngIf="messageInfo.type === MessageType.Reservation"
-              <span>{{ getSendReceiverNames() }}</span>
+            class="label bg-warn-color "
-            </li>
+            >발송예정시간</span
-            <li>
+          >
-              <span
+          <span *ngIf="messageInfo.type !== MessageType.Reservation">{{
-                *ngIf="messageInfo.type === MessageType.Receive"
+            messageInfo.regDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
-                class="label"
+          }}</span>
-                >받은시간</span
+          <span *ngIf="messageInfo.type === MessageType.Reservation">{{
-              >
+            messageInfo.reservationTime | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
-              <span *ngIf="messageInfo.type === MessageType.Send" class="label"
+          }}</span>
-                >보낸시간</span
-              >
-              <span
-                *ngIf="messageInfo.type === MessageType.Reservation"
-                class="label"
-                >발송예정시간</span
-              >
-              <span *ngIf="messageInfo.type !== MessageType.Reservation">{{
-                messageInfo.regDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
-              }}</span>
-              <span *ngIf="messageInfo.type === MessageType.Reservation">{{
-                messageInfo.reservationTime
-                  | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
-              }}</span>
-            </li>
-          </ul>
         </div>
         <perfect-scrollbar>
           <div class="contents">
             <ul>
-              <li *ngFor="let cont of contents">
+              <li *ngFor="let cont of contents" class="message-contents">
                 <pre *ngIf="cont.resType === ContentType.Text">{{
                   cont.resContent
                 }}</pre>

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

@@ -19,9 +19,95 @@
 
 .contents {
   height: 380px;
+  .message-contents {
+    pre {
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: 0.98em;
+      color: #444444;
+    }
+  }
 
   .thumbnail {
     max-width: 250px;
     max-height: 250px;
   }
 }
+
+::ng-deep .message-container {
+  background-color: #ffffff !important;
+  .message-info {
+    .profile {
+      display: flex;
+      flex-flow: row;
+      align-items: center;
+      width: 100%;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #dddddd;
+      .profile-img-mask {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 1px solid #dddddd;
+      }
+      .people {
+        display: flex;
+        flex-flow: row;
+        align-items: center;
+        margin-left: -10px;
+        width: 20px;
+        height: 20px;
+        text-indent: -1000000px;
+        align-self: flex-end;
+        border-radius: 50%;
+        &.receiver,
+        &.sender {
+          svg {
+            stroke: #ffffff;
+          }
+        }
+        &.sender {
+        }
+      }
+      .name {
+        font-size: 16px;
+        margin-left: 20px;
+      }
+    }
+    .title {
+      display: flex;
+      flex-flow: row;
+      align-items: center;
+      font-size: 18px;
+      font-weight: 500;
+      padding: 10px 0 6px;
+      line-height: 24px;
+      color: #222222;
+      .btn-menu {
+        margin-left: auto;
+        color: #333333;
+      }
+    }
+    .date {
+      font-size: 13px;
+      display: flex;
+      flex-flow: row;
+      align-items: center;
+      padding-bottom: 14px;
+
+      .label {
+        border-radius: 14px;
+        padding: 2px 10px;
+        margin-right: 10px;
+        font-size: 12px;
+        color: #ffffff;
+        line-height: 20px;
+      }
+    }
+    .ps {
+      align-items: flex-start;
+    }
+  }
+}

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

@@ -212,6 +212,12 @@ $daesang-grey: (
     background: mat-color($accent);
     color: mat-color($accent, default-contrast);
   }
+  .bg-warn-color {
+    background-color: mat-color($warn, 300);
+  }
+  .bg-warn-darkest {
+    background-color: mat-color($warn, 600);
+  }
   .text-primary-color {
     color: mat-color($primary);
   }

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

@@ -1,5 +1,5 @@
-<div fxFlex fxLayout="row">
+<div fxFlex fxLayout="row" class="chatroom-search">
-  <div fxLayout="row" fxLayoutAlign="start center" class="input">
+  <div fxLayout="row" fxLayoutAlign="start center" class="input search-form">
     <form [formGroup]="fgSearch" class="w-100-p">
       <mat-form-field floatLabel="never">
         <input
@@ -21,10 +21,10 @@
           <mat-icon>close</mat-icon>
         </button>
       </mat-form-field>
-      {{ curIndex }} / {{ totalCount }}
+      <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
     </form>
   </div>
-  <div class="btn">
+  <div class="btns">
     <button mat-stroked-button (click)="onClickSearchAndPrev()">
       <span class="mdi mdi-arrow-up-bold-box-outline mid-18px"></span>
     </button>

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

@@ -0,0 +1,26 @@
+.chatroom-search {
+  display: flex;
+  flex: 1 1 auto;
+  .search-form {
+    flex-flow: row;
+    flex: 1 1 auto;
+    form {
+      display: flex;
+      .mat-form-field {
+        width: 100%;
+        flex-flow: row;
+        flex: 1 1 auto;
+        margin-right: 20px;
+      }
+      .text-amount {
+        display: inline-flex;
+        width: 80px;
+        align-self: center;
+      }
+    }
+  }
+  .btns {
+    display: flex;
+    flex: 0 0 0%;
+  }
+}