수정사항반영

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,10 +18,16 @@
     <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="table-item">
               <div class="profile">
                 <span
                   class="presence"
@@ -38,7 +44,9 @@
                   />
                 </span>
                 <span
-                *ngIf="getPresence(element, PresenceType.MOBILE) === 'mobileOn'"
+                  *ngIf="
+                    getPresence(element, PresenceType.MOBILE) === 'mobileOn'
+                  "
                   class="text-accent-color marker-mobile-state"
                 >
                   <mat-icon>phone_android</mat-icon>
@@ -55,12 +63,14 @@
                   {{ 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,7 +67,18 @@
       width: 100px;
       div {
         @include ellipsis(1);
+
+        &.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;
             }
@@ -81,10 +87,11 @@
             }
 
             &.profile {
-          width: 60px;
+              width: 70px;
               text-overflow: unset;
+              flex: 0 0 auto;
               .presence {
-            transform: translateY(-30px);
+                transform: translateY(6px);
               }
               .thumbnail {
                 cursor: pointer;
@@ -109,7 +116,7 @@
                 width: 20px;
                 height: 20px;
                 border-radius: 50%;
-            bottom: 6px;
+                bottom: 4px;
                 left: 50px;
                 display: flex;
                 align-items: center;
@@ -129,6 +136,8 @@
         }
       }
     }
+  }
+}
 
 .work-status {
   display: inline-block;