프로필&뷰어 수정

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

@@ -95,12 +95,9 @@
 
     .file-drop-zone {
       position: absolute;
-      background-color: rgb(180, 180, 180);
+      padding:10px 10px 0 10px;
-
+      background-color: rgb(54, 54, 54, 0.8);
-      top: calc(100% - 200px);
+      bottom:0
-      left: 20%;
-      width: 60%;
-      height: 200px;
     }
   }
 }

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

@@ -1,7 +1,5 @@
 <div class="bubble-main">
-  <!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
+  <div class="file-thumbimg">
-  <!-- <div class="file-img" [ngClass]="fileInfo.FileExt"></div> -->
-  <div>
     <img *ngIf="!!fileInfo.thumbUrl" [src]="fileInfo.thumbUrl" />
   </div>
   <div

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

@@ -1,18 +1,13 @@
 .bubble-main {
-  flex-direction: column;
+  display:flex;
+  flex-direction: row;
   padding: 14px;
-  .file-img {
+  .file-thumbimg{
-    display: inline-flex;
+    display:inline-flex;
-    width: 50px;
+    img {
-    height: 50px;
+      width:200px;
-    float: left;
+      padding-right: 20px;
-    margin-right: 14px;
+      background-repeat: no-repeat;
-    background-repeat: no-repeat;
-    &.video {
-      background-image: url(/assets/images/file/icon_talk_video.png);
-      &.disable {
-        background-image: url(/assets/images/file/icon_talk_video_d.png);
-      }
     }
   }
   .file-info {
@@ -20,7 +15,7 @@
     flex-direction: column;
     text-align: left;
     line-height: 1.6em;
-    width:100%;
+    min-width:100px;
     margin-top:10px;
     .file-name {
       font-size: 14px;

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

@@ -1,4 +1,4 @@
-<mat-card class="example-card">
+<mat-card class="example-card mat-elevation-z">
   <mat-card-header>
     <mat-card-title>
       <span>{{ userInfo.name }}</span>
@@ -6,70 +6,124 @@
     </mat-card-title>
     <mat-card-subtitle>{{ userInfo.deptName }}</mat-card-subtitle>
   </mat-card-header>
+
   <mat-card-content>
+    <div class="profile-img">
+      <img ucapImage [base]="profileImageRoot" [path]="userInfo.profileImageFile"
+        [default]="'assets/images/img_nophoto_50.png'" />
+    </div>
+    <!-- 내프로필의 경우<div class="profile-option">이 없음 -->
+    <div class="profile-option">
+      <span class="btn-favorite">
+        <!--즐겨찾기 추가버튼 추가된 상태: svg에 class="on"-->
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <polygon
+            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
+          </polygon>
+        </svg>
+      </span>
+      <span class="btn-groupadd">
+        <!--친구 추가 버튼-->
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="on">
+          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+          <circle cx="8.5" cy="7" r="4"></circle>
+          <line x1="20" y1="8" x2="20" y2="14"></line>
+          <line x1="23" y1="11" x2="17" y2="11"></line>
+        </svg>
+        <!--친구 삭제 버튼-->
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+          <circle cx="8.5" cy="7" r="4"></circle>
+          <line x1="23" y1="11" x2="17" y2="11"></line>
+        </svg>
+      </span>
+    </div>
+
     <ul>
       <li>
-        <img
+        <!--<mat-icon>chat</mat-icon>-->
-          ucapImage
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          [base]="profileImageRoot"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
-          [path]="userInfo.profileImageFile"
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-          [default]="'assets/images/img_nophoto_50.png'"
+        </svg>
-        />
-      </li>
-      <li>
-        <mat-icon>chat</mat-icon>
         {{ userInfo.intro }}
       </li>
       <li>
-        <mat-icon>email</mat-icon>
+        <!--<mat-icon>email</mat-icon>-->
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+          <polyline points="22,6 12,13 2,6"></polyline>
+        </svg>
         {{ userInfo.email }}
       </li>
       <li>
-        <mat-icon>local_phone</mat-icon>
+        <!--<mat-icon>local_phone</mat-icon>-->
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <path
+            d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z">
+          </path>
+        </svg>
         {{ userInfo.lineNumber }}
       </li>
       <li>
-        <mat-icon>phone_android</mat-icon>
+        <!--<mat-icon>phone_android</mat-icon>-->
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
+          <line x1="12" y1="18" x2="12" y2="18"></line>
+        </svg>
         {{ userInfo.hpNumber }}
       </li>
     </ul>
   </mat-card-content>
+
   <mat-card-actions>
     <div fxFlex fxLayout="row" fxLayoutAlign="space-around center">
-      <button
+      <button mat-mini-fab class="mat-elevation-z" [matTooltip]="isMe ? 'MyTalk' : '1:1 대화'" matTooltipPosition="above"
-        mat-mini-fab
+        (click)="onClickOpenChat()">
-        [matTooltip]="isMe ? 'MyTalk' : '1:1 대화'"
+        <!--<mat-icon>chat</mat-icon>-->
-        matTooltipPosition="above"
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-        (click)="onClickOpenChat()"
+          stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
-      >
+          <path
-        <mat-icon>chat</mat-icon>
+            d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
+          </path>
+        </svg>
       </button>
-      <button
+
-        mat-mini-fab
+      <button mat-mini-fab class="mat-elevation-z" *ngIf="!isMe" matTooltip="전화" matTooltipPosition="above"
-        *ngIf="!isMe"
+        (click)="onClickCall()">
-        matTooltip="전화"
+        <!--<mat-icon>call</mat-icon>-->
-        matTooltipPosition="above"
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-        (click)="onClickCall()"
+          stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
-      >
+          <path
-        <mat-icon>call</mat-icon>
+            d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z">
+          </path>
+        </svg>
       </button>
-      <button
+
-        mat-mini-fab
+      <button mat-mini-fab class="mat-elevation-z" *ngIf="!isMe" matTooltip="화상회의" matTooltipPosition="above"
-        *ngIf="!isMe"
+        (click)="onClickVideoConference()">
-        matTooltip="화상회의"
+        <!--<mat-icon>videocam</mat-icon>-->
-        matTooltipPosition="above"
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-        (click)="onClickVideoConference()"
+          stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
-      >
+          <path
-        <mat-icon>videocam</mat-icon>
+            d="M15.6 11.6L22 7v10l-6.4-4.5v-1zM4 5h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2z" />
+        </svg>
       </button>
-      <button
+
-        mat-mini-fab
+      <button mat-mini-fab class="mat-elevation-z" *ngIf="!isMe" matTooltip="쪽지" matTooltipPosition="above"
-        *ngIf="!isMe"
+        (click)="onClickMessage()">
-        matTooltip="쪽지"
+        <!--<mat-icon>sms</mat-icon>-->
-        matTooltipPosition="above"
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-        (click)="onClickMessage()"
+          stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
-      >
+          <line class="st0" x1="18" y1="2" x2="9.2" y2="10.8" />
-        <mat-icon>sms</mat-icon>
+          <polygon class="st0" points="18,2 12.4,18 9.2,10.8 2,7.6 " />
+        </svg>
       </button>
     </div>
   </mat-card-actions>

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

@@ -1,3 +1,104 @@
+@mixin ellipsis($row) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @if $row == 1 {
+    display: block;
+    white-space: nowrap;
+    word-wrap: normal;
+  } @else if $row >= 2 {
+    display: -webkit-box;
+    -webkit-line-clamp: $row;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
+  }
+}
+::ng-deep .mat-card-header-text{
+  width:100%;
+  .mat-card-subtitle{
+    color: rgb(256, 256, 256, 0.7) !important;
+    text-align:center;
+    margin-top:10px !important;
+  }
+}
+
 .example-card {
   width: 400px;
+  padding: 0 0 20px;
+  position: relative;
+  .mat-card-header{
+    justify-content: center;
+    padding-bottom: 40px;
+    background: #ce395d;
+    background: linear-gradient(to right, #345385, #ef4c73);
+    color: #ffffff;
+    padding-top: 20px;
+    width:100%;
+    .mat-card-title{
+      margin-bottom: 12px;
+      max-width: 100%;
+      justify-content: center;
+      display: flex;
+      margin:0 20px;
+      span{
+        @include ellipsis(1);
+      }
+    }
+  }
+  .mat-card-content{
+    margin-top:-40px;
+    .profile-img{
+      display:flex;
+      height:80px;
+      justify-content: center;
+      margin-bottom:20px;
+      img{
+        widows: 80px;
+        height: 80px;
+        border-radius: 50%;
+        background-color:#efefef;
+        border:2px solid #ffffff;
+      }
+    }
+    .profile-option{
+      display:flex;
+      padding:0 20px;
+      color:#ffffff;
+      margin-top: -100px;
+      height: 120px;
+      .btn-favorite{
+        cursor: pointer;
+        .on{
+          fill:yellow;
+        }
+      }
+      .btn-groupadd{
+        margin-left:auto;
+        cursor: pointer;
+        svg{
+          display:none;
+        &.on{
+            display:block;
+          }
+        }
+      }
+    }
+    ul{
+      padding:0 20px;
+      display:flex;
+      flex-flow: column;
+      margin-top:-20px;
+      li{
+        display:inline-flex;
+        height:30px;
+        align-items: center;
+        flex-flow:row;
+        margin-bottom:20px;
+
+        svg{
+          margin-right:10px;
+          color:#777777;
+        }
+      }
+    }
+  }
 }

projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html

@@ -1,25 +1,23 @@
 <div fxLayout="row wrap" fxFlex="100" class="ucap-file-upload-queue-container">
-  <div
+  <div *ngFor="let fileUploadItem of fileUploadItems" class="file-upload-item">
-    fxLayout="column"
+    <div fxLayout="row" class="file-upload-info">
-    fxFlex="100"
+      <!--<mat-icon>image</mat-icon>-->
-    fxFlex.gt-xs="100"
+      <!--파일이미지 svg-->
-    fxFlex.gt-md="25"
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-    *ngFor="let fileUploadItem of fileUploadItems"
+        stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
-  >
+        <path
-    <div fxLayout="row">
+          d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">
-      <div>
+        </path>
-        <mat-icon>image</mat-icon>
+      </svg>
-      </div>
+
-      <div>{{ fileUploadItem.file.name }}</div>
+      <div class="file-upload-name">{{ fileUploadItem.file.name }}</div>
       <!-- <div (click)="onClickClear(fileUploadItem)">
         <mat-icon>clear</mat-icon>
       </div> -->
     </div>
-    <div fxLayout="row">
+
-      <mat-progress-bar
+    <div fxLayout="row" class="file-upload-progress">
-        mode="determinate"
+      <mat-progress-bar mode="determinate" [value]="fileUploadItem.uploadingProgress$ | async">
-        [value]="fileUploadItem.uploadingProgress$ | async"
-      >
       </mat-progress-bar>
     </div>
   </div>

projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss

@@ -1,4 +1,48 @@
+@mixin ellipsis($row) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @if $row == 1 {
+    display: block;
+    white-space: nowrap;
+    word-wrap: normal;
+  } @else if $row >= 2 {
+    display: -webkit-box;
+    -webkit-line-clamp: $row;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
+  }
+}
+
 .ucap-file-upload-queue-container {
   width: 100%;
   height: 100%;
+  .file-upload-item {
+    background-color: #eeeeee;
+    min-width: 200px;
+    margin: 0 0.5%;
+    margin-bottom: 10px;
+    width: 32%;
+    border-radius: 3px;
+    .file-upload-info {
+      padding: 10px;
+      background-color:#ffffff;
+      border-bottom: 1px solid #dddddd;
+      svg {
+        margin-right: 6px;
+      }
+      .file-upload-name {
+        height: 40px;
+        @include ellipsis(2);
+      }
+    }
+    .file-upload-progress {
+      padding: 6px 10px;
+    }
+    &:nth-child(3n + 1) {
+      margin-left: 1%;
+    }
+    &:nth-child(3n + 0) {
+      margin-right: 1%;
+    }
+  }
 }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html

@@ -1,55 +1,45 @@
 <div class="ucap-binary-viewer-container">
-  <mat-toolbar color="accent" class="ucap-binary-viewer-header">
+  <mat-toolbar class="ucap-binary-viewer-header">
-    <mat-icon class="ucap-binary-viewer-icon">attachment</mat-icon>
+    <!--<mat-icon class="ucap-binary-viewer-icon">attachment</mat-icon>-->
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="ucap-binary-viewer-icon">
+      <path
+        d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">
+      </path>
+    </svg>
     <span class="ucap-binary-viewer-title">{{ fileInfo.fileName }}</span>
     <span class="ucap-binary-viewer-spacer"></span>
 
-    <button
+    <button mat-icon-button class="ucap-binary-viewer-action" matTooltip="다운로드" matTooltipPosition="below" aria-label=""
-      mat-icon-button
+      (click)="onClickDownload()">
-      class="ucap-binary-viewer-action"
+      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
-      matTooltip="다운로드"
+        stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
-      matTooltipPosition="below"
+        <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" />
-      aria-label=""
+      </svg>
-      (click)="onClickDownload()"
-    >
-      <mat-icon>get_app</mat-icon>
     </button>
-
+    <span class="stroke-bar"></span>
-    <button
+    <button mat-icon-button color="warn" class="ucap-binary-viewer-action" (click)="onClickClose()">
-      mat-raised-button
+      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
-      color="primary"
+        stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
-      class="ucap-binary-viewer-action"
+        <line x1="18" y1="6" x2="6" y2="18"></line>
-      (click)="onClickClose()"
+        <line x1="6" y1="6" x2="18" y2="18"></line>
-    >
+      </svg>
-      Close
     </button>
   </mat-toolbar>
-  <mat-progress-bar
+
-    *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
-    mode="determinate"
-    [value]="fileDownloadItem.downloadingProgress$ | async"
-  ></mat-progress-bar>
   <div class="ucap-binary-viewer-body">
-    <div
+    <div class="ucap-binary-viewer-content-wrapper" fxLayout="column" fxLayout.xs="row" fxFlexFill
-      class="ucap-binary-viewer-content-wrapper"
+      fxLayoutAlign="center center">
-      fxLayout="column"
+      <div class="circle-box">
-      fxLayout.xs="row"
+        <div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
-      fxFlexFill
+          <div class="ico"></div>
-      fxLayoutAlign="center center"
+        </div>
-    >
-      <div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
-        <div class="ico"></div>
       </div>
-      <div>
+      <div class="guide-msg">
         미리보기를 지원하지 않는 파일입니다.
       </div>
       <div>
-        <button
+        <button colori mat-raised-button aria-label="" (click)="onClickDownload()">
-          color="warn"
-          mat-raised-button
-          aria-label=""
-          (click)="onClickDownload()"
-        >
           Download
         </button>
       </div>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss

@@ -4,29 +4,61 @@
 
   .ucap-binary-viewer-header {
     width: 100%;
-    height: 50px;
+    height: 60px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
+    background-color: #333333;
+    color:#ffffff;
 
     .ucap-binary-viewer-icon {
+      margin-right: 10px;
     }
 
     .ucap-binary-viewer-title {
+      font-size: 16px;
     }
 
     .ucap-binary-viewer-spacer {
       flex: 1 1 auto;
     }
 
+    .stroke-bar {
+      width: 1px;
+      height: 30px;
+      background-color: rgba(256, 256, 256, 0.3);
+      margin: 0 10px;
+    }
     .ucap-binary-viewer-action {
+      margin-left: auto;
+      &:hover {
+        opacity: 0.7;
+      }
     }
   }
 
   .ucap-binary-viewer-body {
     position: relative;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 60px);
-    background-color: white;
 
-    .ucap-binary-viewer-content-wrapper {
+     .ucap-image-viewer-image-wrapper {
+      height: 100%;
+      padding: 20px;
+      background-color: rgba(0, 0, 0, 0.9);
+    }
+    .circle-box{
+      display:flex;
+      width:140px;
+      height:140px;
+      border-radius:50%;
+      justify-content: center;
+      align-items: center;
+      border:2px solid #ffffff;
+      background-color:rgba(256, 256, 256, 0.6);
+    }
+    .guide-msg{
+      font-size:16px;
+      margin:30px;
+      color:#ffffff;
     }
   }
 }