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

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html

@@ -34,8 +34,8 @@
       <ng-template mat-tab-label>
         <div
           class="icon-item"
-          [matBadgeHidden]="badgeChatUnReadCount <= 0"
+          [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
-          [matBadge]="badgeChatUnReadCount"
+          [matBadge]="badgeChatUnReadCount$ | async"
           matBadgeDescription="{{
             'chat.badgeDescriptionForUnread' | translate
           }}"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.ts

@@ -1,20 +1,14 @@
-import {
+import { Component, OnInit, OnDestroy } from '@angular/core';
-  Component,
-  OnInit,
-  OnDestroy,
-} from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
-import { Subscription, Observable, } from 'rxjs';
+import { Observable } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
 import * as MessageStore from '@app/store/messenger/message';
 import * as SettingsStore from '@app/store/messenger/settings';
 import { MatTabChangeEvent } from '@angular/material';
-import {
+import { MainMenu } from '@app/types';
-  MainMenu
-} from '@app/types';
 
 @Component({
   selector: 'app-layout-messenger-left-nav',
@@ -23,8 +17,7 @@ import {
   animations: ucapAnimations
 })
 export class LeftNaviComponent implements OnInit, OnDestroy {
-  badgeChatUnReadCount: number;
+  badgeChatUnReadCount$: Observable<number>;
-  badgeChatUnReadCountSubscription: Subscription;
   badgeMessageUnReadCount$: Observable<number>;
   badgeMessageInterval: any;
 
@@ -33,13 +26,10 @@ export class LeftNaviComponent implements OnInit, OnDestroy {
   constructor(private store: Store<any>, private logger: NGXLogger) {}
 
   ngOnInit() {
-    this.badgeChatUnReadCountSubscription = this.store
+    /** About Chat Badge */
-      .pipe(
+    this.badgeChatUnReadCount$ = this.store.pipe(
-        select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
+      select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
-      )
+    );
-      .subscribe(count => {
-        this.badgeChatUnReadCount = count;
-      });
 
     /** About Message Badge */
     this.badgeMessageUnReadCount$ = this.store.pipe(
@@ -54,10 +44,6 @@ export class LeftNaviComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (!!this.badgeChatUnReadCountSubscription) {
-      this.badgeChatUnReadCountSubscription.unsubscribe();
-    }
-
     if (!!this.badgeMessageInterval) {
       clearInterval(this.badgeMessageInterval);
     }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts

@@ -17,7 +17,7 @@ import {
   CreateChatDialogData,
   CreateChatDialogResult
 } from '@app/layouts/messenger/dialogs/chat/create-chat.dialog.component';
-import { Subscription, Observable, merge } from 'rxjs';
+import { Subscription, merge } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
@@ -76,11 +76,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
 
   onLangChangeSubscription: Subscription;
 
-  badgeChatUnReadCount: number;
-  badgeChatUnReadCountSubscription: Subscription;
-  badgeMessageUnReadCount$: Observable<number>;
-  badgeMessageInterval: any;
-
   /** 조직도에서 부서원 선택 */
   selectedUserList: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
 
@@ -113,14 +108,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.badgeChatUnReadCountSubscription = this.store
-      .pipe(
-        select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
-      )
-      .subscribe(count => {
-        this.badgeChatUnReadCount = count;
-      });
-
     this.loginResSubscription = this.store
       .pipe(
         select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
@@ -130,17 +117,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
       )
       .subscribe();
 
-    /** About Message Badge */
-    this.badgeMessageUnReadCount$ = this.store.pipe(
-      select(AppStore.MessengerSelector.MessageSelector.unReadMessageCount)
-    );
-
-    this.getMessageUnreadCount();
-    this.badgeMessageInterval = setInterval(
-      () => this.getMessageUnreadCount(),
-      5 * 60 * 1000
-    );
-
     this.setFabInitial(MainMenu.Group);
     this.currentTabLable = MainMenu.Group;
 
@@ -164,19 +140,12 @@ export class LeftSideComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (!!this.badgeChatUnReadCountSubscription) {
-      this.badgeChatUnReadCountSubscription.unsubscribe();
-    }
     if (!!this.loginResSubscription) {
       this.loginResSubscription.unsubscribe();
     }
     if (!!this.onLangChangeSubscription) {
       this.onLangChangeSubscription.unsubscribe();
     }
-
-    if (!!this.badgeMessageInterval) {
-      clearInterval(this.badgeMessageInterval);
-    }
   }
 
   async onClickNewChat(type: string = 'NORMAL') {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html

@@ -128,9 +128,9 @@
   </div>
 
   <div class="message-section" [style.display]="isSearch ? 'block' : 'none'">
-    <div class="search-sub">
+    <div class="search-sub input-lineless">
       <form [formGroup]="fgSearchType" class="w-100-p">
-        <mat-form-field style="width: 100px;">
+        <mat-form-field>
           <mat-select
             value="A"
             formControlName="searchMessageType"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss

@@ -30,10 +30,36 @@
       position: relative;
       height: 100%;
     }
-
+    .search-sub {
+      padding: 0 20px;
+      font-size: 0.9em;
+      height: 50px;
+      align-items: center;
+      display: flex;
+      border-bottom: 1px solid #dddddd;
+      form {
+        .mat-form-field {
+          width: 30%;
+          flex: 0 0 auto;
+          margin-right: 10px;
+          font-size: 1em;
+        }
+        .mat-radio-group {
+          .mat-radio-button {
+            margin: 0 4px;
+            .mat-radio-label {
+              .mat-radio-label-content {
+                padding-left: 4px;
+              }
+            }
+          }
+        }
+      }
+    }
     .no-search-result {
-      padding-top: 10px;
+      justify-content: center;
-      padding-left: 10px;
+      align-items: center;
+      display: flex;
     }
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss

@@ -22,7 +22,6 @@
       color: #444444;
     }
   }
-
   .mat-card-content {
     flex: 0 0 auto;
     display: flex;
@@ -46,16 +45,10 @@
               align-items: self-start;
               justify-content: flex-start;
             }
-            .mat-ink-bar {
-              display: none;
-            }
           }
-        }
+          .mat-ink-bar {
-        .mat-tab-body-wrapper {
+            display: none;
-          border-left: 1px solid #dddddd;
+          }
-          position: relative;
-          height: 100%;
-          padding: 0 0 10px 10px;
         }
       }
     }
@@ -77,9 +70,11 @@
     position: relative;
     height: 100%;
     width: 100%;
+
     .mat-tab-header {
       width: 160px;
       flex-flow: column;
+      border-right: 1px solid #dddddd;
       .mat-tab-label-container {
         .mat-tab-list {
           .mat-tab-labels {
@@ -113,8 +108,15 @@
     position: relative;
     .mat-list-item {
       font-size: 15px;
+      .mat-tab-header {
+        border-right: none;
+      }
     }
     .mat-divider {
+      //margin-top: 10px;
+    }
+    .mat-subheader {
+      font-weight: 600;
     }
   }
 }

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

@@ -276,8 +276,9 @@ $daesang-grey: (
   }
 
   .policy {
-    background-color: mat-color($accent, B100);
+    color: mat-color($accent, B100);
   }
+
   .mat-badge-accent .mat-badge-content,
   .weblink .mat-badge-content {
     background-color: mat-color($warn, 400);
@@ -439,4 +440,7 @@ $daesang-grey: (
       }
     }
   }
+  .mat-calendar-body-selected{
+     background-color: mat-color($accent);
+  }
 }

projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts

@@ -331,6 +331,7 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
   private checkContentLength() {
     const result = this.parseContent();
     if (!result) {
+      this.contentLength = 0;
       return;
     }
 
@@ -572,6 +573,7 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
     } else {
       this.editor.nativeElement.appendChild(node);
     }
+    selection.empty();
   }
 
   private inEditor(el) {

projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.html

@@ -14,9 +14,11 @@
               (selected)="onSelectedDate($event)"
             ></ucap-pick-date>
           </div>
-          <div fxFlex="30px" style="margin-top: 30px;">
+          <div class="pick-time">
-            <span flFlex="1 1 auto"></span>
+            <span class="icon-img"
-            <span style="width: 100px;">
+              ><i class="mid mdi-clock-check-outline"></i
+            ></span>
+            <span class="pick-time-select">
               <ucap-pick-time
                 [hour]="selectedDate.hour()"
                 [hourStep]="hourStep"
@@ -33,8 +35,8 @@
       </div>
       <div fxFlex="40%" style="margin-left: 30px;">
         <div fxLayout="column">
-          <div fxFlex="40px" style="margin-top: 30px;">
+          <div fxFlex="40px" style="margin-top: 30px;" class="Reservation-dete">
-            <span flFlexFill style="font-size: 22px;">
+            <span flFlexFill style="font-size: 20px;" class="text-accent-dark">
               {{ selectedDate.format('MMM DD YYYY, HH:mm') }}
             </span>
           </div>
@@ -102,12 +104,11 @@
   </mat-card-content>
   <mat-card-actions>
     <div class="actions-container">
-      <div class="actions-message">
+      <div class="actions-message text-warn-color">
         <span *ngIf="dateIsToEarly">
           {{ 'message.errors.minTimeReservation' | translate }}
         </span>
       </div>
-      <div class="actions-spacer"></div>
       <div class="actions">
         <button
           mat-stroked-button
@@ -117,7 +118,7 @@
           {{ 'common.messages.cancel' | translate }}
         </button>
         <button
-          mat-stroked-button
+          mat-flat-button
           [disabled]="dateIsToEarly"
           (click)="onClickSend()"
           class="mat-primary"

projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.scss

@@ -4,9 +4,10 @@
 
 .actions-container {
   display: flex;
-  position: fixed;
+  flex-flow: column;
 
   .actions-message {
+    font-size: 0.9em;
   }
 
   .actions-spacer {
@@ -14,5 +15,22 @@
   }
 
   .actions {
+    margin-left: auto;
+    button {
+      margin-left: 8px;
+    }
+  }
+}
+
+.pick-time {
+  display: flex;
+  flex-flow: row;
+  margin-top: 20px;
+  width: 100%;
+  &-select {
+    width: 100%;
+  }
+  .icon-img {
+    margin-right: 20px;
   }
 }

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.html

@@ -79,10 +79,10 @@
             'settings.notification.receiveForMobileTypeAlways' | translate
           }}</mat-checkbox
         >
-        <br />({{
+        <span class="text-guide">({{
           'settings.notification.descriptionReceiveForMobileTypeAlways'
             | translate
-        }})
+        }})</span>
       </span>
     </mat-list-item>
 
@@ -102,10 +102,10 @@
             'settings.notification.receiveForMessageTypePopup' | translate
           }}</mat-checkbox
         >
-        <br />({{
+        <span class="text-guide">({{
           'settings.notification.descriptionReceiveForMobileTypePopup'
             | translate
-        }})
+        }})</span>
       </span>
     </mat-list-item>
   </mat-list>

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.scss

@@ -9,3 +9,13 @@
 .item-input[fullWidth] {
   width: 100%;
 }
+
+.text-guide {
+  display: block;
+  font-size: 0.9em;
+  color: rgb(0, 0, 0, 0.7);
+}
+
+.mat-radio-container {
+  margin-right: 20px;
+}

projects/ucap-webmessenger-ui/src/lib/components/pick-time.component.scss

@@ -7,9 +7,12 @@
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
   .hour-input {
-    width: 40px;
+    width: 60px;
+    + span {
+      padding: 0 10px;
+    }
   }
   .minute-input {
-    width: 40px;
+    width: 60px;
   }
 }

projects/ucap-webmessenger-ui/src/lib/components/step-input.component.scss

@@ -26,7 +26,7 @@
     font-size: 1rem;
     color: inherit;
     outline: none;
-    text-align: end;
+    text-align: start;
 
     &:disabled {
       background-color: transparent;