From 4ddfb42161842fb484202e56778668eb747548f7 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Wed, 29 Jan 2020 20:00:10 +0900
Subject: [PATCH] =?UTF-8?q?=ED=86=B5=ED=95=A9=EA=B2=80=EC=83=89=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/scss/partials/_forms.scss      |   1 -
 .../integrated-search.component.html          |  42 ++---
 .../integrated-search.component.scss          | 175 ++++++++----------
 3 files changed, 96 insertions(+), 122 deletions(-)

diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
index a31e53f8..09a68eb9 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
@@ -23,7 +23,6 @@ textarea {
       .mat-form-field-wrapper {
         color: #ffffff;
         width: 100%;
-        padding-bottom: 0.8em;
         .mat-form-field-infix {
           .mat-input-element {
             font-size: 1em;
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 76ac5a28..69dc6911 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,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
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 9e25f3fb..4435011a 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
@@ -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;
+    }
+  }
+}