쪽지 리스트 수정

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

@@ -143,7 +143,8 @@
                 <div>
                   <span class="mdi" [ngClass]="getFileStatusIcon(file)"></span>
                   <span>{{ file.resContent }}</span>
-                  <span>{{ file.resSize | ucapBytes }}</span>
+                </div>
+                  <span class="file-size">{{ file.resSize | ucapBytes }}</span>
                   <a>
                     <span
                       class="mdi mdi-download"
@@ -151,7 +152,6 @@
                       (click)="downloadAttachFileSingle(file)"
                     ></span>
                   </a>
-                </div>
               </li>
             </ul>
           </div>

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

@@ -109,5 +109,41 @@
     .ps {
       align-items: flex-start;
     }
+ .attachFile {
+      border-top: 1px solid #dddddd;
+      li {
+        display: flex;
+        flex-flow: row;
+        line-height: 2em;
+        flex: 1 1 auto;
+        .file-name {
+          display: inline-flex;
+          flex-flow: row;
+          flex: 1 1 auto;
+          border: 1px solid red;
+          white-space: nowrap;
+          word-wrap: normal;
+          overflow: hidden;
+          span:last-child {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: block;
+            width: calc(100% - 40px);
+          }
+        }
+        .file-size {
+          display: inline-flex;
+          margin-left: auto;
+          align-self: flex-end;
+          flex: 0 0 auto;
+          margin: 0 10px;
+        }
+        a {
+          display: inline-block;
+          width: 20px;
+          height: 100%;
+        }
+      }
+    }
   }
-}
+}

projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html

@@ -1,5 +1,5 @@
 <!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
-<div class="list-item" *ngIf="message" matRipple>
+<!--<div class="list-item" *ngIf="message" matRipple>
   <dl class="item-default">
     <dt>
       <mat-icon
@@ -34,4 +34,30 @@
       </div>
     </dd>
   </dl>
-</div>
+</div>-->
+
+<div class="list-item message-list" *ngIf="message" matRipple>
+  <dl class="item-default">
+    <dt>
+      <span class="name">
+        {{ message.userName }}
+        <span *ngIf="message.userCount > 1" class="text-accent-color number">
+          {{
+            'message.andOthers' | translate: { count: message.userCount - 1 }
+          }}
+        </span>
+      </span>
+    </dt>
+    <dd>
+      <mat-icon *ngIf="!!message.resType && message.resType === ContentType.Image">image</mat-icon>
+      <mat-icon *ngIf="!!message.resType && message.resType === ContentType.AttachFile">attach_file</mat-icon>
+      {{ message.title }}
+    </dd>
+  </dl>
+  <div class="date">
+    <span>{{ message.regDate | ucapDate: 'MM:DD' }}</span>
+    <span *ngIf="message.type === MessageType.Receive && !message.readYn" class="badge-new bg-warn-darkest">
+      N
+    </span>
+  </div>
+</div>

projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss

@@ -0,0 +1,52 @@
+.message-list {
+  &.list-item {
+    dl {
+      display: flex;
+      flex-flow: column;
+      flex: 1 1 auto;
+      width: calc(100% - 80px);
+      dt {
+        .name {
+          font-size: 16px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: block;
+          white-space: nowrap;
+          word-wrap: normal;
+          font-weight: 600;
+          span {
+            font-size: 13px;
+          }
+        }
+      }
+
+      dd {
+        color: #777777;
+        margin-top: 4px;
+        white-space: nowrap;
+        word-wrap: normal;
+        text-overflow: ellipsis;
+        display: block;
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+    .date {
+      display: flex;
+      flex-flow: column;
+      align-self: flex-start;
+      .badge-new {
+        border-radius: 50%;
+        color: #ffffff;
+        padding: 0;
+        text-align: center;
+        align-self: flex-end;
+        width: 20px;
+        height: 20px;
+        font-size: 12px;
+        margin-top: 4px;
+      }
+    }
+  }
+}