right-drawer 수정중(임시)

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,15 +1,16 @@
-<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">
+      <div class="select-file">
         <img
           *ngIf="selectedFile.info.type === FileType.Image"
           [src]="getImageUrl(selectedFile)"
@@ -18,10 +19,11 @@
         <video
           controls
           *ngIf="selectedFile.info.type === FileType.Video"
-        class="preview-image"
+          class="preview-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 @@
   }
 }
 
+::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;
+    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;
-  max-width: 150px;
+    margin-bottom:10px;
-  min-width: 150px;
+    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,15 +1,16 @@
-<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"  >
       Select File.
     </ng-container>
     <ng-container *ngIf="selectedFile">
+      <div class="select-flie">
         <div
           [ngClass]="[
             'mime-icon',
@@ -20,16 +21,20 @@
           <div class="ico"></div>
         </div>
         <ul>
-        <li>name : {{ selectedFile.info.name }}</li>
+          <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>
     </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,13 +84,14 @@
         (click)="onClickRow(row)"
       ></tr>
     </table>
-
+  </div>
+  <div class="footer-fix">
     <mat-paginator
       [pageSize]="10"
       [pageSizeOptions]="[5, 10, 20]"
       showFirstLastButtons
     ></mat-paginator>
-  </div>
+
     <div
       fxFlex="1 1 50px"
       fxLayout="row"
@@ -102,3 +110,4 @@
       </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;
 }
 
+.footer-fix{
+  position: absolute;
+  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;