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

projects/ucap-webmessenger-app/src/app/app.theme.scss

@@ -104,9 +104,11 @@ body.theme-pink-dark {
 
 // Define the primary, accent and warn palettes
 $pink-light-theme-primary-palette: mat-palette($mat-grey,800);
-$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
+//$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
+$pink-light-theme-accent-palette: mat-palette($daesang);
 $pink-light-theme-warn-palette: mat-palette($mat-red);
 
+
 // Create the Material theme object
 $pink-light-theme: mat-light-theme(
   $pink-light-theme-primary-palette,

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

@@ -86,7 +86,6 @@
         stroke-linecap: square;
         stroke-linejoin: miter;
         fill: none;
-        color: #2329d6;
       }
     }
   }
@@ -94,7 +93,6 @@
     opacity: 1;
     .mat-tab-label-content {
       .icon-item {
-        background: #ef4c73;
         transform: scale(1);
         /*svg {
           stroke: #ef4c73;

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

@@ -50,7 +50,7 @@
   </div>
 </div>
 <div *ngIf="!isSearch" class="app-layout-chat-left-sidenav-chat-list">
-  <perfect-scrollbar fxFlex="1 1 auto">
+  <!-- <perfect-scrollbar fxFlex="1 1 auto">
     <ucap-room-list-item
       *ngFor="let room of roomList"
       [loginRes]="loginRes"
@@ -61,22 +61,19 @@
       (contextmenu)="onContextMenuChat($event, room)"
     >
     </ucap-room-list-item>
-  </perfect-scrollbar>
+  </perfect-scrollbar> -->
-  <!-- <cdk-virtual-scroll-viewport
+  <cdk-virtual-scroll-viewport itemSize="40" perfectScrollbar fxFlexFill>
-        itemSize="20"
+    <ucap-room-list-item
-        class="app-layout-chat-left-sidenav-chat-list-viewport"
+      *cdkVirtualFor="let room of roomList"
-      >
+      [loginRes]="loginRes"
-        <ucap-room-list-item
+      [roomInfo]="room"
-          *cdkVirtualFor="let room of getRoomList()"
+      [roomUserInfo]="getRoomUserList(room)"
-          [loginRes]="loginRes"
+      [sessionVerinfo]="sessionVerinfo"
-          [roomInfo]="room"
+      (click)="onClickContextMenu('SELECT_ROOM', room)"
-          [roomUserInfo]="getRoomUserList(room)"
+      (contextmenu)="onContextMenuChat($event, room)"
-          [sessionVerinfo]="sessionVerinfo"
+    >
-          (click)="onSelectedRoom(room)"
+    </ucap-room-list-item>
-          (contextmenu)="onContextMenuChat($event, room)"
+  </cdk-virtual-scroll-viewport>
-        >
-        </ucap-room-list-item>
-      </cdk-virtual-scroll-viewport> -->
 </div>
 <div *ngIf="!!isSearch" class="app-layout-chat-left-sidenav-chat-list search">
   <perfect-scrollbar fxFlex="1 1 auto">

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

@@ -1,5 +1,5 @@
-<div>
+<div class="rightDrawer-title">
-  <span>{{ selectedRightDrawer }}</span>
+  <h3>{{ selectedRightDrawer }}</h3>
   <span>
     <button
       mat-button

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

@@ -0,0 +1,12 @@
+.rightDrawer-title{
+  height: 60px;
+  border-bottom: 1px solid #dddddd;
+  font-size: 16px;
+  align-items: center;
+  display: flex;
+  padding: 0 20px;
+  font-weight: 600;
+  span{
+    margin-left:auto;
+  }
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html

@@ -1,27 +1,29 @@
-<div fxLayout="column" style="width: 600px;" class="album-box">
+<div fxLayout="column"  class="album-box">
   <div>
     <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
       <mat-tab label="Image"></mat-tab>
       <mat-tab label="Video"></mat-tab>
     </mat-tab-group>
   </div>
-  <div fxFlex="0 0 400px">
+  <div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
     <ng-container *ngIf="!selectedFile">
       Select File.
     </ng-container>
     <ng-container *ngIf="selectedFile">
-      <img
+      <div class="select-file">
-        *ngIf="selectedFile.info.type === FileType.Image"
+        <img
-        [src]="getImageUrl(selectedFile)"
+          *ngIf="selectedFile.info.type === FileType.Image"
-        class="preview-image"
+          [src]="getImageUrl(selectedFile)"
-      />
+          class="preview-image"
-      <video
+        />
-        controls
+        <video
-        *ngIf="selectedFile.info.type === FileType.Video"
+          controls
-        class="preview-image"
+          *ngIf="selectedFile.info.type === FileType.Video"
-      >
+          class="preview-video"
-        <source [src]="getImageUrl(selectedFile)" />
+        >
-      </video>
+          <source [src]="getImageUrl(selectedFile)" />
+        </video>
+      </div>
       <ul>
         <li>name : {{ selectedFile.info.name }}</li>
         <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
@@ -66,7 +68,7 @@
           </ng-template>
         </dt>
         <dd>
-          <span>
+          <span class="checkbox">
             <mat-checkbox
               #checkbox
               [checked]="getCheckItem(fileInfo)"
@@ -75,7 +77,7 @@
             >
             </mat-checkbox>
           </span>
-          <span>
+          <span class="btn-download">
             <button mat-button (click)="onClickDownload(fileInfo)">
               <mat-icon>vertical_align_bottom</mat-icon>
             </button>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss

@@ -7,10 +7,69 @@
   }
 }
 
-.img-item {
+::ng-deep .mat-tab-label{
-  cursor: pointer;
+  width:50%;
-  max-width: 150px;
+}
-  min-width: 150px;
+
+.select-filebox{
+  display:flex;
+  flex-flow: column;
+  margin:10px;
+  padding:10px;
+  border:1px solid #cccccc;
+  .select-flie{
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    color: #212121;
+    align-items: center;
+    border-bottom: 1px dotted #dddddd;
+    text-align:center;
+    ul{
+      padding:0;
+      margin-top:10px;
+      .name{
+        font-weight:600;
+      }
+    }
+  }
+}
+
+.search-list{
+  display:flex;
+  padding:0 10px;
+  height: calc(100% - 450px);
+  overflow-y: auto;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .img-item {
+    cursor: pointer;
+    margin-bottom:10px;
+    position: relative;
+    dl{
+      dt{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 120px;
+        height: 120px;
+        background-color: #efefef;
+        border: 1px dotted #cccccc;
+        img{
+          width:100%;
+          height:100%;
+        }
+      }
+      dd{
+        .btn-download{
+        margin-left:auto;
+        }
+      }
+    }
+    & :nth-child(3n+0){
+      margin-right:0;
+    }
+  }
 }
 
 .preview-image {
@@ -18,6 +77,11 @@
 }
 
 .btn-box {
+  position:absolute;
+  bottom:0;
+  height:50px;
+  margin-bottom:10px;
+  width:100%;
   button {
     margin: 5px;
   }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html

@@ -1,35 +1,40 @@
-<div fxLayout="column">
+<div fxLayout="column" class="rightDrawer-filebox">
-  <div>
+  <div class="rightDrawer-tab">
     <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
       <mat-tab label="Receive"></mat-tab>
       <mat-tab label="Send"></mat-tab>
     </mat-tab-group>
   </div>
-  <div fxFlex="1 1 300px">
+  <div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest">
-    <ng-container *ngIf="!selectedFile">
+    <ng-container *ngIf="!selectedFile"  >
       Select File.
     </ng-container>
     <ng-container *ngIf="selectedFile">
-      <div
+      <div class="select-flie">
-        [ngClass]="[
+        <div
-          'mime-icon',
+          [ngClass]="[
-          'light',
+            'mime-icon',
-          'ico-' + getExtention(selectedFile.info.name)
+            'light',
-        ]"
+            'ico-' + getExtention(selectedFile.info.name)
-      >
+          ]"
-        <div class="ico"></div>
+        >
+          <div class="ico"></div>
+        </div>
+        <ul>
+          <li class="name">name : {{ selectedFile.info.name }}</li>
+          <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
+          <li>
+            date :
+            {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+          </li>
+        </ul>
+      </div>
+      <div>
+        아이콘
       </div>
-      <ul>
-        <li>name : {{ selectedFile.info.name }}</li>
-        <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
-        <li>
-          date :
-          {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
-        </li>
-      </ul>
     </ng-container>
   </div>
-  <div fxFlex="1 1 auto">
+  <div fxFlex="0 0 auto" class="table-box">
     <table mat-table [dataSource]="dataSource" matSort>
       <ng-container matColumnDef="check">
         <th mat-header-cell *matHeaderCellDef>
@@ -55,19 +60,21 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="infos">
           Name
         </th>
-        <td mat-cell *matCellDef="let element">
+        <td mat-cell *matCellDef="let element" class="file-info">
-          <div>
+          <div class="file-name">
             {{ element.info.name }}
           </div>
-          <div>
+          <div class="download-period text-accent-color">
-            {{ element.info.size | ucapBytes }}
+            <!--{{ element.info.size | ucapBytes }}-->
+            {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~ 2020.01.23
           </div>
         </td>
       </ng-container>
       <ng-container matColumnDef="sendDate" class="date">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th>
         <td mat-cell *matCellDef="let element">
-          {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+          <!--{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}-->
+          {{ element.info.size | ucapBytes }}
         </td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -77,28 +84,30 @@
         (click)="onClickRow(row)"
       ></tr>
     </table>
-
+  </div>
+  <div class="footer-fix">
     <mat-paginator
       [pageSize]="10"
       [pageSizeOptions]="[5, 10, 20]"
       showFirstLastButtons
     ></mat-paginator>
-  </div>
+
-  <div
+    <div
-    fxFlex="1 1 50px"
+      fxFlex="1 1 50px"
-    fxLayout="row"
+      fxLayout="row"
-    fxLayoutAlign="center center"
+      fxLayoutAlign="center center"
-    class="btn-box"
+      class="btn-box"
-  >
-    <button
-      mat-flat-button
-      [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
-      class="mat-primary"
     >
-      Download All
+      <button
-    </button>
+        mat-flat-button
-    <button mat-flat-button class="mat-primary">
+        [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
-      Open Folder
+        class="mat-primary"
-    </button>
+      >
-  </div>
+        Download All
+      </button>
+      <button mat-flat-button class="mat-primary">
+        Open Folder
+      </button>
+    </div>
+    </div>
 </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss

@@ -1,5 +1,87 @@
-table {
+@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;
+  }
+}
+
+.rightDrawer-filebox {
   width: 100%;
+  height: calc(100% - 60px);
+  .rightDrawer-tab {
+    .mat-tab-label {
+      width: 50%;
+    }
+  }
+}
+
+::ng-deep .mat-tab-label {
+  width: 50%;
+}
+
+.select-filebox {
+  display: flex;
+  flex-flow: column;
+  margin: 10px;
+  padding: 10px;
+  border: 1px solid #cccccc;
+  .select-flie {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    color: #212121;
+    align-items: center;
+    border-bottom: 1px dotted #dddddd;
+    ul {
+      padding: 0;
+      .name {
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.mat-table {
+  width: 100%;
+  position: relative;
+  th.infos {
+    padding: 10px;
+  }
+  tr.mat-row {
+    height: 70px;
+    .file-info {
+      padding: 16px;
+      display: grid;
+      height: 70px;
+      .file-name {
+        font-weight: 600;
+        margin-bottom: 2px;
+        width: 100%;
+        @include ellipsis(1);
+      }
+      .download-period {
+        font-size: 12px;
+        width: 100%;
+        @include ellipsis(1);
+      }
+    }
+  }
+}
+.table-box{
+  height: calc(100% - 450px);
+  overflow-y: auto;
+}
+.mat-paginator-container {
+  display: flex;
+  flex-flow: column;
 }
 
 .mat-row:hover {
@@ -7,8 +89,42 @@ table {
   cursor: pointer;
 }
 
-.btn-box {
+.footer-fix{
-  button {
+  position: absolute;
-    margin: 5px;
+  bottom: 0;
+  height:160px;
+  flex-direction: column;
+  box-sizing: border-box;
+  display: flex;
+  .btn-box {
+    height: 50px;
+    padding-bottom: 10px;
+    width: 100%;
+    background-color: #ffffff;
+    button {
+      margin: 5px;
+    }
+  }
+}
+
+::ng-deep .mat-paginator {
+  .mat-paginator-container {
+    justify-content: center;
+  }
+  .mat-paginator-navigation-first {
+    order: 1;
+  }
+  .mat-paginator-navigation-previous {
+    order: 2;
+  }
+  // override material paginator page switch
+  .mat-paginator-range-label {
+    order: 3;
+  }
+  .mat-paginator-navigation-next {
+    order: 4;
+  }
+  .mat-paginator-navigation-last {
+    order: 5;
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss

@@ -1,5 +1,5 @@
 .list {
-  width: 300px;
+  width: 100%;
   height: 100%;
   overflow: hidden;
 

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

@@ -60,6 +60,8 @@ $lg-red: (
   A200: #ff4081,
   A400: #ff3399,
   A700: #c51162,
+  G100: #ef4c73,
+  G900: #352a37,
   contrast: (
     50: $dark-primary-text,
     100: $dark-primary-text,
@@ -74,7 +76,9 @@ $lg-red: (
     A100: $dark-primary-text,
     A200: $light-primary-text,
     A400: $light-primary-text,
-    A700: $light-primary-text
+    A700: $light-primary-text,
+    G100:$dark-primary-text,
+    G900:$light-primary-text
   )
 );
 
@@ -87,12 +91,14 @@ $daesang: (
   500: #00bcd4,
   /*600: #00acc1,*/ 600: #00b6d5,
   700: #0097a7,
-  800: #00838f,
+  800: #2c8493,
-  900: #006064,
+  900: #126a79,
   A100: #84ffff,
   A200: #18ffff,
   A400: #00e5ff,
   A700: #00b8d4,
+  G100: #6dd5ed,
+  /*G900: #192a2c,*/G900: #2193b0,
   contrast: (
     50: $dark-primary-text,
     100: $dark-primary-text,
@@ -108,6 +114,8 @@ $daesang: (
     A200: $dark-primary-text,
     A400: $dark-primary-text,
     A700: $dark-primary-text,
+    G100: $dark-primary-text,
+    G900: $light-primary-text
   )
 );
 
@@ -122,6 +130,9 @@ $daesang: (
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
+  $gradient-darkest:mat-color($accent, G900);
+  $gradient-light:mat-color($accent, G100);
+
   .bg-primary-dark{
     background: mat-color($primary, 900);
     color: mat-color($primary, default-contrast);
@@ -179,6 +190,15 @@ $daesang: (
   /*.mat-form-field-appearance-legacy .mat-hint{
      color: mat-color($accent, 800);
    }*/
+  .global-menu {
+    .mat-tab-label[aria-selected='true']{
+     .mat-tab-label-content{
+      .icon-item{
+        background: mat-color($accent, 300);
+         }
+       }
+     }
+  }
 
   .mat-form-field-appearance-legacy {
     .mat-form-field-label {
@@ -205,4 +225,15 @@ $daesang: (
     background: mat-color($accent, 600);
     color: mat-color($primary, default-contrast);
   }
+  .current-head {
+    display: flex;
+    justify-content: center;
+    padding: 0 10px;
+    height: 70px;
+    background-color: #eeeeee;
+    background: $gradient-light;
+    background: -webkit-linear-gradient(to right, $gradient-darkest, $gradient-light);
+    background: linear-gradient(to right, $gradient-darkest, $gradient-light);
+    color:#ffffff;
+  }
 }

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

@@ -51,7 +51,7 @@
     </mat-form-field>
 
     <button
-      class="send-message-button bg-accent-color"
+      class="send-message-button bg-accent-darkest"
       mat-icon-button
       type="submit"
       aria-label="Send message"

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

@@ -52,7 +52,9 @@
 }
 
 .path {
+  display: flex;
   padding: 6px 4px;
+  align-items: center;
   .btn-toggle {
     padding: 0;
     min-width: 0;
@@ -64,6 +66,7 @@
   }
   .group-menu {
     margin-left: auto;
+    opacity: 0.6;
   }
   + ul {
     li:last-chlid {

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

@@ -17,7 +17,7 @@
         <div class="room-name">
           <div class="name">{{ getRoomName(roomInfo) }}</div>
           <div
-            class="num text-accent-color"
+            class="num bg-accent-light"
             *ngIf="roomInfo.roomType === RoomType.Multi"
           >
             {{ roomInfo.joinUserCount }}명