From 0eba1452445300a8933a3d4b80162546143b2d67 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Thu, 30 Jan 2020 14:21:06 +0900
Subject: [PATCH] =?UTF-8?q?=ED=86=B5=ED=95=A9=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=EA=B2=B0=EA=B3=BC=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../integrated-search.component.html          |  84 ++++++++------
 .../integrated-search.component.scss          | 105 ++++++++++++++----
 2 files changed, 133 insertions(+), 56 deletions(-)

diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
index 69dc6911..a6d28777 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
@@ -1,6 +1,5 @@
-
-<div fxLayout="column" class="rightDrawer-notice">
-  <div  class="search-area">
+<div fxLayout="column" fxFlex="1 1 auto" class="rightDrawer-notice">
+  <div class="search-area">
     <ucap-integrated-search-form
       [searchWord]="!!searchWord ? searchWord : ''"
       (search)="onSearch($event)"
@@ -19,27 +18,41 @@
     <perfect-scrollbar class="search-scrollbar">
       <table mat-table [dataSource]="searchUserInfos">
         <ng-container matColumnDef="profile">
-          <th
+          <!--<th
             mat-header-cell
             *matHeaderCellDef
             #header
             class="profile"
             (mousedown)="resizeTable($event, header)"
-          >
+          >-->
+          <th mat-header-cell *matHeaderCellDef #header class="profile" >
             {{ 'search.fieldProfile' | translate }}
           </th>
-          <td mat-cell *matCellDef="let element">
-            <div class="profile thumbnail-mask">
-              <img
-                class="thumbnail"
-                ucapImage
-                [base]="profileImageRoot"
-                [path]="element.profileImageFile"
-                [default]="'assets/images/img_nophoto_50.png'"
-                (click)="onClickOpenProfile($event, element.seq)"
-              />
+          <td mat-cell *matCellDef ="let element">
+            <!--
+            {{ getPresence(element, PresenceType.PC) }}
+            {{ getPresence(element, PresenceType.MOBILE) }}
+          -->
+            <div class="profile">
+              <span
+                class="presence pcOn"
+                [ngClass]="getPresence(PresenceType.PC)"
+              ></span>
+              <span class="thumbnail-mask">
+                <img
+                  class="thumbnail"
+                  ucapImage
+                  [base]="profileImageRoot"
+                  [path]="element.profileImageFile"
+                  [default]="'assets/images/img_nophoto_50.png'"
+                  (click)="onClickOpenProfile($event, element.seq)"
+                />
+              </span>
+              <!--모바일 상태-->
+              <span class="text-accent-color marker-mobile-state">
+                <mat-icon>phone_android</mat-icon>
+              </span>
             </div>
-
           </td>
         </ng-container>
         <ng-container matColumnDef="name">
@@ -52,20 +65,27 @@
           >
             {{ 'search.fieldName' | translate }}
           </th>
-          <td mat-cell *matCellDef="let element">
-            <div class="name">
-              {{ element.name }}
-            </div>
-            <div class="status">
-              {{ getPresence(element, PresenceType.PC) }} /
-              {{ getPresence(element, PresenceType.MOBILE) }} /
-              {{ getWorkstatus(element) }}
+          <td mat-cell *matCellDef ="let element">
+            <div>
+              <!-- morning-off: 오전 afternoon-off: 오후 day-off: 휴가 long-time: 장기 leave-of-absence: 휴직-->
+              <span class="work-status morning-off">
+                {{ getWorkstatus(element) }}</span
+              >
+              <span class="name">
+                {{ element.name }}
+              </span>
             </div>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="grade">
-          <th mat-header-cell *matHeaderCellDef #header class="grade" (mousedown)="resizeTable($event, header)">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            #header
+            class="grade"
+            (mousedown)="resizeTable($event, header)"
+          >
             {{ 'search.fieldGrade' | translate }}
           </th>
           <td mat-cell *matCellDef="let element" class="grade">
@@ -84,7 +104,7 @@
           >
             {{ 'search.fieldDeptartment' | translate }}
           </th>
-          <td mat-cell *matCellDef="let element">
+          <td mat-cell *matCellDef ="let element">
             <div class="deptName">
               {{ element.deptName }}
             </div>
@@ -100,7 +120,7 @@
           >
             {{ 'search.fieldCompany' | translate }}
           </th>
-          <td mat-cell *matCellDef="let element">
+          <td mat-cell *matCellDef ="let element">
             <div class="companyName">
               {{ element.companyName }}
             </div>
@@ -117,7 +137,7 @@
           >
             {{ 'search.fieldOfficePhoneNumber' | translate }}
           </th>
-          <td mat-cell *matCellDef="let element" class="lineNumber">
+          <td mat-cell *matCellDef ="let element" class="lineNumber">
             <div class="lineNumber">
               {{ element.lineNumber }}
             </div>
@@ -133,7 +153,7 @@
           >
             {{ 'search.fieldHandphone' | translate }}
           </th>
-          <td mat-cell *matCellDef="let element" class="hpNumber">
+          <td mat-cell *matCellDef ="let element" class="hpNumber">
             <div class="hpNumber">
               {{ element.hpNumber }}
             </div>
@@ -149,7 +169,7 @@
           >
             {{ 'search.fieldEmail' | translate }}
           </th>
-          <td mat-cell *matCellDef="let element" class="email">
+          <td mat-cell *matCellDef ="let element" class="email">
             <div class="email">
               {{ element.email }}
             </div>
@@ -165,7 +185,7 @@
           >
             {{ 'search.fieldResponsibilities' | translate }}
           </th>
-          <td mat-cell *matCellDef="let element" class="responsibilities">
+          <td mat-cell *matCellDef ="let element" class="responsibilities">
             <div class="responsibilities">
               {{ element.responsibilities }}
             </div>
@@ -181,7 +201,7 @@
           >
             {{ 'search.fieldWorkPlace' | translate }}
           </th>
-          <td mat-cell *matCellDef="let element" class="workplace">
+          <td mat-cell *matCellDef ="let element" class="workplace">
             <div class="workplace">
               {{ element.workplace }}
             </div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
index 4435011a..585f6993 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
@@ -49,33 +49,90 @@
   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;
+  display: flex;
+  table {
+    table-layout: fixed;
+    width: 100%;
+    th {
+      text-align: center;
+    }
+    td.mat-cell {
+      padding: 6px;
+      position: relative;
+      width: 100px;
+      div {
+        @include ellipsis(1);
+        .name {
+          font-size: 1em;
+          font-weight: 600;
+        }
+        .status {
+          font-size: 0.84em;
+        }
+
+        &.profile {
+          width: 60px;
+          text-overflow: unset;
+          .presence {
+            transform: translateY(-30px);
+          }
+          .thumbnail {
+            &-mask {
+              display: inline-block;
+              width: 40px;
+              height: 40px;
+              border-radius: 50%;
+              overflow: hidden;
+              margin-right: 0;
+              position: relative;
+              img {
+                width: 40px;
+                height: auto;
+                background-color: #efefef;
+              }
+            }
+          }
+          .marker-mobile-state {
+            position: absolute;
+            background-color: #ffffff;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            bottom: 6px;
+            left: 50px;
+            display: flex;
+            align-items: center;
+            align-content: center;
+            justify-content: center;
+            .mat-icon {
+              font-size: 0.9em;
+              width: 18px;
+              height: 18px;
+              line-height: 18px;
+              min-width: 18px;
+              min-height: 18px;
+            }
+          }
+        }
       }
     }
   }
 }
 
-.thumbnail {
-  &-mask {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    overflow: hidden;
-    margin-right: 12px;
-    position: relative;
-    img {
-      width: 40px;
-      height: auto;
-      background-color: #efefef;
-    }
-  }
+.work-status {
+  display: inline-block;
+  justify-content: center;
+  justify-items: center;
+  color: #ffffff;
+  height: 100%;
+  min-width: 32px;
+  margin-right: 4px;
+  border-radius: 24px;
+  flex: 0 0 auto;
+  font-size: 0.8em;
+  text-align: center;
+}
+.mat-paginator-container {
+  display: flex;
+  flex-flow: column;
 }