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.html

@@ -26,6 +26,7 @@
         fxLayoutAlign=" stretch"
         class="message-info"
       >
+        <!-- 쪽지 발/수신 프로필 이미지
         <div class="profile">
           <span class="profile-img-mask">
             <img />
@@ -70,6 +71,8 @@
           </span>
           <span class="name">{{ getSendReceiverNames() }}</span>
         </div>
+      -->
+
         <div class="title text-accent-darkest">
           {{ messageInfo.title }}
           <span class="btn-menu ">
@@ -84,10 +87,23 @@
             </button>
           </span>
         </div>
+        <div class="people">
+          <span
+            *ngIf="messageInfo.type === MessageType.Receive"
+            class="people label   bg-accent-color"
+            >발신자</span
+          >
+          <span
+            *ngIf="messageInfo.type !== MessageType.Receive"
+            class="people label  bg-accent-color bg-warn-color"
+            >수신자</span
+          >
+          <span class="name">{{ getSendReceiverNames() }}</span>
+        </div>
         <div class="date">
           <span
             *ngIf="messageInfo.type === MessageType.Receive"
-            class="label bg-warn-color "
+            class="label bg-accent-color"
             >{{ 'message.receivedTime' | translate }}</span
           >
           <span
@@ -144,14 +160,14 @@
                   <span class="mdi" [ngClass]="getFileStatusIcon(file)"></span>
                   <span>{{ file.resContent }}</span>
                 </div>
-                  <span class="file-size">{{ file.resSize | ucapBytes }}</span>
-                  <a>
-                    <span
-                      class="mdi mdi-download"
-                      *ngIf="file.activeYn"
-                      (click)="downloadAttachFileSingle(file)"
-                    ></span>
-                  </a>
+                <span class="file-size">{{ file.resSize | ucapBytes }}</span>
+                <a>
+                  <span
+                    class="mdi mdi-download"
+                    *ngIf="file.activeYn"
+                    (click)="downloadAttachFileSingle(file)"
+                  ></span>
+                </a>
               </li>
             </ul>
           </div>
@@ -237,11 +253,7 @@
   </mat-card-actions> -->
 </mat-card>
 
-<mat-menu
-  #messageMenu="matMenu"
-  xPosition="after"
-  yPosition="below"
->
+<mat-menu #messageMenu="matMenu" xPosition="after" yPosition="below">
   <button
     mat-menu-item
     *ngIf="messageInfo.type === MessageType.Send"

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

@@ -20,6 +20,7 @@
 .contents {
   height: 380px;
   .message-contents {
+    padding: 10px 0;
     pre {
       word-wrap: break-word;
       white-space: pre-wrap;
@@ -38,7 +39,7 @@
 ::ng-deep .message-container {
   background-color: #ffffff !important;
   .message-info {
-    .profile {
+    /*.profile {
       display: flex;
       flex-flow: row;
       align-items: center;
@@ -75,7 +76,7 @@
         font-size: 16px;
         margin-left: 20px;
       }
-    }
+    }*/
     .title {
       display: flex;
       flex-flow: row;
@@ -85,25 +86,48 @@
       padding: 10px 0 6px;
       line-height: 24px;
       color: #222222;
+      border-bottom: 1px solid #dddddd;
       .btn-menu {
         margin-left: auto;
         color: #333333;
       }
     }
-    .date {
-      font-size: 13px;
+    .people {
       display: flex;
       flex-flow: row;
       align-items: center;
+      padding-top: 10px;
       padding-bottom: 14px;
-
+      font-size: 1em;
       .label {
+        display: inline-flex;
+        flex: 0 0 auto;
         border-radius: 14px;
         padding: 2px 10px;
         margin-right: 10px;
-        font-size: 12px;
         color: #ffffff;
         line-height: 20px;
+        width: 100px;
+        justify-content: center;
+      }
+      .name {
+        display: inline-flex;
+        flex: 1 1 auto;
+      }
+    }
+    .date {
+      border-bottom: 1px solid #dddddd;
+      padding-bottom: 10px;
+      font-size: 1em;
+      .label {
+        display: inline-block;
+        border-radius: 14px;
+        padding: 2px 10px;
+        margin-right: 10px;
+        color: #ffffff;
+        line-height: 20px;
+        width: 100px;
+        text-align: center;
       }
     }
     .ps {