Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html

@@ -27,7 +27,14 @@
     [hasBackdrop]="false"
   >
     <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
-      <mat-icon>group_add</mat-icon>
+      <!--<mat-icon>group_add</mat-icon>-->
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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="20" y1="8" x2="20" y2="14"></line>
+        <line x1="23" y1="11" x2="17" y2="11"></line>
+      </svg>
       <span>새 그룹 추가</span>
     </button>
     <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss

@@ -37,3 +37,10 @@
   height: 100%;
   overflow: unset;
 }
+.mat-menu-item{
+  display:flex;
+  align-items: center;
+  svg{
+    margin-right:10px;
+  }
+}

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

@@ -56,7 +56,7 @@
           *ngIf="roomInfo && roomInfo.isTimeRoom"
           class="room-type text-accent-color "
         >
-          <span class="bg-accent-light"
+          <span class="bg-accent-dark"
             >{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span
           >비밀 대화방입니다.
         </div>

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

@@ -25,7 +25,7 @@
 .chat-toolbar {
   width: 100%;
   height: 80px;
-  min-height: 70px;
+  min-height: 80px;
   align-items: center;
   background-color: #ffffff !important;
   border-bottom: 1px solid #dddddd;
@@ -68,7 +68,7 @@
         height: 20px;
         span {
           border-radius: 10px;
-          padding: 1px 10px;
+          padding: 2px 10px;
           margin-right: 6px;
           font-size: 13px;
         }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss

@@ -76,3 +76,6 @@
      }
   }
 }
+.mat-tab-group>.mat-tab-header .mat-tab-label{
+  border-bottom:2px solid #dddddd;
+}

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

@@ -20,6 +20,8 @@
     flex-direction: column;
     text-align: left;
     line-height: 1.6em;
+    width:100%;
+    margin-top:10px;
     .file-name {
       font-size: 14px;
       font-weight: bold;
@@ -59,5 +61,14 @@
         display: block;
       }
     }
+    &.expired{
+    li{
+      width:100%;
+      white-space: nowrap;
+      color:#999999;
+      align-items: center;
+      line-height:40px;
+      }
+    }
   }
 }

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss

@@ -51,12 +51,13 @@
     }
   }
 }
+
 .box-more-spacer {
   margin-right: 0;
 }
 
 ::ng-deep .mat-content{
-  overflow: unset;
+  overflow: unset !important;
 }
 
 .number{

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

@@ -1,5 +1,5 @@
 <div class="ucap-image-viewer-container">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="bg-primary-dark">
     <span>Third Line</span>
     <span class="ucap-image-viewer-spacer"></span>
     <mat-icon

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

@@ -1,6 +1,17 @@
 <div class="ucap-video-viewer-container">
   <mat-toolbar color="accent" class="ucap-video-viewer-header">
-    <mat-icon class="ucap-video-viewer-icon">video_label</mat-icon>
+    <!--<mat-icon class="ucap-video-viewer-icon">video_label</mat-icon>-->
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      stroke-width="2" stroke-linecap="butt" stroke-linejoin="round"  class="ucap-video-viewer-icon">
+      <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
+      <line x1="7" y1="2" x2="7" y2="22"></line>
+      <line x1="17" y1="2" x2="17" y2="22"></line>
+      <line x1="2" y1="12" x2="22" y2="12"></line>
+      <line x1="2" y1="7" x2="7" y2="7"></line>
+      <line x1="2" y1="17" x2="7" y2="17"></line>
+      <line x1="17" y1="17" x2="22" y2="17"></line>
+      <line x1="17" y1="7" x2="22" y2="7"></line>
+    </svg>
     <span class="ucap-video-viewer-title">{{ fileInfo.fileName }}</span>
     <span class="ucap-video-viewer-spacer"></span>
     <button
@@ -11,16 +22,25 @@
       aria-label=""
       (click)="onClickDownload()"
     >
-      <mat-icon>get_app</mat-icon>
+      <!--<mat-icon>get_app</mat-icon>-->
+      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        <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" />
+      </svg>
     </button>
-
+    <span class="stroke-bar"></span>
     <button
-      mat-raised-button
+      mat-icon-button
-      color="primary"
+      color="warn"
-      class="ucap-video-viewer-action"
+      class="ucap-image-viewer-action btn-close"
+       matTooltip="뷰어닫기"
       (click)="onClickClose()"
     >
-      Close
+      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
     </button>
   </mat-toolbar>
   <div class="ucap-video-viewer-body">
@@ -41,6 +61,7 @@
         (loadeddata)="onLoadedDataVideo()"
       ></video>
     </div>
+    <div class="viewer-bottom">
       <div
         class="ucap-video-viewer-video-time"
         fxLayout="row"
@@ -60,7 +81,6 @@
         class="ucap-video-viewer-video-controls"
         fxLayout="row"
         fxLayout.xs="column"
-      fxLayoutAlign="center center"
       >
         <div class="ucap-video-viewer-video-time-current">
           {{ currentTime | ucapSecondsToMinutes }}
@@ -74,6 +94,14 @@
           (click)="onClickPlayOrPause()"
         >
           <mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
+          <!--{{ playing ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+              <rect x="6" y="4" width="4" height="16"></rect>
+              <rect x="14" y="4" width="4" height="16"></rect>
+            </svg>' : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+            <polygon points="5 3 19 12 5 21 5 3"></polygon>
+          </svg>'}}-->
         </button>
         <span class="ucap-video-viewer-spacer"></span>
         <div class="ucap-video-viewer-video-time-total">
@@ -82,3 +110,4 @@
       </div>
     </div>
   </div>
+</div>

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

@@ -4,33 +4,49 @@
 
   .ucap-video-viewer-header {
     width: 100%;
-    height: 50px;
+    height: 60px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
+    background-color: #333333;
 
     .ucap-video-viewer-icon {
+      margin-right: 10px;
     }
 
     .ucap-video-viewer-title {
+      font-size:16px;
+    }
+    .stroke-bar {
+      width: 1px;
+      height: 30px;
+      background-color: rgba(256, 256, 256, 0.3);
+      margin: 0 10px;
+    }
+    .ucap-image-viewer-action {
+      &:hover {
+        opacity: 0.7;
+      }
     }
   }
 
   .ucap-video-viewer-body {
     position: relative;
-    background-color: white;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 60px);
-    padding-bottom: 70px;
 
     .ucap-video-viewer-video-icon {
       width: 100%;
-      height: calc(100% - 60px);
+       height: calc(100% - 80px);
     }
+    .viewer-bottom{
+      background-color: #212121;
+      color:#ffffff;
       .ucap-video-viewer-video-time {
         width: 100%;
         height: 30px;
       }
       .ucap-video-viewer-video-controls {
         width: 100%;
-      height: 30px;
+        height: 50px;
 
         .ucap-video-viewer-video-time-current {
           padding-left: 30px;
@@ -41,13 +57,27 @@
         }
       }
     }
+  }
   .ucap-video-viewer-spacer {
     flex: 1 1 auto;
   }
   .ucap-video-viewer-action {
+    .mat-icon{
+      font-size: 40px;
+      width: 100%;
+      height: 100%;
+      line-height:40px;
+    }
   }
 }
 
 mat-slider {
-  width: 95%;
+  width: 94%;
+}
+
+::ng-deep .mat-slider-horizontal .mat-slider-track-background{
+  background-color: #999999 !important;
+}
+::ng-deep .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{
+  border-color: #999999 !important;
 }