Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucap-webmessenger",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "author": {
     "name": "LG CNS",
     "email": "lgucap@lgcns.com"

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -4,13 +4,12 @@
   </div>
   <div class="app-layout-native-title-bar-title">DS Talk</div>
   <div class="btn-area">
+    <ucap-integrated-search-form (search)="onIntegratedSearch($event)" class="input-lineless integrated-search">
+    </ucap-integrated-search-form>
     <div
       *ngIf="!!loginRes && !!weblink"
       class="app-layout-native-title-bar-link"
     >
-      <ucap-integrated-search-form (search)="onIntegratedSearch($event)">
-      </ucap-integrated-search-form>
-
       <ng-container *ngFor="let link of weblink" [ngSwitch]="link.key">
         <button
           mat-icon-button
@@ -147,11 +146,8 @@
           ></path>
         </svg>
       </button>
-      <span
-        *ngIf="(!!weblink && weblink.length > 0) || (updateInfo$ | async)"
-        class="stroke-bar"
-      ></span>
     </div>
+    <span *ngIf="(!!weblink && weblink.length > 0) || (updateInfo$ | async)" class="stroke-bar"></span>
     <ucap-profile-my-profile-widget
       [profileImageRoot]="sessionVerinfo.profileRoot"
       [profileImageFile]="getMyProfileImageWidget()"

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -25,42 +25,43 @@
     }
     .btn-area {
       display: flex;
+      flex-wrap: wrap;
       margin-left: auto;
       flex-flow: row;
       justify-items: center;
-      width: calc(100% - 100px);
+      max-width: calc(100% - 100px);
       overflow: hidden;
       white-space: nowrap;
       position: relative;
       margin-left: auto;
       justify-content: flex-end;
       height: 100%;
+      align-items: center;
+
+      .integrated-search {
+        height: 100%;
+        display: inline-flex;
+        align-items: center;
+      }
 
       .app-layout-native-title-bar-link {
+        -webkit-box-align: center;
         align-items: center;
         position: relative;
-        display: flex;
-        justify-content: flex-end;
-        width: calc(100% - 100px);
+        display: inline-block;
+        min-width: 0;
+        width: auto;
         overflow: hidden;
         white-space: nowrap;
-        transform: translateY(2px);
-        .stroke-bar {
-          width: 1px;
-          height: 20px;
-          background-color: rgba(256, 256, 256, 0.3);
-          margin: 0 10px 0 20px;
-          display: inline-flex;
-        }
         .button {
           -webkit-app-region: no-drag;
           outline: 0;
           cursor: pointer;
           border: none;
-          height: 30px;
-          min-width: 30px;
-          max-width: 30px;
-          padding: 3px;
+          width: 28px;
+          height: 28px;
+          min-width: 28px;
+          max-width: 28px;
           line-height: 10px;
           background-color: #ffffff;
           border-radius: 50%;
@@ -68,7 +69,8 @@
           text-align: center;
           font-size: 10px;
           vertical-align: middle;
-          margin-left: 16px;
+          margin-left: 10px;
+          transform: translateY(-2px);
           .weblink {
             display: inline-flex;
             line-height: 24px;
@@ -115,7 +117,13 @@
           }
         }
       }
-
+      .stroke-bar {
+        width: 10px;
+        height: 20px;
+        border-right: 1px solid rgba(255, 255, 255, 0.3);
+        margin: 0 10px 0 10px;
+        display: inline-block;
+      }
       .myprofile-item {
         -webkit-app-region: no-drag;
         align-items: center;

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -38,8 +38,8 @@
       >
         <span
           class="mdi"
-          [class.mdi-greater-than]="!showLeftDrawer"
-          [class.mdi-less-than]="showLeftDrawer"
+          [class.mdi-chevron-right]="!showLeftDrawer"
+          [class.mdi-chevron-left]="showLeftDrawer"
         ></span>
       </button>
     </div>

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -61,7 +61,5 @@
   display: flex;
   justify-content: center;
   justify-items: center;
-  .mat-icon {
-    font-size: 18px;
-  }
+  font-size: 1.8em;
 }

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

@@ -15,7 +15,6 @@ $tablet-s-width: 768px;
 .message-row {
   width: 100%;
   height: 100%;
-  margin-bottom: 20px;
   .date-splitter {
     display: block;
     width: 100%;
@@ -26,6 +25,7 @@ $tablet-s-width: 768px;
     display: flex;
     flex-direction: row;
     margin-left: 0;
+    padding-bottom: 20px;
     .profile-img {
       flex: 0 0 auto;
       &.thumbnail-mask {

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

@@ -4,7 +4,8 @@
   perfectScrollbar
   fxFlexFill
   #psChatContent
-  [bufferAmount]="10"
+  [bufferAmount]="5"
+  [compareItems]=""
   (psScrollUp)="onScrollup($event)"
   (psYReachStart)="onYReachStart($event)"
   (psYReachEnd)="onYReachEnd($event)"

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -412,12 +412,12 @@ export class MessagesComponent implements OnInit, OnDestroy {
   }
 
   preSwapScroll(useHide: boolean, useSwap: boolean) {
-    if (useSwap && !this.swapped) {
-      this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
-      this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
-      this.chatMessagesBuffer.nativeElement.classList.remove('disappear');
-      this.swapped = true;
-    }
+    // if (useSwap && !this.swapped) {
+    //   this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
+    //   this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
+    //   this.chatMessagesBuffer.nativeElement.classList.remove('disappear');
+    //   this.swapped = true;
+    // }
 
     if (useHide && !this.hidden) {
       this.chatMessagesContainer.nativeElement.classList.add('hide');
@@ -426,12 +426,12 @@ export class MessagesComponent implements OnInit, OnDestroy {
   }
 
   postSwapScroll(useHide: boolean, useSwap: boolean) {
-    if (useSwap && this.swapped) {
-      this.chatMessagesBuffer.nativeElement.innerHTML = '';
-      this.chatMessagesBuffer.nativeElement.scrollTop = 0;
-      this.chatMessagesBuffer.nativeElement.classList.add('disappear');
-      this.swapped = false;
-    }
+    // if (useSwap && this.swapped) {
+    //   this.chatMessagesBuffer.nativeElement.innerHTML = '';
+    //   this.chatMessagesBuffer.nativeElement.scrollTop = 0;
+    //   this.chatMessagesBuffer.nativeElement.classList.add('disappear');
+    //   this.swapped = false;
+    // }
 
     if (useHide && this.hidden) {
       this.chatMessagesContainer.nativeElement.classList.remove('hide');
@@ -536,7 +536,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
     if (this.scrollUpInitalized && this.eventRemained) {
       this.storeScrollPosition();
 
-      this.preSwapScroll(true, true);
+      this.preSwapScroll(false, false);
 
       this.moreEvent.emit(this.eventList[0].seq);
 
@@ -607,4 +607,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
   trackByEvent(index: number, info: Info<EventJson>): number {
     return info.seq;
   }
+
+  compareItemsFunc = (
+    item1: Info<EventJson>,
+    item2: Info<EventJson>
+    // tslint:disable-next-line: semicolon
+  ): boolean => item1.seq === item2.seq;
 }

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

@@ -1,7 +1,9 @@
 <div fxFlex fxLayout="row" class="chatroom-search">
-  <div fxLayout="row" fxLayoutAlign="start center" class="input search-form">
+  <div fxLayout="row" fxLayoutAlign="start center" class="input input-lineless search-form">
     <form [formGroup]="fgSearch">
-      <i class="material-icons icon-search"> </i>
+      <span class="icon-img">
+        <i class="mid mdi-magnify"></i>
+      </span>
       <mat-form-field floatLabel="never">
         <input
           matInput
@@ -12,14 +14,6 @@
           formControlName="searchInput"
           (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
         />
-        <!-- <button
-          mat-button
-          matSuffix
-          mat-icon-button
-          aria-label="Clear"
-          (click)="inputSearch.value = ''; onClickSearchCancel()"
-        >
-        -->
         <button
           mat-button
           matSuffix
@@ -42,22 +36,7 @@
       (click)="onClickSearchAndPrev()"
       class="btn-toggle"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="feather feather-arrow-up"
-      >
-        <path d="M3.3,9v6.7c0,0.9,0.7,1.7,1.7,1.7h10c0.9,0,1.7-0.7,1.7-1.7V9" />
-        <polyline class="st0" points="13.3,6 10,2.7 6.7,6 " />
-        <line class="st0" x1="10" y1="2.7" x2="10" y2="12.5" />
-      </svg>
+      <i class="mid mdi-arrow-up"></i>
     </button>
     <button class="icon-button btn-search" (click)="onClickPrevSearch()">
       <i class="mid mdi-arrow-up"></i>

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

@@ -1,5 +1,6 @@
 $tablet-l-width: 1024px;
 $tablet-s-width: 768px;
+$search-item-color: #ffffff;
 
 .chatroom-search {
   display: flex;
@@ -18,14 +19,17 @@ $tablet-s-width: 768px;
     }
     form {
       display: inline-flex;
-      flex: 0 0 auto;
-      width: 100%;
+      .icon-img {
+        color: $search-item-color;
+      }
+      @media screen and (max-width: #{$tablet-s-width}),
+      (max-height: 600px) {
+        .icon-img {
+          display: none;
+        }
+      }
       .mat-form-field {
-        flex-flow: row;
-        flex: 1 1 auto;
         width: 70%;
-        align-items: center;
-        display: flex;
         .mat-form-field-label,
         .mat-hint {
           color: rgba(0, 0, 0, 0.54);
@@ -46,61 +50,6 @@ $tablet-s-width: 768px;
   }
 }
 
-::ng-deep .search-form {
-  form {
-    .icon-search {
-      height: 100%;
-      display: flex;
-      align-self: center;
-      color: #ffffff;
-      margin-right: 10px;
-    }
-    @media screen and (max-width: #{$tablet-s-width}),
-    (max-height: 600px) {
-      .icon-search {
-        display: none;
-      }
-    }
-    .mat-form-field-appearance-legacy {
-      .mat-form-field-wrapper {
-        color: #ffffff;
-        width: 100%;
-        padding-bottom: 0.8em;
-        .mat-form-field-infix {
-          .mat-input-element {
-            font-size: 1em;
-          }
-        }
-        .mat-form-field-suffix {
-          button {
-            position: relative;
-            transform: translateY(2px);
-            .mat-button-wrapper {
-              width: 100%;
-              height: 100%;
-              display: flex;
-              justify-content: center;
-              font-size: 1.2em;
-            }
-          }
-        }
-        .mat-form-field-label {
-          color: rgba(255, 255, 255, 0.7) !important;
-          font-size: 1em;
-        }
-        .mat-form-field-underline {
-          height: 0;
-          .mat-form-field-ripple {
-            top: 6px;
-            height: 1px;
-            overflow: hidden;
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
 ::ng-deep .chat-search {
   margin: 0 4px 4px;
   padding: 6px;
@@ -111,40 +60,12 @@ $tablet-s-width: 768px;
     .search-form {
       form {
         display: flex;
-        i {
+        icon-img {
           display: none;
         }
       }
     }
   }
-
-  .search-form {
-    form {
-      display: flex;
-      .mat-form-field {
-        .mat-form-field-wrapper {
-          padding: 0;
-          display: flex;
-          flex: 1 1 auto;
-          .mat-form-field-infix {
-            border: 0;
-            padding: 0;
-            width: auto;
-            input {
-              margin: 0;
-            }
-            .mat-form-field-label-wrapper {
-              top: 0;
-              .mat-form-field-label {
-                top: 0;
-                font-size: 0.9em;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
 }
 
 ::ng-deep .chatroom-search {
@@ -161,22 +82,18 @@ $tablet-s-width: 768px;
         align-self: center;
         width: 30px;
         height: 30px;
-        color: #ffffff;
+        color: $search-item-color;
       }
     }
   }
   .btn-close-searchbox {
     width: 36px;
     height: 100%;
-    //background: #0367a6;
-    stroke: #ffffff;
+    stroke: $search-item-color;
     border: none;
     display: flex;
     justify-content: center;
     justify-items: center;
-    svg {
-      stroke: #ffffff;
-    }
   }
 }
 

projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss

@@ -13,3 +13,89 @@ textarea {
   -webkit-appearance: none;
   outline: none;
 }
+
+.input-lineless {
+  form {
+    display: flex;
+    flex: 0 0 auto;
+    width: 100%;
+    .mat-form-field-appearance-legacy {
+      .mat-form-field-wrapper {
+        color: #ffffff;
+        width: 100%;
+        .mat-form-field-infix {
+          .mat-input-element {
+            font-size: 1em;
+          }
+        }
+        .mat-form-field-suffix {
+          button {
+            position: relative;
+            transform: translateY(2px);
+            .mat-button-wrapper {
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              font-size: 1.2em;
+            }
+          }
+        }
+        .mat-form-field-label {
+          color: rgba(255, 255, 255, 0.7) !important;
+          font-size: 1em;
+        }
+        .mat-form-field-underline {
+          height: 0;
+          .mat-form-field-ripple {
+            top: 6px;
+            height: 1px;
+            overflow: hidden;
+            display: none;
+          }
+        }
+      }
+    }
+
+    .icon-img {
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      display: flex;
+      align-self: center;
+      margin-right: 10px;
+    }
+  }
+
+  .mat-form-field {
+    flex-flow: row;
+    flex: 1 1 auto;
+    width: 90%;
+    align-items: center;
+    display: flex;
+    .mat-form-field-wrapper {
+      padding: 0;
+      display: flex;
+      flex: 1 1 auto;
+      .mat-form-field-infix {
+        border: 0;
+        padding: 0;
+        width: auto;
+        input {
+          margin: 0;
+        }
+        .mat-form-field-label-wrapper {
+          top: 0;
+          .mat-form-field-label {
+            top: 0;
+            color: rgba(255, 255, 255, 0.7) !important;
+            font-size: 0.9em;
+          }
+        }
+      }
+      .mat-form-field-underline {
+        display: none;
+      }
+    }
+  }
+}

projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss

@@ -25,7 +25,8 @@ mat-icon {
   }
 }
 
-.icon-button {
+.icon-button,
+.icon-img {
   display: flex;
   justify-content: center;
   justify-items: center;

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

@@ -26,6 +26,7 @@
       matTooltip="{{ 'common.messages.zoomReset' | translate }}"
       matTooltipPosition="below"
       aria-label=""
+      (click)="onClickZoomReset()"
     >
       <!--<mat-icon>settings_overscan</mat-icon>-->
 
@@ -51,6 +52,7 @@
       matTooltip="{{ 'common.messages.zoomOut' | translate }}"
       matTooltipPosition="below"
       aria-label=""
+      (click)="onClickZoomOut()"
     >
       <!--<mat-icon>zoom_out</mat-icon>-->
       <svg
@@ -75,6 +77,7 @@
       matTooltip="{{ 'common.messages.zoomIn' | translate }}"
       matTooltipPosition="below"
       aria-label=""
+      (click)="onClickZoomIn()"
     >
       <!--<mat-icon>zoom_in</mat-icon>-->
       <svg
@@ -162,7 +165,14 @@
       fxFlexFill
       fxLayoutAlign="center center"
     >
-      <img *ngIf="fileDownloadUrl" [src]="fileDownloadUrl" />
+      <img
+        #downloadImage
+        *ngIf="fileDownloadUrl"
+        [src]="fileDownloadUrl"
+        [style.width]="(zoomRatio / 100) * naturalWidth + 'px'"
+        [style.height]="'auto'"
+        (load)="onLoadFileDownloadUrl(downloadImage)"
+      />
     </div>
   </div>
 </div>

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

@@ -39,11 +39,15 @@
     height: calc(100% - 60px);
 
     .ucap-image-viewer-image-wrapper {
+      position: relative;
+      width: 100%;
       height: 100%;
-      padding: 20px;
       background-color: rgba(0, 0, 0, 0.7);
+      overflow: auto;
+
       img {
-        height: inherit;
+        position: absolute;
+        max-width: none !important;
       }
     }
   }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts

@@ -1,4 +1,12 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef,
+  ViewChild
+} from '@angular/core';
 import { ucapAnimations } from '../../animations';
 import { FileEventJson } from '@ucap-webmessenger/protocol-event';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
@@ -24,9 +32,17 @@ export class ImageViewerComponent implements OnInit {
 
   fileDownloadItem: FileDownloadItem;
 
+  naturalWidth = 0;
+  naturalHeight = 0;
+
+  zoomRatio = 100;
+
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.naturalWidth = this.fileInfo.imageWidth;
+    this.naturalHeight = this.fileInfo.imageHeight;
+  }
 
   onClickDownload(): void {
     this.fileDownloadItem = new FileDownloadItem();
@@ -36,4 +52,26 @@ export class ImageViewerComponent implements OnInit {
   onClickClose(): void {
     this.closed.emit();
   }
+
+  onLoadFileDownloadUrl(img: HTMLImageElement) {
+    console.log('onLoadFileDownloadUrl', img.naturalWidth, img.naturalHeight);
+    this.naturalWidth = img.naturalWidth;
+    this.naturalHeight = img.naturalHeight;
+  }
+
+  onClickZoomOut() {
+    if (60 >= this.zoomRatio) {
+      return;
+    }
+    this.zoomRatio -= 10;
+  }
+  onClickZoomIn() {
+    if (180 <= this.zoomRatio) {
+      return;
+    }
+    this.zoomRatio += 10;
+  }
+  onClickZoomReset() {
+    this.zoomRatio = 100;
+  }
 }

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

@@ -1,5 +1,9 @@
 <div class="search-container">
-  <mat-form-field appearance="outline">
+  <span class="icon-img">
+    <i class="mid mdi-magnify"></i>
+  </span>
+  <!--<mat-form-field appearance="outline">-->
+  <mat-form-field>
     <input
       matInput
       #searchWordInput
@@ -7,6 +11,5 @@
       (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
       [value]="!!searchWord ? searchWord : ''"
     />
-    <mat-icon matPrefix>search</mat-icon>
   </mat-form-field>
 </div>

projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.scss

@@ -1,3 +1,13 @@
 .search-container {
   -webkit-app-region: no-drag;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  width: 250px;
+  max-width: 250px;
+  color: #ffffff;
+  font-size: 0.9em;
+  .icon-img {
+    flex: 0 0 auto;
+  }
 }

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

@@ -1,5 +1,6 @@
+
 <div fxLayout="column" class="rightDrawer-notice">
-  <div fxFlex="1 1 80px" class="search-area">
+  <div  class="search-area">
     <ucap-integrated-search-form
       [searchWord]="!!searchWord ? searchWord : ''"
       (search)="onSearch($event)"
@@ -28,10 +29,7 @@
             {{ 'search.fieldProfile' | translate }}
           </th>
           <td mat-cell *matCellDef="let element">
-            <div class="profile">
-              {{ getPresence(element, PresenceType.PC) }} /
-              {{ getPresence(element, PresenceType.MOBILE) }} /
-              {{ getWorkstatus(element) }} /
+            <div class="profile thumbnail-mask">
               <img
                 class="thumbnail"
                 ucapImage
@@ -41,6 +39,7 @@
                 (click)="onClickOpenProfile($event, element.seq)"
               />
             </div>
+
           </td>
         </ng-container>
         <ng-container matColumnDef="name">
@@ -57,6 +56,22 @@
             <div class="name">
               {{ element.name }}
             </div>
+            <div class="status">
+              {{ getPresence(element, PresenceType.PC) }} /
+              {{ getPresence(element, PresenceType.MOBILE) }} /
+              {{ getWorkstatus(element) }}
+            </div>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="grade">
+          <th mat-header-cell *matHeaderCellDef #header class="grade" (mousedown)="resizeTable($event, header)">
+            {{ 'search.fieldGrade' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let element" class="grade">
+            <div class="grade">
+              {{ element.grade }}
+            </div>
           </td>
         </ng-container>
         <ng-container matColumnDef="deptName">
@@ -91,22 +106,7 @@
             </div>
           </td>
         </ng-container>
-        <ng-container matColumnDef="grade">
-          <th
-            mat-header-cell
-            *matHeaderCellDef
-            #header
-            class="grade"
-            (mousedown)="resizeTable($event, header)"
-          >
-            {{ 'search.fieldGrade' | translate }}
-          </th>
-          <td mat-cell *matCellDef="let element" class="grade">
-            <div class="grade">
-              {{ element.grade }}
-            </div>
-          </td>
-        </ng-container>
+
         <ng-container matColumnDef="lineNumber">
           <th
             mat-header-cell

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

@@ -1,106 +1,81 @@
+@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;
+  }
+}
+
 .search-scrollbar {
   height: 550px;
 }
-// .search-container {
-//   -webkit-app-region: no-drag;
-// }
 
-// @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;
-//     line-height: 1.2em;
-//   }
-// }
+::ng-deep .search-area {
+  .search-container {
+    width: 100%;
+    max-width: 100%;
+    .icon-img {
+      color: #777777;
+      transform: translateY(-4px);
+    }
+    .mat-form-field {
+      color: #333333;
+      width: 100%;
+      margin-left: -20px;
+      .mat-form-field-infix {
+        padding-left: 26px;
+      }
+      &.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float
+        .mat-form-field-label,
+      .mat-form-field-appearance-legacy.mat-form-field-can-float
+        .mat-input-server:focus
+        + .mat-form-field-label-wrapper
+        .mat-form-field-label {
+        font-size: 0.7em;
+        transform: translateY(-1.28125em) scale(1);
+      }
+    }
+  }
+}
 
-// .rightDrawer-notice {
-//   width: 100%;
-//   height: calc(100% - 60px);
+.table-box {
+  font-size: 13px;
+  width: 100%;
+  overflow: hidden;
+  td.mat-cell {
+    padding: 6px;
+    div {
+      @include ellipsis(1);
+      &.name {
+        font-size: 1em;
+        font-weight: 600;
+      }
+      &.status {
+        font-size: 0.84em;
+      }
+    }
+  }
+}
 
-//   .table-box {
-//     height: calc(100% - 111.5px);
-//     overflow: auto;
-//   }
-// }
-
-// .mat-table {
-//   width: 100%;
-//   position: relative;
-//   th.infos {
-//     padding: 10px;
-//     text-align: center;
-//   }
-//   tr.mat-row {
-//     height: 70px;
-//     .notice-info {
-//       padding: 16px;
-//       display: grid;
-//       height: 70px;
-//       .title {
-//         font-weight: 600;
-//         margin-bottom: 2px;
-//         width: 100%;
-//         @include ellipsis(2);
-//         display: flex;
-//         align-items: center;
-//         .important {
-//           color: red;
-//           margin-right: 6px;
-//         }
-//       }
-//     }
-//     .date {
-//       .date {
-//         font-size: 0.8em;
-//         text-align: right;
-//       }
-//     }
-//   }
-// }
-
-// .mat-paginator-container {
-//   display: flex;
-//   flex-flow: column;
-// }
-
-// .mat-row:hover {
-//   background: rgba(0, 0, 0, 0.04);
-//   cursor: pointer;
-// }
-
-// .footer-fix {
-//   position: absolute;
-//   bottom: 0;
-//   flex-direction: column;
-//   box-sizing: border-box;
-//   display: flex;
-//   border-top: 1px solid #dddddd;
-//   .mat-paginator {
-//     .mat-paginator-container {
-//       justify-content: center;
-//     }
-//   }
-//   .btn-box {
-//     height: 50px;
-//     padding-bottom: 10px;
-//     width: 100%;
-//     background-color: #ffffff;
-//     button {
-//       margin: 5px;
-//     }
-//   }
-// }
-
-// .mat-form-field-appearance-legacy {
-//   .mat-form-field-infix {
-//     padding: 6px;
-//   }
-// }
+.thumbnail {
+  &-mask {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: 12px;
+    position: relative;
+    img {
+      width: 40px;
+      height: auto;
+      background-color: #efefef;
+    }
+  }
+}