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

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html

@@ -40,7 +40,7 @@
         >
           <mat-tab>
             <ng-template mat-tab-label>
-              <!--<mat-icon>group</mat-icon>-->
+              <!--<mat-icon>group</mat-icon>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="20"
@@ -58,7 +58,8 @@
                 <circle cx="9" cy="7" r="4"></circle>
                 <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                 <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
-              </svg>
+              </svg>-->
+              <button class="icon-button"><i class="mid mid-24 mdi-account-multiple"></i></button>
             </ng-template>
             <div class="mat-tab-frame">
               <div>
@@ -136,11 +137,11 @@
           </mat-tab>
           <mat-tab>
             <ng-template mat-tab-label>
-              <mat-icon
+              <!--<mat-icon
                 matTooltip="{{ 'organization.chart' | translate }}"
                 matTooltipPosition="after"
-                >device_hub</mat-icon
+                >device_hub</mat-icon>-->
-              >
+                <button class="icon-button"><i class="mid mid-24 mdi-file-tree"></i></button>
             </ng-template>
             <div>
               <app-layout-chat-left-sidenav-organization
@@ -162,7 +163,9 @@
               <mat-icon
                 matTooltip="{{ 'chat.room' | translate }}"
                 matTooltipPosition="before"
-                >chat</mat-icon
+                class="icon-button"
+                ><i class="mid mid-24 mdi-chat"></i>
+                </mat-icon
               >
             </ng-template>
             <div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.html

@@ -1,28 +1,29 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z  selected-user-dialog">
   <mat-card-header>
     <mat-card-title>
       {{ data.title }}
-      <span class="count">
+      <span class="count text-accent-dark">
         {{ selectedUserList.length }} / {{ data.selectedUserList.length }}
       </span>
-      <mat-checkbox
-        #checkbox
-        labelPosition="before"
-        [checked]="
-          selectedUserList.length === data.selectedUserList.length &&
-          data.selectedUserList.length > 0
-        "
-        (change)="onCheckAllUser(checkbox.checked)"
-        (click)="$event.stopPropagation()"
-      >
-        {{ 'common.messages.selectAll' | translate }}
-      </mat-checkbox>
     </mat-card-title>
     <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
       <i class="mdi mdi-window-close"></i>
     </button>
   </mat-card-header>
   <mat-card-content>
+    <mat-checkbox
+      #checkbox
+      labelPosition="before"
+      [checked]="
+        selectedUserList.length === data.selectedUserList.length &&
+        data.selectedUserList.length > 0
+      "
+      (change)="onCheckAllUser(checkbox.checked)"
+      (click)="$event.stopPropagation()"
+      class="check-all"
+    >
+      {{ 'common.messages.selectAll' | translate }}
+    </mat-checkbox>
     <div class="item-list">
       <cdk-virtual-scroll-viewport
         itemSize="60"

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.scss

@@ -25,3 +25,19 @@
     }
   }
 }
+
+::ng-deep .selected-user-dialog {
+  .check-all {
+    display: flex;
+    border-bottom: 2px solid #444444;
+    .mat-checkbox-layout {
+      margin-left: auto;
+      padding-bottom: 6px;
+    }
+  }
+  .item-list {
+    .list-item {
+      padding: 0;
+    }
+  }
+}

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -452,4 +452,9 @@ $daesang-grey: (
   .mat-calendar-body-selected {
     background-color: mat-color($accent);
   }
+  .list-item{
+    &.selected{
+      background-color: mat-color($accent, 100);
+    }
+  }
 }

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -66,7 +66,7 @@
             <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>
+            <i class="mdi mid-18 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

@@ -105,6 +105,7 @@ $thumbnail-msize: 40px;
           line-height: unset;
         }
         .icon-img {
+          padding-left: 4px;
           i {
             font-size: 1.1em;
             text-align: center;

projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss

@@ -3,8 +3,6 @@ mat-icon {
   font-size: 24px;
   width: 24px;
   height: 24px;
-  min-width: 24px;
-  min-height: 24px;
   line-height: 24px;
 
   @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
@@ -32,17 +30,31 @@ mat-icon {
   justify-items: center;
   background: none;
   border: none;
-  width: 20px;
+  width: auto;
-  height: 20px;
+  height: auto;
   justify-items: center;
   justify-content: center;
   i {
-    font-family: 'material-outline-icons';
+    &.mid {
-    font-size: 20px;
+      font-family: 'material-outline-icons';
-    width: 20px;
+      font-size: 20px;
-    height: 20px;
+      width: 20px;
-    line-height: 20px;
+      height: 20px;
-    font-weight: normal;
+      line-height: 20px;
+      font-weight: normal;
+      &-18 {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
+      }
+      &-24 {
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+      }
+    }
     &:before {
       display: inline-block;
       font: normal normal normal 20px/1 'Material Design Icons';