통합검색결과 페이지

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;

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">
+            <div class="profile thumbnail-mask">
-              {{ getPresence(element, PresenceType.PC) }} /
-              {{ getPresence(element, PresenceType.MOBILE) }} /
-              {{ getWorkstatus(element) }} /
               <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) {
+::ng-deep .search-area {
-//   overflow: hidden;
+  .search-container {
-//   text-overflow: ellipsis;
+    width: 100%;
-//   @if $row == 1 {
+    max-width: 100%;
-//     display: block;
+    .icon-img {
-//     white-space: nowrap;
+      color: #777777;
-//     word-wrap: normal;
+      transform: translateY(-4px);
-//   } @else if $row >= 2 {
+    }
-//     display: -webkit-box;
+    .mat-form-field {
-//     -webkit-line-clamp: $row;
+      color: #333333;
-//     -webkit-box-orient: vertical;
+      width: 100%;
-//     word-wrap: break-word;
+      margin-left: -20px;
-//     line-height: 1.2em;
+      .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 {
+.table-box {
-//   width: 100%;
+  font-size: 13px;
-//   height: calc(100% - 60px);
+  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 {
+.thumbnail {
-//     height: calc(100% - 111.5px);
+  &-mask {
-//     overflow: auto;
+    width: 40px;
-//   }
+    height: 40px;
-// }
+    border-radius: 50%;
-
+    overflow: hidden;
-// .mat-table {
+    margin-right: 12px;
-//   width: 100%;
+    position: relative;
-//   position: relative;
+    img {
-//   th.infos {
+      width: 40px;
-//     padding: 10px;
+      height: auto;
-//     text-align: center;
+      background-color: #efefef;
-//   }
+    }
-//   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;
-//   }
-// }