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

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

@@ -1,5 +1,4 @@
-
+<div fxLayout="column" fxFlex="1 1 auto" class="rightDrawer-notice">
-<div fxLayout="column" class="rightDrawer-notice">
   <div class="search-area">
     <ucap-integrated-search-form
       [searchWord]="!!searchWord ? searchWord : ''"
@@ -19,17 +18,27 @@
     <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">
+          <td mat-cell *matCellDef ="let element">
-            <div class="profile thumbnail-mask">
+            <!--
+            {{ 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
@@ -38,8 +47,12 @@
                   [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">
+          <td mat-cell *matCellDef ="let element">
-            <div class="name">
+            <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 }}
-            </div>
+              </span>
-            <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)">
+          <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>

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

@@ -49,28 +49,41 @@
   font-size: 13px;
   width: 100%;
   overflow: hidden;
+  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 {
+        .name {
           font-size: 1em;
           font-weight: 600;
         }
-      &.status {
+        .status {
           font-size: 0.84em;
         }
-    }
-  }
-}
 
-.thumbnail {
+        &.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: 12px;
+              margin-right: 0;
               position: relative;
               img {
                 width: 40px;
@@ -78,4 +91,48 @@
                 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;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.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;
 }