From f54a26fb9eaadb753edd1d801ba5a6ff715623e0 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Thu, 30 Jan 2020 19:41:37 +0900
Subject: [PATCH] =?UTF-8?q?=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/messages.component.html        |  13 +-
 .../components/messages.component.scss        |   6 +
 .../components/main.page.component.html       |   2 +-
 .../src/assets/scss/global/_default.scss      |   3 +
 .../lib/components/messages.component.scss    |   3 +
 .../lib/components/list-item.component.html   |   5 +-
 .../lib/components/list-item.component.scss   |  14 +-
 .../src/assets/scss/partials/_forms.scss      |  17 +++
 .../integrated-search.component.html          |  99 ++++++++------
 .../integrated-search.component.scss          | 123 ++++++++++--------
 10 files changed, 175 insertions(+), 110 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index db114a8c..58fd6b4b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -113,18 +113,19 @@
           (click)="onClickReceiveAlarm()"
           aria-label="Toggle Receive Alarm"
         >
-          <mat-icon
+          <!--<mat-icon
             class="amber-fg"
             *ngIf="roomInfoSubject.value.receiveAlarm"
             matTooltip="{{ 'chat.notificationIsOn' | translate }}"
-            >notifications_active</mat-icon
-          >
+            >notifications_active</mat-icon>-->
+            <mat-icon class="icon-button" *ngIf="roomInfoSubject.value.receiveAlarm"
+              matTooltip="{{ 'chat.notificationIsOn' | translate }}"><i class="mid mdi-bell-ring-outline"></i></mat-icon>
+
           <mat-icon
-            class="secondary-text"
+            class="icon-button"
             *ngIf="!roomInfoSubject.value.receiveAlarm"
             matTooltip="{{ 'chat.notificationIsOff' | translate }}"
-            >notifications_off</mat-icon
-          >
+            ><i class="mid mdi-bell-off-outline"></i></mat-icon>
         </button>
 
         <button
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
index c871684f..7f90f256 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@@ -93,6 +93,12 @@
     .room-option {
       margin-left: auto;
       margin-right: -10px;
+      .icon-button {
+        transform: translateY(-2px);
+        i {
+          font-size: 0.9em;
+        }
+      }
     }
   }
   .chat-search-frame {
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
index 35c54050..406909bd 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
@@ -14,7 +14,7 @@
         (mouseleave)="onMouseLeaveLeftSideContainer($event)"
       ></app-layout-messenger-left-side>
     </mat-drawer>
-    <div class="chat-messages">
+    <div class="chat-messages bg-accent-brightest">
       <app-layout-messenger-intro
         *ngIf="!(this.selectedChat$ | async)"
       ></app-layout-messenger-intro>
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
index 9005f3f6..032bdbbf 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -224,6 +224,9 @@ $daesang-grey: (
   .bg-warn-darkest {
     background-color: mat-color($warn, 600);
   }
+  .text-primary-light {
+    color: mat-color($primary, 500);
+  }
   .text-primary-color {
     color: mat-color($primary);
   }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
index 974bb623..684a8ad0 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
@@ -173,3 +173,6 @@ $tablet-l-width: 1024px;
   .chat-messages-buffer {
   }
 }
+.translation-container {
+  font-size: 0.9em;
+}
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
index 5831cab1..ae747046 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
@@ -62,8 +62,11 @@
           >
             {{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }}
           </div>
-          <div *ngIf="!checkable && !roomInfo.receiveAlarm">
+          <!--<div *ngIf="!checkable && !roomInfo.receiveAlarm">
             <mat-icon>notifications_off</mat-icon>
+          </div>-->
+          <div class="icon-img" *ngIf="!checkable && !roomInfo.receiveAlarm">
+            <i class="mdi mdi-bell-off-outline text-primary-light"></i>
           </div>
         </div>
         <div class="final-message">
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
index ea5431d0..dc1f5198 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
@@ -39,21 +39,21 @@ $thumbnail-msize: 40px;
     }
   }
 
-  .profile-name {
+  &-name {
     font-size: 16px;
     @include ellipsis(1);
   }
 
-  .profile-last-message {
+  &-last-message {
     line-height: normal;
     margin-top: 0;
   }
 
-  .profile-last-message-time {
+  &-last-message-time {
     font-size: 12px;
   }
 
-  .profile-mood {
+  &-mood {
     line-height: normal;
     margin: 0;
   }
@@ -104,6 +104,12 @@ $thumbnail-msize: 40px;
           margin-left: 4px;
           line-height: unset;
         }
+        .icon-img {
+          i {
+            font-size: 1.1em;
+            text-align: center;
+          }
+        }
         .member {
           flex: none;
           margin-left: 6px;
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 09a68eb9..6949d094 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
@@ -99,3 +99,20 @@ textarea {
     }
   }
 }
+
+//label 선명도
+.mat-form-field {
+  &.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);
+  }
+}
+
+.mat-error {
+  font-size: 0.8em;
+}
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 a569156a..7811c74a 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
@@ -18,49 +18,59 @@
     <perfect-scrollbar class="search-scrollbar">
       <table mat-table [dataSource]="searchUserInfos">
         <ng-container matColumnDef="profile">
-          <th mat-header-cell *matHeaderCellDef class="profile">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            class="profile"
+            (mousedown)="resizeTable($event)"
+          >
             {{ 'search.fieldProfile' | translate }}
           </th>
           <td mat-cell *matCellDef="let element">
-            <div class="profile">
-              <span
-                class="presence"
-                [ngClass]="getPresence(element, 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
-                *ngIf="getPresence(element, PresenceType.MOBILE) === 'mobileOn'"
-                class="text-accent-color marker-mobile-state"
-              >
-                <mat-icon>phone_android</mat-icon>
-              </span>
-            </div>
-            <div>
-              <span
-                class="work-status"
-                [ngClass]="getWorkstatusInfo(element, 'style')"
-              >
-                {{ getWorkstatusInfo(element, 'text') }}
-              </span>
-              <span class="name">
-                {{ element.name }}
-              </span>
+            <div class="table-item">
+              <div class="profile">
+                <span
+                  class="presence"
+                  [ngClass]="getPresence(element, 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
+                  *ngIf="
+                    getPresence(element, PresenceType.MOBILE) === 'mobileOn'
+                  "
+                  class="text-accent-color marker-mobile-state"
+                >
+                  <mat-icon>phone_android</mat-icon>
+                </span>
+              </div>
+              <div>
+                <span
+                  class="work-status"
+                  [ngClass]="getWorkstatusInfo(element, 'style')"
+                >
+                  {{ getWorkstatusInfo(element, 'text') }}
+                </span>
+                <span class="name">
+                  {{ element.name }}
+                </span>
+              </div>
             </div>
           </td>
         </ng-container>
         <ng-container matColumnDef="grade">
           <th
             mat-header-cell
-            *matHeaderCellDef class="grade"
+            *matHeaderCellDef
+            class="grade"
             (mousedown)="resizeTable($event)"
           >
             {{ 'search.fieldGrade' | translate }}
@@ -74,7 +84,8 @@
         <ng-container matColumnDef="deptName">
           <th
             mat-header-cell
-            *matHeaderCellDef class="deptName"
+            *matHeaderCellDef
+            class="deptName"
             (mousedown)="resizeTable($event)"
           >
             {{ 'search.fieldDeptartment' | translate }}
@@ -88,7 +99,8 @@
         <ng-container matColumnDef="companyName">
           <th
             mat-header-cell
-            *matHeaderCellDef class="companyName"
+            *matHeaderCellDef
+            class="companyName"
             (mousedown)="resizeTable($event)"
           >
             {{ 'search.fieldCompany' | translate }}
@@ -103,7 +115,8 @@
         <ng-container matColumnDef="lineNumber">
           <th
             mat-header-cell
-            *matHeaderCellDef class="lineNumber"
+            *matHeaderCellDef
+            class="lineNumber"
             (mousedown)="resizeTable($event)"
           >
             {{ 'search.fieldOfficePhoneNumber' | translate }}
@@ -117,7 +130,8 @@
         <ng-container matColumnDef="hpNumber">
           <th
             mat-header-cell
-            *matHeaderCellDef class="hpNumber"
+            *matHeaderCellDef
+            class="hpNumber"
             (mousedown)="resizeTable($event)"
           >
             {{ 'search.fieldHandphone' | translate }}
@@ -131,7 +145,8 @@
         <ng-container matColumnDef="email">
           <th
             mat-header-cell
-            *matHeaderCellDef class="email"
+            *matHeaderCellDef
+            class="email"
             (mousedown)="resizeTable($event)"
           >
             {{ 'search.fieldEmail' | translate }}
@@ -145,7 +160,8 @@
         <ng-container matColumnDef="responsibilities">
           <th
             mat-header-cell
-            *matHeaderCellDef class="responsibilities"
+            *matHeaderCellDef
+            class="responsibilities"
             (mousedown)="resizeTable($event)"
           >
             {{ 'search.fieldResponsibilities' | translate }}
@@ -159,7 +175,8 @@
         <ng-container matColumnDef="workplace">
           <th
             mat-header-cell
-            *matHeaderCellDef class="workplace"
+            *matHeaderCellDef
+            class="workplace"
             (mousedown)="resizeTable($event)"
           >
             {{ 'search.fieldWorkPlace' | translate }}
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 78610703..6c2414f4 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
@@ -41,15 +41,6 @@
       .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);
-      }
     }
   }
 }
@@ -65,6 +56,10 @@
     th {
       @include disable-selection;
       text-align: center;
+      &.profile {
+        width: 200px;
+        min-width: 200px;
+      }
     }
     td.mat-cell {
       padding: 6px;
@@ -72,56 +67,70 @@
       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 {
-            cursor: pointer;
-            &-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;
-              }
+        &.table-item {
+          display: flex;
+          width: 200px;
+          min-width: 200px;
+          font-size: 1em;
+          div {
+            display: inline-flex;
+            height: 100%;
+            align-self: center;
+            .name {
+              @include ellipsis(1);
+              font-size: 1em;
+              font-weight: 600;
             }
-          }
-          .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;
+            .status {
+              font-size: 0.84em;
+            }
+
+            &.profile {
+              width: 70px;
+              text-overflow: unset;
+              flex: 0 0 auto;
+              .presence {
+                transform: translateY(6px);
+              }
+              .thumbnail {
+                cursor: pointer;
+                &-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: 4px;
+                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;
+                }
+              }
             }
           }
         }