수정사항반영

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

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 {

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>

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);
   }

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;
+}

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">

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;

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;
+}

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">
+            <div class="table-item">
-              <span
+              <div class="profile">
-                class="presence"
+                <span
-                [ngClass]="getPresence(element, PresenceType.PC)"
+                  class="presence"
-              ></span>
+                  [ngClass]="getPresence(element, PresenceType.PC)"
-              <span class="thumbnail-mask">
+                ></span>
-                <img
+                <span class="thumbnail-mask">
-                  class="thumbnail"
+                  <img
-                  ucapImage
+                    class="thumbnail"
-                  [base]="profileImageRoot"
+                    ucapImage
-                  [path]="element.profileImageFile"
+                    [base]="profileImageRoot"
-                  [default]="'assets/images/img_nophoto_50.png'"
+                    [path]="element.profileImageFile"
-                  (click)="onClickOpenProfile($event, element.seq)"
+                    [default]="'assets/images/img_nophoto_50.png'"
-                />
+                    (click)="onClickOpenProfile($event, element.seq)"
-              </span>
+                  />
-              <span
+                </span>
-                *ngIf="getPresence(element, PresenceType.MOBILE) === 'mobileOn'"
+                <span
-                class="text-accent-color marker-mobile-state"
+                  *ngIf="
-              >
+                    getPresence(element, PresenceType.MOBILE) === 'mobileOn'
-                <mat-icon>phone_android</mat-icon>
+                  "
-              </span>
+                  class="text-accent-color marker-mobile-state"
-            </div>
+                >
-            <div>
+                  <mat-icon>phone_android</mat-icon>
-              <span
+                </span>
-                class="work-status"
+              </div>
-                [ngClass]="getWorkstatusInfo(element, 'style')"
+              <div>
-              >
+                <span
-                {{ getWorkstatusInfo(element, 'text') }}
+                  class="work-status"
-              </span>
+                  [ngClass]="getWorkstatusInfo(element, 'style')"
-              <span class="name">
+                >
-                {{ element.name }}
+                  {{ getWorkstatusInfo(element, 'text') }}
-              </span>
+                </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 }}

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 {
+        &.table-item {
-          width: 60px;
+          display: flex;
-          text-overflow: unset;
+          width: 200px;
-          .presence {
+          min-width: 200px;
-            transform: translateY(-30px);
+          font-size: 1em;
-          }
+          div {
-          .thumbnail {
+            display: inline-flex;
-            cursor: pointer;
+            height: 100%;
-            &-mask {
+            align-self: center;
-              display: inline-block;
+            .name {
-              width: 40px;
+              @include ellipsis(1);
-              height: 40px;
+              font-size: 1em;
-              border-radius: 50%;
+              font-weight: 600;
-              overflow: hidden;
-              margin-right: 0;
-              position: relative;
-              img {
-                width: 40px;
-                height: auto;
-                background-color: #efefef;
-              }
             }
-          }
+            .status {
-          .marker-mobile-state {
+              font-size: 0.84em;
-            position: absolute;
+            }
-            background-color: #ffffff;
+
-            width: 20px;
+            &.profile {
-            height: 20px;
+              width: 70px;
-            border-radius: 50%;
+              text-overflow: unset;
-            bottom: 6px;
+              flex: 0 0 auto;
-            left: 50px;
+              .presence {
-            display: flex;
+                transform: translateY(6px);
-            align-items: center;
+              }
-            align-content: center;
+              .thumbnail {
-            justify-content: center;
+                cursor: pointer;
-            .mat-icon {
+                &-mask {
-              font-size: 0.9em;
+                  display: inline-block;
-              width: 18px;
+                  width: 40px;
-              height: 18px;
+                  height: 40px;
-              line-height: 18px;
+                  border-radius: 50%;
-              min-width: 18px;
+                  overflow: hidden;
-              min-height: 18px;
+                  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;
+                }
+              }
             }
           }
         }