Merge branch 'master' into new-org

electron-projects/ucap-webmessenger-electron/src/app/AppWindow.ts

@@ -89,7 +89,7 @@ export class AppWindow {
     // windows Focus or Blur state detacted.
     this.window.on(ElectronBrowserWindowChannel.Focus, () => {
       if (__WIN32__) {
-        this.window.flashFrame(false);
+        // this.window.flashFrame(false);
       }
 
       this.window.webContents.send(

electron-projects/ucap-webmessenger-electron/src/index.ts

@@ -8,7 +8,8 @@ import {
   dialog,
   BrowserWindow,
   clipboard,
-  crashReporter
+  crashReporter,
+  nativeImage
 } from 'electron';
 import path from 'path';
 import fse from 'fs-extra';
@@ -35,7 +36,8 @@ import {
   MessageChannel,
   AppChannel,
   ClipboardChannel,
-  ExternalChannel
+  ExternalChannel,
+  WindowStateChannel
 } from '@ucap-webmessenger/native-electron';
 import { ElectronNotificationService } from '@ucap-webmessenger/electron-notification';
 import { ElectronUpdateWindowService } from '@ucap-webmessenger/electron-update-window';
@@ -800,7 +802,7 @@ ipcMain.on(
         : '',
       displayTime: !!noti.displayTime ? noti.displayTime : undefined,
       onClick: e => {
-        appWindow.browserWindow.flashFrame(false);
+        // appWindow.browserWindow.flashFrame(false);
         if (noti.type === NotificationType.Event) {
           appWindow.browserWindow.webContents.send(
             ChatChannel.OpenRoom,
@@ -820,13 +822,37 @@ ipcMain.on(
     if (!appWindow.isVisible()) {
       appWindow.browserWindow.minimize();
     }
-
+    // const img = nativeImage.createFromPath(
+    //   path.join(__dirname, 'assets/notification/images/img_nophoto_50.png')
+    // );
+    // console.log(img);
+    // appWindow.browserWindow.setOverlayIcon(img, 'discription');
+    // setTimeout(() => {
+    //   appWindow.browserWindow.setOverlayIcon(null, '');
+    // }, 3000);
     appWindow.browserWindow.flashFrame(true);
   }
 );
 
 ipcMain.on(
   NotificationChannel.CloseAllNotify,
+  (event: IpcMainEvent, ...args: any[]) => {
+    // appWindow.browserWindow.flashFrame(false);
+  }
+);
+
+ipcMain.on(
+  WindowStateChannel.OnFlashFrame,
+  (event: IpcMainEvent, ...args: any[]) => {
+    appWindow.browserWindow.flashFrame(false);
+    if (!appWindow.isVisible() && !appWindow.browserWindow.isMinimized()) {
+      appWindow.browserWindow.minimize();
+    }
+    appWindow.browserWindow.flashFrame(true);
+  }
+);
+ipcMain.on(
+  WindowStateChannel.OffFlashFrame,
   (event: IpcMainEvent, ...args: any[]) => {
     appWindow.browserWindow.flashFrame(false);
   }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 import { Observable, Subscribable, Subscription } from 'rxjs';
@@ -10,6 +10,7 @@ import * as SettingsStore from '@app/store/messenger/settings';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { MainMenu } from '@app/types';
 import { tap, map } from 'rxjs/operators';
+import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 
 @Component({
   selector: 'app-layout-messenger-left-nav',
@@ -25,13 +26,34 @@ export class LeftNaviComponent implements OnInit, OnDestroy {
   MainMenu = MainMenu;
   gnbMenuIndexSubscription: Subscription;
   gnbMenuIndex: number;
+  intervalFlashFrame: any;
 
-  constructor(private store: Store<any>, private logger: NGXLogger) {}
+  constructor(
+    private store: Store<any>,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
+    private logger: NGXLogger
+  ) {}
 
   ngOnInit() {
     /** About Chat Badge */
     this.badgeChatUnReadCount$ = this.store.pipe(
-      select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
+      select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount),
+      tap(count => {
+        // windows taskbar blinking unread count exist.
+        if (!!count && count > 0) {
+          if (!this.intervalFlashFrame) {
+            this.intervalFlashFrame = setInterval(() => {
+              this.nativeService.onFlashFlame();
+            }, 1000);
+          }
+        } else {
+          this.nativeService.offFlashFlame();
+          if (!!this.intervalFlashFrame) {
+            clearInterval(this.intervalFlashFrame);
+            this.intervalFlashFrame = undefined;
+          }
+        }
+      })
     );
 
     /** About Message Badge */

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

@@ -160,7 +160,8 @@ export class LeftSideComponent implements OnInit, OnDestroy {
       CreateChatDialogData,
       CreateChatDialogResult
     >(CreateChatDialogComponent, {
-      width: '600px',
+      maxWidth: '94vw',
+      maxHeight: '90vh',
       data: {
         type: UserSelectDialogType.NewChat,
         title:
@@ -192,7 +193,8 @@ export class LeftSideComponent implements OnInit, OnDestroy {
       CreateChatDialogData,
       CreateChatDialogResult
     >(CreateChatDialogComponent, {
-      width: '600px',
+      maxWidth: '94vw',
+      maxHeight: '90vh',
       data: {
         type: UserSelectDialogType.NewGroup,
         title: this.translateService.instant('group.addNew')
@@ -224,8 +226,8 @@ export class LeftSideComponent implements OnInit, OnDestroy {
       MessageWriteDialogData,
       MessageWriteDialogResult
     >(MessageWriteDialogComponent, {
-      width: '600px',
+      maxWidth: '90vw',
-      height: '600px',
+      maxHeight: '94vh',
       disableClose: true,
       hasBackdrop: false,
       data: {

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

@@ -269,6 +269,7 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
             ConfirmDialogData,
             ConfirmDialogResult
           >(ConfirmDialogComponent, {
+            panelClass: 'miniSize-dialog',
             data: {
               title: this.translateService.instant('chat.exitFromRoom'),
               html: this.translateService.instant('chat.confirmExitFromRoom')

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

@@ -512,7 +512,7 @@ export class GroupComponent implements OnInit, OnDestroy {
               ConfirmDialogData,
               ConfirmDialogResult
             >(ConfirmDialogComponent, {
-              width: '360px',
+              panelClass: 'miniSize-dialog',
               data: {
                 title: this.translateService.instant(
                   'group.removeBuddyFromGroup'
@@ -547,7 +547,6 @@ export class GroupComponent implements OnInit, OnDestroy {
               SelectGroupDialogData,
               SelectGroupDialogResult
             >(SelectGroupDialogComponent, {
-              width: '600px',
               data: {
                 title: this.translateService.instant('group.selectTargetGroup')
               }
@@ -586,7 +585,6 @@ export class GroupComponent implements OnInit, OnDestroy {
               SelectGroupDialogData,
               SelectGroupDialogResult
             >(SelectGroupDialogComponent, {
-              width: '600px',
               data: {
                 title: this.translateService.instant('group.selectTargetGroup'),
                 ignoreGroup: [group]
@@ -621,8 +619,8 @@ export class GroupComponent implements OnInit, OnDestroy {
               MessageWriteDialogData,
               MessageWriteDialogResult
             >(MessageWriteDialogComponent, {
-              width: '600px',
+              maxWidth: '90vw',
-              height: '600px',
+              maxHeight: '94vh',
               disableClose: true,
               hasBackdrop: false,
               data: {
@@ -715,8 +713,9 @@ export class GroupComponent implements OnInit, OnDestroy {
                 MessageWriteDialogData,
                 MessageWriteDialogResult
               >(MessageWriteDialogComponent, {
-                width: '600px',
+                minWidth: '600px',
-                height: '600px',
+                maxWidth: '90vw',
+                maxHeight: '94vh',
                 disableClose: true,
                 hasBackdrop: false,
                 data: {
@@ -737,6 +736,7 @@ export class GroupComponent implements OnInit, OnDestroy {
               EditGroupDialogData,
               EditGroupDialogResult
             >(EditGroupDialogComponent, {
+              panelClass: 'miniSize-dialog',
               data: {
                 title: this.translateService.instant('group.changeGroupName'),
                 group
@@ -765,7 +765,8 @@ export class GroupComponent implements OnInit, OnDestroy {
               CreateChatDialogData,
               CreateChatDialogResult
             >(CreateChatDialogComponent, {
-              width: '600px',
+              maxWidth: '90vh',
+              maxHeight: '94vh',
               data: {
                 type: UserSelectDialogType.EditMember,
                 title: this.translateService.instant('group.modifyGroupMember'),
@@ -797,7 +798,7 @@ export class GroupComponent implements OnInit, OnDestroy {
               ConfirmDialogData,
               ConfirmDialogResult
             >(ConfirmDialogComponent, {
-              width: '360px',
+              panelClass: 'miniSize-dialog',
               data: {
                 title: this.translateService.instant('group.removeGroup'),
                 html: this.translateService.instant(

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

@@ -18,9 +18,6 @@
 .message-item {
   cursor: pointer;
 }
-::ng-deep .ps__rail-y {
-  left: auto !important;
-}
 .message-box {
   position: relative;
   height: 100%;

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

@@ -202,7 +202,6 @@ export class MessageBoxComponent
             MessageDetailDialogData,
             MessageDetailDialogResult
           >(MessageDetailDialogComponent, {
-            width: '600px',
             hasBackdrop: false,
             data: {
               detail: info,
@@ -243,7 +242,7 @@ export class MessageBoxComponent
             AlertDialogData,
             AlertDialogResult
           >(AlertDialogComponent, {
-            width: '360px',
+            panelClass: 'miniSize-dialog',
             data: {
               title: this.translateService.instant('message.errors.label'),
               message: this.translateService.instant(
@@ -417,8 +416,8 @@ export class MessageBoxComponent
       MessageWriteDialogData,
       MessageWriteDialogResult
     >(MessageWriteDialogComponent, {
-      width: '600px',
+      maxWidth: '90vw',
-      height: '600px',
+      maxHeight: '94vh',
       disableClose: true,
       hasBackdrop: false,
       data: {

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

@@ -595,6 +595,8 @@ export class OrganizationComponent
       SelectedUserListDialogData,
       SelectedUserListDialogResult
     >(SelectedUserListDialogComponent, {
+      maxWidth: '90vw',
+      maxHeight: '94vh',
       data: {
         title: this.translateService.instant('organization.selectedUser'),
         selectedUserList: this.selectedUserList
@@ -617,7 +619,8 @@ export class OrganizationComponent
       SelectGroupDialogData,
       SelectGroupDialogResult
     >(SelectGroupDialogComponent, {
-      width: '600px',
+      maxWidth: '90vw',
+      maxHeight: '94vh',
       data: {
         title: this.translateService.instant('group.selectTargetGroup')
       }
@@ -747,8 +750,8 @@ export class OrganizationComponent
             MessageWriteDialogData,
             MessageWriteDialogResult
           >(MessageWriteDialogComponent, {
-            width: '600px',
+            maxWidth: '90vw',
-            height: '600px',
+            maxHeight: '94vh',
             disableClose: true,
             hasBackdrop: false,
             data: {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.html

@@ -48,15 +48,15 @@
         </button>
       </div>
       <div class="room-info">
-        <div
-          *ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
-          class="room-type text-accent-color "
-        >
-          <span class="bg-accent-darkest"
-            >{{ getConvertTimer(roomInfoSubject.value.timeRoomInterval) }}
-          </span>
-        </div>
         <h3 class="room-name">
+          <span
+            *ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
+            class="room-type text-accent-color"
+          >
+            <span class="bg-accent-darkest"
+              >{{ getConvertTimer(roomInfoSubject.value.timeRoomInterval) }}
+            </span>
+          </span>
           <ng-container
             *ngIf="!roomInfoSubject.value || !userInfoListSubject.value"
           >
@@ -98,6 +98,9 @@
                     <span>
                       {{ getSingleRoomUserInfosGrade(_roomUserInfos) }}
                     </span>
+                    <span>
+                      / {{ getSingleRoomUserInfosDeptName(_roomUserInfos) }}
+                    </span>
                     <span
                       *ngIf="
                         _roomUserInfos.length > 0 &&
@@ -126,18 +129,17 @@
             </ng-container>
           </ng-container>
         </h3>
-        <!-- Timer Room Info -->
+        <div
-        <!--<div
+          *ngIf="
-          *ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
+            roomInfoSubject.value &&
-          class="room-type text-accent-color "
+            (roomInfoSubject.value.roomType === RoomType.Single ||
+              roomInfoSubject.value.roomType === RoomType.Multi) &&
+            offLineUsers.length > 0
+          "
+          class="member-state-msg text-warn-color"
         >
-          <span class="bg-accent-darkest"
+          {{ getOfflineString() }}
-            >{{
+        </div>
-              getConvertTimer(roomInfoSubject.value.timeRoomInterval)
-            }} </span
-          >{{ 'chat.isRoomTypeSecret' | translate }}
-        </div>-->
-        <!-- Timer Room Info -->
       </div>
       <div class="room-option">
         <button
@@ -146,11 +148,6 @@
           (click)="onClickReceiveAlarm()"
           aria-label="Toggle Receive Alarm"
         >
-          <!--<mat-icon
-            class="amber-fg"
-            *ngIf="roomInfoSubject.value.receiveAlarm"
-            matTooltip="{{ 'chat.notificationIsOn' | translate }}"
-            >notifications_active</mat-icon>-->
           <mat-icon
             class="icon-button"
             *ngIf="roomInfoSubject.value.receiveAlarm"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.scss

@@ -70,14 +70,18 @@
     }
     .room-info {
       display: flex;
-      flex-flow: row;
+      flex-flow: column;
       overflow: hidden;
       align-items: center;
       .room-name {
+        position: relative;
+        display: flex;
+        flex-flow: row;
+        height: 20px;
         font-size: 0.94rem;
         line-height: normal;
+        width: 100%;
         @include ellipsis(1);
-
         .more-info {
           font-size: 0.9rem;
           color: #656565;
@@ -86,6 +90,7 @@
           }
         }
       }
+
       .room-type {
         font-size: 0.9rem;
         line-height: normal;
@@ -98,6 +103,14 @@
         }
       }
     }
+    .member-state-msg {
+      display: flex;
+      align-items: center;
+      align-self: self-start;
+      padding: 0;
+      font-size: 11px;
+      height: 16px;
+    }
     .room-option {
       margin-left: auto;
       margin-right: -10px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.ts

@@ -32,7 +32,14 @@ import {
 } from '@ucap-webmessenger/ui';
 import { Store, select } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
-import { Observable, Subscription, forkJoin, of, BehaviorSubject } from 'rxjs';
+import {
+  Observable,
+  Subscription,
+  forkJoin,
+  of,
+  BehaviorSubject,
+  combineLatest
+} from 'rxjs';
 
 import {
   Info,
@@ -103,7 +110,12 @@ import {
   FileViewerDialogData,
   FileViewerDialogResult
 } from '@app/layouts/common/dialogs/file-viewer.dialog.component';
-import { FileUtil, StickerFilesInfo, MimeUtil } from '@ucap-webmessenger/core';
+import {
+  FileUtil,
+  StickerFilesInfo,
+  MimeUtil,
+  StatusCode as PresenceStatusCode
+} from '@ucap-webmessenger/core';
 
 import { StatusCode } from '@ucap-webmessenger/api';
 import {
@@ -144,7 +156,6 @@ import {
   EventDownloadRequest
 } from '@ucap-webmessenger/api-message';
 import moment from 'moment';
-import { start } from 'repl';
 
 @Component({
   selector: 'app-layout-messenger-messages',
@@ -189,6 +200,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   userInfoListSubscription: Subscription;
   userInfoListSubject = new BehaviorSubject<UserInfo[]>(undefined);
 
+  userStatusListSubscription: Subscription;
+  offLineUsers: UserInfo[] = [];
+
   eventListSubscription: Subscription;
   eventListSubject = new BehaviorSubject<Info<EventJson>[]>(undefined);
   eventListNewSubject = new BehaviorSubject<Info<EventJson>[]>(undefined);
@@ -325,6 +339,49 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         this.changeDetectorRef.detectChanges();
       });
 
+    this.userStatusListSubscription = combineLatest([
+      this.store.pipe(
+        select(AppStore.MessengerSelector.RoomSelector.selectUserinfolist)
+      ),
+      this.store.pipe(
+        select(
+          AppStore.MessengerSelector.StatusSelector.selectEntitiesStatusBulkInfo
+        )
+      )
+    ])
+      .pipe(
+        tap(([userInfoList, presences]) => {
+          if (!!userInfoList && userInfoList.length > 0) {
+            userInfoList
+              .filter(
+                info =>
+                  info.seq !== this.loginResSubject.value.userSeq &&
+                  !!info.isJoinRoom
+              )
+              .forEach(userInfo => {
+                const presence = presences[userInfo.seq];
+                const existIndex = !!this.offLineUsers
+                  ? this.offLineUsers.findIndex(e => e.seq === userInfo.seq)
+                  : -1;
+
+                if (
+                  !!presence &&
+                  presence.pcStatus === PresenceStatusCode.OnLine
+                ) {
+                  if (existIndex > -1) {
+                    this.offLineUsers.splice(existIndex, 1);
+                  }
+                } else {
+                  if (existIndex === -1) {
+                    this.offLineUsers.push(userInfo);
+                  }
+                }
+              });
+          }
+        })
+      )
+      .subscribe();
+
     this.eventListProcessing$ = this.store.pipe(
       select(AppStore.MessengerSelector.EventSelector.infoListProcessing)
     );
@@ -454,6 +511,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     if (!!this.userInfoListSubscription) {
       this.userInfoListSubscription.unsubscribe();
     }
+    if (!!this.userStatusListSubscription) {
+      this.userStatusListSubscription.unsubscribe();
+    }
     if (!!this.eventListSubscription) {
       this.eventListSubscription.unsubscribe();
     }
@@ -501,6 +561,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     // Read here Clear..
     this.firstCheckReadHere = true;
 
+    // off line user clear..
+    this.offLineUsers = [];
+
     // Chat Formfield Clear..
     if (!!this.chatForm) {
       this.chatForm.replyInput.nativeElement.value = '';
@@ -536,6 +599,15 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     return roomName;
   }
 
+  getSingleRoomUserInfosDeptName(roomUserInfos: any[]) {
+    if (roomUserInfos.length > 0) {
+      return new UiTranslatePipe(
+        this.uiTranslateService,
+        this.changeDetectorRef
+      ).transform(roomUserInfos, 'deptName', ',');
+    }
+    return '';
+  }
   getSingleRoomUserInfosGrade(roomUserInfos: any[]) {
     if (roomUserInfos.length > 0) {
       return new UiTranslatePipe(
@@ -568,10 +640,35 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
+  getOfflineString() {
+    let offlineStr = '';
+    if (!!this.offLineUsers && this.offLineUsers.length > 0) {
+      if (
+        !!this.roomInfoSubject.value &&
+        this.roomInfoSubject.value.roomType === RoomType.Single
+      ) {
+        const name = new UiTranslatePipe(
+          this.uiTranslateService,
+          this.changeDetectorRef
+        ).transform(this.offLineUsers[0], 'name');
+
+        offlineStr = this.translateService.instant('chat.existOfflineUser', {
+          offlineUser: name
+        });
+      } else if (
+        !!this.roomInfoSubject.value &&
+        this.roomInfoSubject.value.roomType === RoomType.Multi
+      ) {
+        offlineStr = this.translateService.instant('chat.existOfflineUsers');
+      }
+    }
+    return offlineStr;
+  }
+
   onClickSendClickToCall(type: string) {
-    if(type === 'LINE') {
+    if (type === 'LINE') {
       this.sendCall.emit(this._roomUserInfos[0].lineNumber);
-    } else if(type === 'MOBILE') {
+    } else if (type === 'MOBILE') {
       this.sendCall.emit(this._roomUserInfos[0].hpNumber);
     }
   }
@@ -726,13 +823,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             AlertDialogData,
             AlertDialogResult
           >(AlertDialogComponent, {
-            width: '360px',
             data: {
               title: this.translateService.instant('chat.errors.label'),
               message: this.translateService.instant(
                 'chat.errors.inputChatMessage'
               )
-            }
+            },
+            panelClass: 'miniSize-dialog'
           });
           return;
         }
@@ -790,7 +887,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         AlertDialogData,
         AlertDialogResult
       >(AlertDialogComponent, {
-        width: '360px',
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('chat.errors.label'),
           message: this.translateService.instant(
@@ -924,7 +1021,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
               AlertDialogData,
               AlertDialogResult
             >(AlertDialogComponent, {
-              width: '360px',
+              panelClass: 'miniSize-dialog',
               data: {
                 title: '',
                 message: this.translateService.instant(
@@ -942,7 +1039,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             AlertDialogData,
             AlertDialogResult
           >(AlertDialogComponent, {
-            width: '360px',
+            panelClass: 'miniSize-dialog',
             data: {
               title: '',
               message: this.translateService.instant(
@@ -1461,7 +1558,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             CreateChatDialogData,
             CreateChatDialogResult
           >(CreateChatDialogComponent, {
-            width: '600px',
+            maxWidth: '94vw',
+            maxHeight: '90vh',
             data: {
               type: UserSelectDialogType.MessageForward,
               title: this.translateService.instant('chat.forwardEventTo'),
@@ -1524,7 +1622,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             ConfirmDialogData,
             ConfirmDialogResult
           >(ConfirmDialogComponent, {
-            width: '400px',
+            panelClass: 'miniSize-dialog',
             data: {
               title: this.translateService.instant('chat.removeEvent'),
               html: this.translateService.instant('chat.confirmRemoveEvent')
@@ -1548,7 +1646,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             ConfirmDialogData,
             ConfirmDialogResult
           >(ConfirmDialogComponent, {
-            width: '400px',
+            panelClass: 'miniSize-dialog',
             data: {
               title: this.translateService.instant('chat.recallEvent'),
               html: this.translateService.instant('chat.confirmRecallEvent')
@@ -1641,6 +1739,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
               AlertDialogData,
               AlertDialogResult
             >(AlertDialogComponent, {
+              panelClass: 'miniSize-dialog',
               data: {
                 title: this.translateService.instant('chat.errors.label'),
                 html: this.translateService.instant(
@@ -1665,7 +1764,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             CreateChatDialogData,
             CreateChatDialogResult
           >(CreateChatDialogComponent, {
-            width: '600px',
+            maxWidth: '94vw',
+            maxHeight: '90vh',
             data: {
               type: UserSelectDialogType.EditChatMember,
               title: this.translateService.instant('chat.modifyRoomMember'),
@@ -1732,7 +1832,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             SelectGroupDialogData,
             SelectGroupDialogResult
           >(SelectGroupDialogComponent, {
-            width: '600px',
+            maxWidth: '90vw',
+            maxHeight: '94vh',
             data: {
               title: this.translateService.instant('chat.addMemberToGroup')
             }
@@ -1768,6 +1869,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             EditChatRoomDialogResult
           >(EditChatRoomDialogComponent, {
             width: '600px',
+            height: '320px',
             data: {
               title: this.translateService.instant('chat.settingsOfRoom'),
               roomInfo: this.roomInfoSubject.value

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts

@@ -308,7 +308,6 @@ export class FileBoxComponent implements OnInit, OnDestroy {
       CreateChatDialogData,
       CreateChatDialogResult
     >(CreateChatDialogComponent, {
-      width: '600px',
       data: {
         type: UserSelectDialogType.MessageForward,
         title: this.translateService.instant('chat.forwardFileTo'),
@@ -350,7 +349,7 @@ export class FileBoxComponent implements OnInit, OnDestroy {
       ConfirmDialogData,
       ConfirmDialogResult
     >(ConfirmDialogComponent, {
-      width: '400px',
+      panelClass: 'miniSize-dialog',
       data: {
         title: 'Delete',
         html: this.translateService.instant('chat.confirmDeleteFile')

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/notice.component.ts

@@ -106,7 +106,7 @@ export class NoticeComponent implements OnInit, OnDestroy, AfterViewInit {
       NoticeDetailDialogData
     >(NoticeDetailDialogComponent, {
       disableClose: false,
-      width: '550px',
+      //width: '550px',
       data: {
         notice
       }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts

@@ -159,6 +159,7 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
         AlertDialogData,
         AlertDialogResult
       >(AlertDialogComponent, {
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('chat.errors.label'),
           html: this.translateService.instant(
@@ -181,7 +182,6 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
       CreateChatDialogData,
       CreateChatDialogResult
     >(CreateChatDialogComponent, {
-      width: '600px',
       data: {
         type: UserSelectDialogType.EditChatMember,
         title: this.translateService.instant('chat.modifyRoomMember'),
@@ -237,7 +237,6 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
       SelectGroupDialogData,
       SelectGroupDialogResult
     >(SelectGroupDialogComponent, {
-      width: '600px',
       data: {
         title: this.translateService.instant('group.selectTargetGroup')
       }
@@ -291,6 +290,7 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
             ConfirmDialogData,
             ConfirmDialogResult
           >(ConfirmDialogComponent, {
+            panelClass: 'miniSize-dialog',
             data: {
               title: this.translateService.instant('chat.ejectFromRoom'),
               html: this.translateService.instant('chat.confirmEjectFromRoom', {

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

@@ -1,9 +1,11 @@
-::ng-deep .use-caution {
+.use-caution {
   .btn-dialog-close {
     margin-left: auto;
   }
-  .mat-card-header-text {
+  .mat-card-header {
     width: 100%;
+    justify-content: center;
+    color: #ffffff;
     .mat-card-title {
       justify-content: center;
       color: #ffffff;
@@ -29,8 +31,18 @@
   }
 }
 
-form {
+//이용시 주의사항
-  .mat-form-field {
+::ng-deep.use-caution {
-    width: 100%;
+  .notice {
+    ol {
+      li {
+        list-style: decimal;
+        margin-bottom: 14px;
+        margin-left: 20px;
+        span {
+          color: #ff5722;
+        }
+      }
+    }
   }
 }

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

@@ -11,7 +11,10 @@
     </button>
   </mat-card-header>
   <mat-card-content>
-    <div *ngIf="data.type === UserSelectDialogType.NewGroup">
+    <div
+      *ngIf="data.type === UserSelectDialogType.NewGroup"
+      class="newgroup-form"
+    >
       <form name="inputForm" [formGroup]="inputForm" novalidate>
         <mat-form-field
           hintLabel="{{
@@ -52,6 +55,7 @@
       fxLayoutAlign="center"
       fxLayoutGap="10px"
       fxLayoutGap.xs="0"
+      class="mat-card-content-frame"
     >
       <div fxFlex class="container">
         <mat-tab-group
@@ -60,25 +64,6 @@
         >
           <mat-tab>
             <ng-template mat-tab-label>
-              <!--<mat-icon>group</mat-icon>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                stroke-linecap="butt"
-                stroke-linejoin="round"
-                matTooltip="{{ 'group.label' | translate }}"
-                matTooltipPosition="after"
-              >
-                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-                <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>-->
               <button class="icon-button">
                 <i class="mid mid-24 mdi-account-multiple"></i>
               </button>
@@ -227,24 +212,24 @@
         </mat-tab-group>
       </div>
     </div>
+    <mat-card-actions class="button-form flex-row">
+      <button
+        mat-stroked-button
+        (click)="onClickChoice(false)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.no' | translate }}
+      </button>
+      <button
+        mat-flat-button
+        [disabled]="getBtnValid()"
+        (click)="onClickChoice(true)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.yes' | translate }}
+      </button>
+    </mat-card-actions>
   </mat-card-content>
-  <mat-card-actions class="button-form flex-row">
-    <button
-      mat-stroked-button
-      (click)="onClickChoice(false)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.no' | translate }}
-    </button>
-    <button
-      mat-flat-button
-      [disabled]="getBtnValid()"
-      (click)="onClickChoice(true)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.yes' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>
 
 <ng-template #selectedUserListTemplate>
@@ -254,6 +239,7 @@
         *ngFor="let userInfo of selectedUserList"
         [selected]="getChipsRemoveYn(userInfo)"
         (removed)="onClickDeleteUser(userInfo)"
+        [matTooltip]="userInfo.deptName"
       >
         {{ userInfo | ucapTranslate: 'name' }}
         <mat-icon matChipRemove *ngIf="getChipsRemoveYn(userInfo)"

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

@@ -10,24 +10,27 @@
     }
   }
   & > .mat-card-content {
-    //height: 568px;
     position: relative;
-    .container {
+    .mat-card-content-frame {
-      height: 100%;
+      height: calc(100% - 50px);
-      .container-frame {
+      .container {
-        height: 530px;
+        height: 100%;
+        .container-frame {
+          height: 530px;
+        }
       }
     }
-
     //그룹이름 폼 있는 경우
     .newgroup-form {
       height: 70px;
-      + .container {
+      & + .mat-card-content-frame {
-        height: calc(100% - 70px);
+        height: calc(100% - 120px);
-        .container-frame {
+        .container {
-          .mat-tab-group {
+          .mat-tab-frame {
-            & > .mat-tab-body {
+            .mat-tab-group {
-              height: 380px;
+              & > .mat-tab-body {
+                height: 380px;
+              }
             }
           }
         }
@@ -44,7 +47,7 @@
 }
 
 .dialog-tab-grouplist {
-  height: 380px;
+  height: calc(100% - 130px);
   width: 100%;
   .group,
   .search-result {
@@ -61,7 +64,7 @@
   }
 }
 
-::ng-deep .dialog-tab-chatlist {
+/*::ng-deep .dialog-tab-chatlist {
   height: 508px;
   width: 100%;
   .chat {
@@ -79,10 +82,10 @@
     }
   }
 }
-
+*/
 ::ng-deep .dialog-tab-orglist {
   width: 100%;
-  height: 380px;
+  height: calc(100% - 130px);
   border-bottom: 1px solid #dddddd;
   position: relative;
   .oraganization {
@@ -92,7 +95,6 @@
     &-tab {
       width: 100%;
       height: calc(100% - 50px);
-      // border-bottom: 1px solid #dddddd;
       position: relative;
       &-tree {
         display: inline-flex;
@@ -130,8 +132,8 @@
   margin-top: 10px;
 }
 .mat-chip.mat-standard-chip .mat-chip-remove {
-  line-height: 24px;
 }
+
 .confirm-card {
   .mat-card-content {
     .content-box {
@@ -147,7 +149,7 @@
   }
 }
 
-/*:ng-deep .dialog-creat-chat {
+/*::ng-deep .dialog-creat-chat {
   & > .mat-tab-body-wrapper {
     .mat-tab-body {
       height: 380px;
@@ -162,3 +164,15 @@
   }
 }
 */
+
+.mat-card-content {
+  .mat-card-content-frame {
+    height: 100%;
+    .container {
+      height: 100%;
+      .mat-tab-group {
+        height: 100%;
+      }
+    }
+  }
+}

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

@@ -766,6 +766,7 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
           AlertDialogData,
           AlertDialogResult
         >(AlertDialogComponent, {
+          panelClass: 'miniSize-dialog',
           data: {
             title: this.translateService.instant('group.errors.label'),
             html: this.translateService.instant('group.errors.requireName')
@@ -787,7 +788,7 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
         ConfirmDialogData,
         ConfirmDialogResult
       >(ConfirmDialogComponent, {
-        width: '400px',
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('group.addNew'),
           html: cfmMsg

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html

@@ -1,4 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z edit-group">
   <mat-card-header>
     <mat-card-title
       cdkDrag
@@ -41,22 +41,22 @@
         </mat-error>
       </mat-form-field>
     </form>
+    <mat-card-actions class="button-form flex-row">
+      <button
+        mat-stroked-button
+        (click)="onClickChoice(false)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.no' | translate }}
+      </button>
+      <button
+        mat-flat-button
+        (click)="onClickChoice(true)"
+        [disabled]="inputForm.invalid"
+        class="mat-primary"
+      >
+        {{ 'common.messages.yes' | translate }}
+      </button>
+    </mat-card-actions>
   </mat-card-content>
-  <mat-card-actions class="button-form flex-row">
-    <button
-      mat-stroked-button
-      (click)="onClickChoice(false)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.no' | translate }}
-    </button>
-    <button
-      mat-flat-button
-      (click)="onClickChoice(true)"
-      [disabled]="inputForm.invalid"
-      class="mat-primary"
-    >
-      {{ 'common.messages.yes' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>

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

@@ -1,18 +1,32 @@
-.mat-card-header {
+.edit-group {
-  .mat-card-header-text {
+  width: 100%;
-    margin: 0;
+  height: 100%;
-  }
-  .btn-dialog-close {
-    font-size: 20px;
-    display: flex;
-    margin-left: auto;
-    align-self: flex-start;
-    color: #444444;
-  }
-}
 
-form {
+  .mat-card-header {
-  .mat-form-field {
+    .mat-card-header-text {
-    width: 100%;
+      margin: 0;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
+  }
+  .mat-card-content {
+    display: flex;
+    flex-flow: column;
+    form {
+      .mat-form-field {
+        width: 100%;
+      }
+    }
+    .mat-card-actions {
+      display: flex;
+      align-self: flex-end;
+      flex-flow: row;
+      margin-top: auto;
+    }
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html

@@ -1,4 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z selected-user">
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
     <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
@@ -16,96 +16,98 @@
         <mat-icon>add</mat-icon>
         <span class="mat-fab__label">{{ 'group.addNew' | translate }}</span>
       </button>
-
+    </div>
-      <div *ngIf="isShowAddGroupField" class="input-groupname-box">
+    <div *ngIf="isShowAddGroupField" class="input-groupname-box">
-        <form name="inputForm" [formGroup]="inputForm" novalidate>
+      <form name="inputForm" [formGroup]="inputForm" novalidate>
-          <mat-form-field
+        <mat-form-field
-            hintLabel="{{
+          hintLabel="{{
-              'common.useOnlyForSpecialCharacter'
+            'common.useOnlyForSpecialCharacter'
-                | translate: { specialCharacter: '-,_' }
+              | translate: { specialCharacter: '-,_' }
-            }}"
+          }}"
-          >
+        >
-            <input
+          <input
-              matInput
+            matInput
-              #inputGroupName
+            #inputGroupName
-              type="text"
+            type="text"
-              maxlength="20"
+            maxlength="20"
-              placeholder="{{ 'group.name' | translate }}"
+            placeholder="{{ 'group.name' | translate }}"
-              value=""
+            value=""
-              formControlName="groupName"
+            formControlName="groupName"
-            />
+          />
-            <button
-              mat-button
-              matSuffix
-              mat-icon-button
-              aria-label="Clear"
-              (click)="inputGroupName.value = ''"
-            >
-              <mat-icon>close</mat-icon>
-            </button>
-            <mat-hint align="end"
-              >{{ inputGroupName.value?.length || 0 }}/20</mat-hint
-            >
-            <mat-error
-              *ngIf="inputForm.get('groupName').hasError('groupNameBanned')"
-            >
-              {{
-                'group.errors.bannedWords'
-                  | translate: { bannedWords: bannedWords.join(',') }
-              }}
-            </mat-error>
-            <mat-error
-              *ngIf="inputForm.get('groupName').hasError('groupNameSamed')"
-            >
-              {{ 'group.errors.sameNameExist' | translate }}
-            </mat-error>
-          </mat-form-field>
-        </form>
-
-        <div class="btn-box">
-          <button mat-stroked-button (click)="onClickAddGroupCancel()">
-            {{ 'common.messages.close' | translate }}
-          </button>
           <button
-            mat-stroked-button
+            mat-button
-            color="accent"
+            matSuffix
-            (click)="onClickAddGroup(inputGroupName.value)"
+            mat-icon-button
-            class="mat-accent"
+            aria-label="Clear"
-            [disabled]="inputForm.invalid"
+            (click)="inputGroupName.value = ''"
           >
-            {{ 'group.addNew' | translate }}
+            <mat-icon>close</mat-icon>
           </button>
-        </div>
+          <mat-hint align="end"
+            >{{ inputGroupName.value?.length || 0 }}/20</mat-hint
+          >
+          <mat-error
+            *ngIf="inputForm.get('groupName').hasError('groupNameBanned')"
+          >
+            {{
+              'group.errors.bannedWords'
+                | translate: { bannedWords: bannedWords.join(',') }
+            }}
+          </mat-error>
+          <mat-error
+            *ngIf="inputForm.get('groupName').hasError('groupNameSamed')"
+          >
+            {{ 'group.errors.sameNameExist' | translate }}
+          </mat-error>
+        </mat-form-field>
+      </form>
+
+      <div class="btn-box">
+        <button mat-stroked-button (click)="onClickAddGroupCancel()">
+          {{ 'common.messages.close' | translate }}
+        </button>
+        <button
+          mat-stroked-button
+          color="accent"
+          (click)="onClickAddGroup(inputGroupName.value)"
+          class="mat-accent"
+          [disabled]="inputForm.invalid"
+        >
+          {{ 'group.addNew' | translate }}
+        </button>
       </div>
     </div>
     <mat-selection-list #groups>
-      <mat-list-option
+      <perfect-scrollbar fxFlex="1 1 auto">
-        *ngFor="let groupBuddy of groupBuddyList$ | async"
+        <mat-list-option
-        [value]="groupBuddy.group"
+          *ngFor="let groupBuddy of groupBuddyList$ | async"
-        [disabled]="getDisabled(groupBuddy)"
+          [value]="groupBuddy.group"
-        class="group-list"
+          [disabled]="getDisabled(groupBuddy)"
-      >
+          class="group-list"
-        <div class="group-name">
+        >
-          <span class="title-name ellipsis"> {{ groupBuddy.group.name }} </span>
+          <div class="group-name">
-          <span class="text-accent-color number"
+            <span class="title-name ellipsis">
-            >({{ groupBuddy.buddyList.length
+              {{ groupBuddy.group.name }}
-            }}{{ 'common.units.persons' | translate }})</span
+            </span>
-          >
+            <span class="text-accent-color number"
-        </div>
+              >({{ groupBuddy.buddyList.length
-      </mat-list-option>
+              }}{{ 'common.units.persons' | translate }})</span
+            >
+          </div>
+        </mat-list-option>
+      </perfect-scrollbar>
     </mat-selection-list>
+    <mat-card-actions class="button-form flex-row">
+      <button
+        mat-stroked-button
+        (click)="onClickChoice(false)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.no' | translate }}
+      </button>
+      <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+        {{ 'common.messages.yes' | translate }}
+      </button>
+    </mat-card-actions>
   </mat-card-content>
-
-  <mat-card-actions class="button-form flex-row">
-    <button
-      mat-stroked-button
-      (click)="onClickChoice(false)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.no' | translate }}
-    </button>
-    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
-      {{ 'common.messages.yes' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>

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

@@ -14,9 +14,10 @@
   width: 100%;
   padding: 10px;
 }
-.confirm-card {
+.selected-user {
-  min-width: 500px;
+  height: 100%;
   .mat-card-content {
+    position: relative;
   }
   .button-form {
     text-align: right;
@@ -40,12 +41,17 @@
       margin-left: 10px;
     }
   }
+  + .mat-selection-list {
+    border-top: 1px solid #999999;
+    height: calc(100% - 100px);
+  }
 }
-
+.input-groupname-box {
-.mat-selection-list {
+  + .mat-selection-list {
-  border-top: 1px solid #999999;
+    border-top: 1px solid #999999;
+    height: calc(100% - 200px);
+  }
 }
-
 .group-list {
   &.mat-list-item {
     border-bottom: 1px solid #dddddd;

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts

@@ -215,7 +215,7 @@ export class SelectGroupDialogComponent implements OnInit {
       ConfirmDialogData,
       ConfirmDialogResult
     >(ConfirmDialogComponent, {
-      width: '300px',
+      panelClass: 'miniSize-dialog',
       data: {
         title: this.translateService.instant('group.addNew'),
         html: this.translateService.instant('group.confirmAddNewWith', {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html

@@ -1,4 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z message-detail">
   <mat-card-header>
     <mat-card-title
       cdkDrag
@@ -257,20 +257,20 @@
         </mat-tab-group>
       </mat-drawer>
     </mat-drawer-container>
+    <mat-card-actions class="button-form flex-row">
+      <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
+        {{ 'common.messages.confirm' | translate }}
+      </button>
+      <button
+        mat-flat-button
+        *ngIf="messageDetail.msgInfo.type === MessageType.Receive"
+        (click)="onClickReply()"
+        class="mat-primary"
+      >
+        {{ 'message.sendReply' | translate }}
+      </button>
+    </mat-card-actions>
   </mat-card-content>
-  <mat-card-actions class="button-form flex-row">
-    <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
-      {{ 'common.messages.confirm' | translate }}
-    </button>
-    <button
-      mat-flat-button
-      *ngIf="messageDetail.msgInfo.type === MessageType.Receive"
-      (click)="onClickReply()"
-      class="mat-primary"
-    >
-      {{ 'message.sendReply' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>
 
 <mat-menu #messageMenu="matMenu" xPosition="after" yPosition="below">

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

@@ -1,24 +1,27 @@
-.mat-card-header {
+.message-detail {
-  .mat-card-header-text {
+  width: 100%;
-    margin: 0;
+  height: 100%;
+  .mat-card-header {
+    .mat-card-header-text {
+      margin: 0;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
   }
-  .btn-dialog-close {
-    font-size: 20px;
-    display: flex;
-    margin-left: auto;
-    align-self: flex-start;
-    color: #444444;
-  }
-}
-
-.confirm-card {
-  min-width: 500px;
   .mat-card-content {
-  }
+    mat-drawer-container {
-  .button-form {
+      height: calc(100% - 40px);
-    text-align: right;
+    }
-    .mat-primary {
+    .button-form {
-      margin-left: 4px;
+      text-align: right;
+      .mat-primary {
+        margin-left: 4px;
+      }
     }
   }
 }
@@ -45,6 +48,7 @@
 .message-container {
   background-color: #ffffff !important;
   .message-info {
+    height: 100%;
     /*.profile {
       display: flex;
       flex-flow: row;

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts

@@ -307,6 +307,7 @@ export class MessageDetailDialogComponent implements OnInit {
         AlertDialogData,
         AlertDialogResult
       >(AlertDialogComponent, {
+        panelClass: 'miniSize-dialog',
         data: {
           title: '',
           html: this.translateService.instant(
@@ -465,6 +466,7 @@ export class MessageDetailDialogComponent implements OnInit {
             ConfirmDialogData,
             ConfirmDialogResult
           >(ConfirmDialogComponent, {
+            panelClass: 'miniSize-dialog',
             data: {
               title: this.translateService.instant('message.cancelReservation'),
               html: this.translateService.instant(
@@ -488,6 +490,7 @@ export class MessageDetailDialogComponent implements OnInit {
             ConfirmDialogData,
             ConfirmDialogResult
           >(ConfirmDialogComponent, {
+            panelClass: 'miniSize-dialog',
             data: {
               title: this.translateService.instant('message.remove'),
               message: this.translateService.instant('message.confirmRemove')
@@ -509,8 +512,8 @@ export class MessageDetailDialogComponent implements OnInit {
             MessageWriteDialogData,
             MessageWriteDialogResult
           >(MessageWriteDialogComponent, {
-            width: '600px',
+            maxWidth: '90vw',
-            height: '600px',
+            maxHeight: '94vh',
             disableClose: true,
             hasBackdrop: false,
             data: {
@@ -558,6 +561,7 @@ export class MessageDetailDialogComponent implements OnInit {
         ConfirmDialogData,
         ConfirmDialogResult
       >(ConfirmDialogComponent, {
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('message.cancelSending'),
           message: this.translateService.instant('message.confirmCancelSending')

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.html

@@ -1,4 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z message-write">
   <mat-card-header>
     <mat-card-title
       cdkDrag

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

@@ -1,21 +1,17 @@
-.mat-card-header {
+.message-write {
-  .mat-card-header-text {
+  width: 100%;
-    margin: 0;
-  }
-  .btn-dialog-close {
-    font-size: 20px;
-    display: flex;
-    margin-left: auto;
-    align-self: flex-start;
-    color: #444444;
-  }
-}
-
-.confirm-card {
-  min-width: 500px;
   height: 100%;
 
-  mat-card-content {
+  .mat-card-header {
-    height: calc(100% - 40px);
+    .mat-card-header-text {
+      margin: 0;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.ts

@@ -124,7 +124,8 @@ export class MessageWriteDialogComponent implements OnInit {
       CreateChatDialogData,
       CreateChatDialogResult
     >(CreateChatDialogComponent, {
-      width: '600px',
+      maxWidth: '94vw',
+      maxHeight: '90vh',
       data: {
         type: UserSelectDialogType.EditChatMember,
         title: this.translateService.instant('message.selectRecipient'),
@@ -247,6 +248,7 @@ export class MessageWriteDialogComponent implements OnInit {
                 AlertDialogData,
                 AlertDialogResult
               >(AlertDialogComponent, {
+                panelClass: 'miniSize-dialog',
                 data: {
                   title: this.translateService.instant('message.errors.label'),
                   message: errorMsg
@@ -359,6 +361,7 @@ export class MessageWriteDialogComponent implements OnInit {
                 AlertDialogData,
                 AlertDialogResult
               >(AlertDialogComponent, {
+                panelClass: 'miniSize-dialog',
                 data: {
                   title: this.translateService.instant('message.errors.label'),
                   message: errorMsg

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

@@ -68,17 +68,17 @@
         </ucap-profile-user-list-item> -->
       </cdk-virtual-scroll-viewport>
     </div>
+    <mat-card-actions class="button-frame  flex-row">
+      <button
+        mat-stroked-button
+        (click)="onClickChoice(false)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.cancel' | translate }}
+      </button>
+      <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+        {{ 'common.messages.apply' | translate }}
+      </button>
+    </mat-card-actions>
   </mat-card-content>
-  <mat-card-actions class="button-frame  flex-row">
-    <button
-      mat-stroked-button
-      (click)="onClickChoice(false)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.cancel' | translate }}
-    </button>
-    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
-      {{ 'common.messages.apply' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>

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

@@ -11,22 +11,24 @@
   }
 }
 
-.confirm-card {
+.selected-user-dialog {
-  min-width: 500px;
   .mat-card-content {
+    height: calc(100% - 80px);
     .item-list {
-      height: 450px;
+      height: calc(100% - 40px);
     }
-  }
+    .button-frame {
-  .button-frame {
+      text-align: right;
-    text-align: right;
+      margin: 0;
-    .mat-primary {
+      .mat-primary {
-      margin-left: 4px;
+        margin-left: 4px;
+      }
     }
   }
 }
 
 .selected-user-dialog {
+  height: 100%;
   .check-all {
     display: flex;
     border-bottom: 2px solid #444444;

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.ts

@@ -244,8 +244,8 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
         MessageWriteDialogData,
         MessageWriteDialogResult
       >(MessageWriteDialogComponent, {
-        width: '600px',
+        maxWidth: '90vw',
-        height: '600px',
+        maxHeight: '94vh',
         disableClose: true,
         hasBackdrop: false,
         data: {
@@ -265,6 +265,7 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
         AlertDialogData,
         AlertDialogResult
       >(AlertDialogComponent, {
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('call.errors.label'),
           html: this.translateService.instant('call.errors.cannotCallToUser')
@@ -277,48 +278,49 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
     calleeNumber = calleeNumber.replace(/\D/g, '');
 
     if (!!calleeNumber && calleeNumber.length > 0) {
-      const result = await this.dialogService.open<
+      // const result = await this.dialogService.open<
-        ConfirmDialogComponent,
+      //   ConfirmDialogComponent,
-        ConfirmDialogData,
+      //   ConfirmDialogData,
-        ConfirmDialogResult
+      //   ConfirmDialogResult
-      >(ConfirmDialogComponent, {
+      // >(ConfirmDialogComponent, {
-        width: '360px',
+      //   panelClass: 'miniSize-dialog',
-        data: {
+      //   data: {
-          title: this.translateService.instant('call.callTo'),
+      //     title: this.translateService.instant('call.callTo'),
-          html: this.translateService.instant('call.callWithNumber', {
+      //     html: this.translateService.instant('call.callWithNumber', {
-            phoneNumber: calleeNumber
+      //       phoneNumber: calleeNumber
-          })
+      //     })
-        }
+      //   }
-      });
+      // });
 
-      if (!!result && !!result.choice && result.choice) {
+      // if (!!result && !!result.choice && result.choice) {
-        this.callService
+      this.callService
-          .sendCall({
+        .sendCall({
-            userSeq: this.loginRes.userSeq,
+          userSeq: this.loginRes.userSeq,
-            deviceType: this.environmentsInfo.deviceType,
+          deviceType: this.environmentsInfo.deviceType,
-            tokenKey: this.loginRes.tokenString,
+          tokenKey: this.loginRes.tokenString,
-            calleeNumber
+          calleeNumber
-          })
+        })
-          .pipe(
+        .pipe(
-            take(1),
+          take(1),
-            map(res => {
+          map(res => {
-              if (res.responseCode === PromptMessageStatusCode.Success) {
+            if (res.responseCode === PromptMessageStatusCode.Success) {
-                this.logger.debug('SUCCESS');
+              this.logger.debug('SUCCESS');
-                this.logger.debug(res);
+              this.logger.debug(res);
-              } else {
+            } else {
-                this.logger.error(res);
+              this.logger.error(res);
-              }
+            }
-            }),
+          }),
-            catchError(error => of(this.logger.debug(error)))
+          catchError(error => of(this.logger.debug(error)))
-          )
+        )
-          .subscribe();
+        .subscribe();
-      }
+      // }
     } else {
       this.dialogService.open<
         AlertDialogComponent,
         AlertDialogData,
         AlertDialogResult
       >(AlertDialogComponent, {
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('call.errors.label'),
           html: this.translateService.instant(
@@ -340,6 +342,7 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
         AlertDialogData,
         AlertDialogResult
       >(AlertDialogComponent, {
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('sms.errors.label'),
           html: this.translateService.instant('sms.errors.haveNoPermission')
@@ -368,7 +371,6 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
         SelectGroupDialogData,
         SelectGroupDialogResult
       >(SelectGroupDialogComponent, {
-        width: '600px',
         data: {
           title: this.translateService.instant('group.selectTargetGroup')
         }
@@ -396,7 +398,7 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
         ConfirmDialogData,
         ConfirmDialogResult
       >(ConfirmDialogComponent, {
-        width: '360px',
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('group.removeBuddyFromGroup'),
           html: this.translateService.instant(

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html

@@ -1,4 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z integrated-search">
   <mat-card-header>
     <mat-card-title
       cdkDrag

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts

@@ -398,6 +398,8 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
               ProfileDialogData,
               ProfileDialogResult
             >(ProfileDialogComponent, {
+              maxWidth: '90vw',
+              height: '500px',
               data: {
                 userInfo: res.userInfo
               }

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

@@ -1,13 +1,9 @@
 .setting-frame {
   padding: 16px;
-  height: 100%;
+  height: calc(90vh - 50px);
-  width: 720px;
+  width: 100%;
   position: relative;
 
-  .mat-dialog-container {
-    position: relative;
-  }
-
   .mat-card-header {
     position: relative;
     width: 100%;
@@ -23,6 +19,7 @@
     }
   }
   .mat-card-content {
+    position: relative;
     flex: 0 0 auto;
     display: flex;
     align-items: flex-start;

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts

@@ -408,6 +408,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
               ProfileDialogData,
               ProfileDialogResult
             >(ProfileDialogComponent, {
+              maxWidth: '90vw',
+              height: '500px',
               data: {
                 userInfo: res.userInfo
               }
@@ -700,13 +702,12 @@ export class TopBarComponent implements OnInit, OnDestroy {
         IntegratedSearchDialogData,
         IntegratedSearchDialogResult
       >(IntegratedSearchDialogComponent, {
-        height: '90vh',
-        width: '96vw',
         data: {
           keyword
         },
         restoreFocus: false,
         hasBackdrop: false,
+        panelClass: 'fullSize-dialog',
         id: 'IntegratedSearchDialog'
       });
 
@@ -735,7 +736,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
       ConfirmDialogData,
       ConfirmDialogResult
     >(ConfirmDialogComponent, {
-      width: '400px',
+      panelClass: 'miniSize-dialog',
       data: {
         title: 'Clear & Logout?',
         html: 'Clear General Setting And Logout?'

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss

@@ -1,373 +1,15 @@
-$desktop-l-width: 1440px;
-$tablet-l-width: 1024px;
-$tablet-s-width: 768px;
-$mob-l-width: 640px;
-
-@mixin tab {
-  @media screen and (max-width: #{$tablet-l-width}), (max-height: #{$tablet-s-width}) {
-    @content;
-  }
-}
-
 .login {
   width: 100%;
-  background-size: cover;
+  height: 100%;
-  height: calc(100% - 50px);
-  background: #eaeff1;
-  margin-top: 50px;
-  overflow: hidden;
-  /*background: -webkit-linear-gradient(to top, #93a3af, #eaeff1);
-  background: linear-gradient(to top, #93a3af, #eaeff1);*/
-
   .login-wrapper {
-    flex: 1 0 auto;
+    display: flex;
-    background-color: #ffffff;
-    background-size: 100% auto;
-    position: relative;
     justify-content: center;
     align-items: center;
-    display: flex;
-  }
-}
-
-$main: #777;
-$back: #aaa;
-$accent: hsl(220, 50%, 40%);
-
-$sans: 'Open Sans', sans-serif;
-$heebo: 'Heebo', sans-serif;
-$hangul: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움';
-
-$base: 3vh;
-
-$time: 1800ms;
-
-$ease-out: cubic-bezier(0.26, 0.005, 0.135, 1);
-$ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-
-@mixin word-break-keep {
-  word-break: keep-all;
-}
-
-.slider {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  //background: $main;
-  overflow: hidden;
-  &_wrap {
-    position: absolute;
     width: 100%;
     height: 100%;
-    transform: translateX(100%);
+    .login-form-box {
-    top: 0%;
+      width: 300px;
-    left: 0;
+      height: 400px;
-    right: auto;
-    overflow: hidden;
-    transition: transform $time/4 $ease-in-out;
-    transform-origin: 0% 50%;
-    transition-delay: $time/4;
-    opacity: 0;
-    &-hacked {
-      opacity: 1;
-    }
-  }
-
-  &_back {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-size: auto 100%;
-    background-position: center;
-    background-repeat: none;
-    transition: filter $time/4 $ease-in-out;
-    background-color: #2d3a4a;
-  }
-
-  &_inner {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0%;
-    background-size: auto 133.3333%;
-    background-position: center;
-    background-repeat: none;
-    transform: scale(0.7);
-    transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
-      opacity $time/4 step-end;
-    opacity: 0;
-    //box-shadow: 0 $base $base rgba(darken($accent, 50%), 0);
-    padding: $base * 3;
-    box-sizing: border-box;
-    border: 1px solid #ffffff;
-  }
-  &_header {
-    display: flex;
-    flex-flow: row;
-    width: 40%;
-    height: 20px;
-    justify-content: center;
-    font-size: $base * 0.6;
-    color: #ffffff;
-    .company-name {
-      flex: 0 0 auto;
-      padding-right: 20px;
-    }
-    .h-line {
-      flex: 1 1 auto;
-      align-self: center;
-      height: 2px;
-      border-bottom: 1px solid #ffffff;
-    }
-  }
-  &_content {
-    position: relative;
-    top: 64%;
-    width: 40%;
-    transform: translateY(-50%);
-    color: white;
-    font-family: $hangul;
-    opacity: 0;
-    transition: opacity $time/4;
-    h1 {
-      font-weight: 900;
-      font-size: $base * 1.24;
-      line-height: 1.2;
-      margin-bottom: $base/2;
-      pointer-events: none;
-      text-shadow: 0 $base/8 $base/4 rgba(darken($accent, 50%), 0.1);
-      @include word-break-keep();
-    }
-    p {
-      font-size: $base * 0.64;
-      line-height: $base * 0.9;
-      margin-bottom: $base/2;
-      @include word-break-keep();
-    }
-  }
-  &_link {
-    cursor: pointer;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    justify-items: center;
-    font-family: $heebo;
-    font-size: 1.2rem;
-    letter-spacing: $base * 0.1;
-    font-weight: 100;
-    display: block;
-    bottom: 10%;
-    color: #ffffff;
-    padding: 10px 60px 10px 30px;
-    border-radius: 100px;
-    color: #00dbed;
-    width: $base * 5;
-    // next버튼 숨김
-    display: none;
-    &:before {
-      content: '';
-      border-top: 1px solid white;
-      border-right: 1px solid white;
-      display: block;
-      width: $base/3;
-      height: $base/3;
-      transform: translateX(0) translateY(-50%) rotate(45deg);
-      position: absolute;
-      font-family: $heebo;
-      font-weight: 100;
-      top: 50%;
-      left: $base * 4;
-    }
-    &:hover {
-      background-color: #134a67;
-      color: #ffffff;
-    }
-  }
-
-  &_slide {
-    position: absolute;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    transition: transform $time/3 $ease-in-out;
-    transition-delay: $time/3;
-    pointer-events: none;
-    z-index: 0;
-
-    &-active {
-      transform: translatex(0%);
-      z-index: 2;
-      .slider_wrap {
-        transform: translateX(0);
-        transform-origin: 100% 50%;
-        opacity: 1;
-        animation: none;
-      }
-      .slider_back {
-        filter: blur(#{$base * 0.2});
-        transition: filter $time/2 $ease-in-out;
-        transition-delay: $time/2 !important;
-      }
-      .slider_inner {
-        transform: scale(0.7);
-        box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2);
-        pointer-events: auto;
-        opacity: 1;
-        transition: transform $time/2 $ease-in-out,
-          box-shadow $time/2 $ease-in-out, opacity 1ms step-end;
-        transition-delay: $time/2;
-      }
-      .slider_content {
-        opacity: 1;
-        transition-delay: $time * 3/4;
-      }
-    }
-
-    &:not(.slider_slide-active) .slider_wrap {
-      @keyframes hack {
-        0% {
-          transform: translateX(0);
-          opacity: 1;
-        }
-        50% {
-          transform: translateX(-100vw);
-          opacity: 1;
-        }
-        51% {
-          transform: translateX(-100vw);
-          opacity: 0;
-        }
-        52% {
-          transform: translateX(100vw);
-          opacity: 0;
-        }
-        100% {
-          transform: translateX(100vw);
-          opacity: 1;
-        }
-      }
-      animation-name: hack;
-      animation-duration: $time/2;
-      animation-delay: $time/4;
-      animation-timing-function: $ease-in-out;
-    }
-
-    &:nth-child(1) .slider_back,
-    &:nth-child(1) .slider_inner {
-      // background-image: url(/assets/images/login/bg_login01.png);
-      //background: #eee;
-    }
-    &:nth-child(2) .slider_back,
-    &:nth-child(2) .slider_inner {
-      // background-image: url(/assets/images/login/bg_login02.png);
-      //background: #aaa;
-    }
-    &:nth-child(3) .slider_back,
-    &:nth-child(3) .slider_inner {
-      // background-image: url(/assets/images/login/bg_login03.png);
-      //background: #888;
-    }
-  }
-}
-
-::ng-deep .login-form-box {
-  position: absolute;
-  width: 20vw;
-  height: 50%;
-  min-height: 480px;
-  display: flex;
-  justify-content: flex-end;
-  z-index: 100;
-  @media screen and (max-width: #{$desktop-l-width}) {
-    width: 24vw;
-    min-height: 480px;
-  }
-
-  @media screen and (max-width: #{$tablet-l-width}) {
-    width: 36vw;
-    min-height: 420px;
-  }
-  .mat-form-field-label-wrapper {
-    color: #06b2d6;
-  }
-  /*.mat-form-field {
-    padding-top: 20px;
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-      .mat-form-field-infix {
-        padding-top: 0;
-        border: 0;
-      }
-      .mat-form-field-label-wrapper {
-        top: -1.4em;
-      }
-      .mat-form-field-underline {
-        bottom: 0;
-      }
-      //min-size 반응형 적용
-      @include tab {
-        .mat-form-field-infix {
-          input {
-            font-size: 0.9em;
-          }
-        }
-        .mat-form-field-label-wrapper {
-          font-size: 0.9em;
-        }
-        .mat-form-field-subscript-wrapper {
-          .mat-error {
-            font-size: 0.8em;
-          }
-        }
-        &.mat-focused,
-        &:not(.mat-form-field-hide-placeholder) {
-          .mat-form-field-label-wrapper {
-            font-size: 0;
-          }
-        }
-      }
-    }
-  }
-  .error-container {
-    padding-top: 10px;
-  }*/
-}
-
-::ng-deep .notice {
-  ol {
-    li {
-      list-style: decimal;
-      margin-bottom: 14px;
-      margin-left: 20px;
-      span {
-        color: #ff5722;
-      }
-    }
-  }
-}
-
-@media all and (max-width: 1400px) {
-  .slider {
-    &_content {
-      transform: translateY(-50%);
-      color: white;
-      font-family: $heebo;
-      opacity: 0;
-      transition: opacity $time/4;
-      h1 {
-        font-weight: 900;
-        font-size: $base * 1.2;
-        margin-bottom: $base;
-      }
-      p {
-        display: none;
-      }
-    }
-    &-active {
-      .slider_inner {
-        transform: scale(0.9);
-      }
     }
   }
 }

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.ts

@@ -168,7 +168,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                 AlertDialogData,
                 AlertDialogResult
               >(AlertDialogComponent, {
-                width: '360px',
+                panelClass: 'miniSize-dialog',
                 data: {
                   title: '',
                   html: this.translateService.instant(
@@ -184,7 +184,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                 AlertDialogData,
                 AlertDialogResult
               >(AlertDialogComponent, {
-                width: '360px',
+                panelClass: 'miniSize-dialog',
                 data: {
                   title: '',
                   html: this.translateService.instant(
@@ -234,7 +234,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                 AlertDialogData,
                 AlertDialogResult
               >(AlertDialogComponent, {
-                width: '360px',
+                panelClass: 'miniSize-dialog',
                 data: {
                   title: '',
                   html: this.translateService.instant(
@@ -256,7 +256,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                 AlertDialogData,
                 AlertDialogResult
               >(AlertDialogComponent, {
-                width: '360px',
+                panelClass: 'miniSize-dialog',
                 data: {
                   title: this.translateService.instant(
                     'accounts.errors.loginFailed'
@@ -298,7 +298,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
         AlertDialogData,
         AlertDialogResult
       >(AlertDialogComponent, {
-        width: '360px',
+        panelClass: 'miniSize-dialog',
         data: {
           title: '',
           html: msg
@@ -381,7 +381,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                   AlertDialogData,
                   AlertDialogResult
                 >(AlertDialogComponent, {
-                  width: '360px',
+                  panelClass: 'miniSize-dialog',
                   data: {
                     title: this.translateService.instant(
                       'accounts.errors.loginFailed'
@@ -402,7 +402,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                 AlertDialogData,
                 AlertDialogResult
               >(AlertDialogComponent, {
-                width: '360px',
+                panelClass: 'miniSize-dialog',
                 data: {
                   title: this.translateService.instant(
                     'accounts.errors.loginFailed'
@@ -442,6 +442,8 @@ export class LoginPageComponent implements OnInit, OnDestroy {
       NoticeDialogResult
     >(NoticeDialogComponent, {
       width: '600px',
+      height: '540px',
+      panelClass: 'notice-dialog',
       data: {
         title: '이용시 주의사항',
         html: `

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts

@@ -355,6 +355,8 @@ export class MainPageComponent implements OnInit, OnDestroy {
               ProfileDialogData,
               ProfileDialogResult
             >(ProfileDialogComponent, {
+              maxWidth: '90vw',
+              height: '500px',
               data: {
                 userInfo: res.userInfo,
                 openProfileOptions: params.openProfileOptions
@@ -374,6 +376,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
         AlertDialogData,
         AlertDialogResult
       >(AlertDialogComponent, {
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('call.errors.label'),
           html: this.translateService.instant('call.errors.cannotCallToUser')
@@ -386,43 +389,44 @@ export class MainPageComponent implements OnInit, OnDestroy {
     calleeNumber = calleeNumber.replace(/\D/g, '');
 
     if (!!calleeNumber && calleeNumber.length > 0) {
-      const result = await this.dialogService.open<
+      // const result = await this.dialogService.open<
-        ConfirmDialogComponent,
+      //   ConfirmDialogComponent,
-        ConfirmDialogData,
+      //   ConfirmDialogData,
-        ConfirmDialogResult
+      //   ConfirmDialogResult
-      >(ConfirmDialogComponent, {
+      // >(ConfirmDialogComponent, {
-        width: '360px',
+      //   panelClass: 'miniSize-dialog',
-        data: {
+      //   data: {
-          title: this.translateService.instant('call.callTo'),
+      //     title: this.translateService.instant('call.callTo'),
-          html: this.translateService.instant('call.callWithNumber', {
+      //     html: this.translateService.instant('call.callWithNumber', {
-            phoneNumber: calleeNumber
+      //       phoneNumber: calleeNumber
-          })
+      //     })
-        }
+      //   }
-      });
+      // });
 
-      if (!!result && !!result.choice && result.choice) {
+      // if (!!result && !!result.choice && result.choice) {
-        this.callService
+      this.callService
-          .sendCall({
+        .sendCall({
-            userSeq: this.loginRes.userSeq,
+          userSeq: this.loginRes.userSeq,
-            deviceType: this.environmentsInfo.deviceType,
+          deviceType: this.environmentsInfo.deviceType,
-            tokenKey: this.loginRes.tokenString,
+          tokenKey: this.loginRes.tokenString,
-            calleeNumber
+          calleeNumber
-          })
+        })
-          .pipe(
+        .pipe(
-            take(1),
+          take(1),
-            map(res => {
+          map(res => {
-              this.logger.debug(res);
+            this.logger.debug(res);
-            }),
+          }),
-            catchError(error => of(this.logger.debug(error)))
+          catchError(error => of(this.logger.debug(error)))
-          )
+        )
-          .subscribe();
+        .subscribe();
-      }
+      // }
     } else {
       this.dialogService.open<
         AlertDialogComponent,
         AlertDialogData,
         AlertDialogResult
       >(AlertDialogComponent, {
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('call.errors.label'),
           html: this.translateService.instant(
@@ -444,6 +448,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
         AlertDialogData,
         AlertDialogResult
       >(AlertDialogComponent, {
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('sms.errors.label'),
           html: this.translateService.instant('sms.errors.haveNoPermission')

projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts

@@ -155,6 +155,7 @@ export class AppMessengerResolver implements Resolve<void> {
                 AlertDialogData,
                 AlertDialogResult
               >(AlertDialogComponent, {
+                panelClass: 'miniSize-dialog',
                 disableClose: true,
                 data: {
                   title: 'Warnning!!',

projects/ucap-webmessenger-app/src/app/services/notification.service.ts

@@ -1,6 +1,13 @@
 import { Injectable, Inject } from '@angular/core';
 
-import { tap, withLatestFrom } from 'rxjs/operators';
+import {
+  tap,
+  withLatestFrom,
+  take,
+  map,
+  catchError,
+  finalize
+} from 'rxjs/operators';
 
 import { Store, select } from '@ngrx/store';
 
@@ -116,7 +123,12 @@ import { environment } from '../../environments/environment';
 import { NotificationMethod, LocaleCode } from '@ucap-webmessenger/core';
 import { Dictionary } from '@ngrx/entity';
 import { MessageType } from '@ucap-webmessenger/api-message';
-import { LogoutInfo, KEY_LOGOUT_INFO, KEY_VER_INFO } from '@app/types';
+import {
+  LogoutInfo,
+  KEY_LOGOUT_INFO,
+  KEY_VER_INFO,
+  KEY_LOGIN_RES_INFO
+} from '@app/types';
 import { TranslateService } from '@ngx-translate/core';
 import { deleteMessageSuccess } from '@app/store/messenger/message';
 import { ServerErrorCode } from '@ucap-webmessenger/protocol';
@@ -138,6 +150,8 @@ import { UserInfo, RoomUserData } from '@ucap-webmessenger/protocol-sync';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { QueryProtocolService } from '@ucap-webmessenger/protocol-query';
 import { UserInfoListState } from '@app/store/messenger/room';
+import { DaesangProtocolService } from '@ucap-webmessenger/daesang';
+import { of } from 'rxjs';
 
 @Injectable()
 export class AppNotificationService {
@@ -149,6 +163,7 @@ export class AppNotificationService {
     private groupProtocolService: GroupProtocolService,
     private buddyProtocolService: BuddyProtocolService,
     private queryProtocolService: QueryProtocolService,
+    private daesangProtocolService: DaesangProtocolService,
     private statusProtocolService: StatusProtocolService,
     private translateService: TranslateService,
     private ucapTranslateService: UcapTranslateService,
@@ -233,25 +248,10 @@ export class AppNotificationService {
               (state: any) =>
                 state.messenger.sync.buddy2.entities as Dictionary<UserInfo>
             )
-          ),
-          this.store.pipe(
-            select(
-              (state: any) =>
-                state.messenger.sync.roomUserShort.entities as Dictionary<
-                  RoomUserData
-                >
-            )
           )
         ),
         tap(
-          ([
+          ([notiOrRes, curRoomInfo, curRoomUserInfo, roomList, buddyList]) => {
-            notiOrRes,
-            curRoomInfo,
-            curRoomUserInfo,
-            roomList,
-            buddyList,
-            roomUserShorts
-          ]) => {
             switch (notiOrRes.SSVC_TYPE) {
               case SSVC_TYPE_EVENT_SEND_RES:
               case SSVC_TYPE_EVENT_SEND_NOTI:
@@ -356,32 +356,70 @@ export class AppNotificationService {
                               senderInfo = curRoomUserInfo[noti.SENDER_SEQ];
                             }
 
-                            // STEP 3 >> In All Room Users.
+                            // STEP 3 >> user protocol
                             if (!senderInfo) {
-                              for (const key in roomUserShorts) {
+                              const loginRes = this.sessionStorageService.get<
-                                if (key === undefined) {
+                                LoginResponse
-                                  continue;
+                              >(KEY_LOGIN_RES_INFO);
-                                }
 
-                                if (roomUserShorts.hasOwnProperty(key)) {
+                              this.daesangProtocolService
-                                  const element = roomUserShorts[key];
+                                .dataUserDaesang({
-                                  const filteredUserInfos = element.userInfos.filter(
+                                  divCd: 'OPENNOTI',
-                                    info => info.seq === noti.SENDER_SEQ
+                                  seq: noti.SENDER_SEQ,
-                                  );
+                                  senderCompanyCode:
+                                    loginRes.userInfo.companyCode,
+                                  senderEmployeeType:
+                                    loginRes.userInfo.employeeType
+                                })
+                                .pipe(
+                                  take(1),
+                                  map(res => {
+                                    if (!!res && !!res.userInfo) {
+                                      senderInfo = res.userInfo;
+                                      let name = senderInfo.name;
+                                      let grade = senderInfo.grade;
 
-                                  if (
+                                      switch (
-                                    !!filteredUserInfos &&
+                                        this.ucapTranslateService.currentLang.toUpperCase()
-                                    filteredUserInfos.length > 0
+                                      ) {
-                                  ) {
+                                        case LocaleCode.English:
-                                    senderInfo = filteredUserInfos[0];
+                                          name = senderInfo.nameEn;
-                                    break;
+                                          grade = senderInfo.gradeEn;
-                                  }
+                                          break;
-                                }
+                                        case LocaleCode.Chinese:
-                              }
+                                          name = senderInfo.nameCn;
-                            }
+                                          grade = senderInfo.gradeCn;
+                                          break;
+                                      }
 
-                            // Sender Info setting.
+                                      notiReq.title = this.translateService.instant(
-                            if (!!senderInfo) {
+                                        'notification.titleChatEventArrivedByUser',
+                                        {
+                                          userInfo: !!grade
+                                            ? `${name} ${grade}`
+                                            : name
+                                        }
+                                      );
+
+                                      // Image set.
+                                      if (!!senderInfo.profileImageFile) {
+                                        const sessionVerinfo = this.sessionStorageService.get<
+                                          VersionInfo2Response
+                                        >(KEY_VER_INFO);
+                                        notiReq.image = `${sessionVerinfo.profileRoot}${senderInfo.profileImageFile}`;
+                                      }
+                                    }
+                                  }),
+                                  catchError(error => {
+                                    return of();
+                                  }),
+                                  finalize(() => {
+                                    this.nativeService.notify(notiReq);
+                                  })
+                                )
+                                .subscribe();
+                            } else {
+                              // Sender Info setting.
                               // name set
                               let name = senderInfo.name;
                               let grade = senderInfo.grade;
@@ -413,10 +451,10 @@ export class AppNotificationService {
                                 >(KEY_VER_INFO);
                                 notiReq.image = `${sessionVerinfo.profileRoot}${senderInfo.profileImageFile}`;
                               }
-                            }
 
-                            // express noti popup
+                              // express noti popup
-                            this.nativeService.notify(notiReq);
+                              this.nativeService.notify(notiReq);
+                            }
                           }
                         }
                       }

projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts

@@ -283,6 +283,7 @@ export class Effects {
             ConfirmDialogData,
             ConfirmDialogResult
           >(ConfirmDialogComponent, {
+            panelClass: 'miniSize-dialog',
             data: {
               title: this.translateService.instant('accounts.logout'),
               message: this.translateService.instant('accounts.confirmLogout')
@@ -334,8 +335,7 @@ export class Effects {
               ConfirmDialogData,
               ConfirmDialogResult
             >(ConfirmDialogComponent, {
-              width: '100%',
+              panelClass: 'miniSize-dialog',
-              height: '500px',
               disableClose: true,
               data: {
                 title: this.translateService.instant(
@@ -365,8 +365,7 @@ export class Effects {
               ConfirmDialogData,
               ConfirmDialogResult
             >(ConfirmDialogComponent, {
-              width: '100%',
+              panelClass: 'miniSize-dialog',
-              height: '500px',
               disableClose: true,
               data: {
                 title: this.translateService.instant('accounts.resetPassword'),
@@ -391,6 +390,7 @@ export class Effects {
               AlertDialogData,
               AlertDialogResult
             >(AlertDialogComponent, {
+              panelClass: 'miniSize-dialog',
               data: {
                 title: this.translateService.instant(
                   'accounts.passwordExpired'
@@ -526,7 +526,7 @@ export class Effects {
             AlertDialogData,
             AlertDialogResult
           >(AlertDialogComponent, {
-            width: '360px',
+            panelClass: 'miniSize-dialog',
             disableClose: true,
             data: {
               title: this.translateService.instant('accounts.changePassword'),

projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts

@@ -371,7 +371,7 @@ export class Effects {
                             AlertDialogData,
                             AlertDialogResult
                           >(AlertDialogComponent, {
-                            width: '360px',
+                            panelClass: 'miniSize-dialog',
                             disableClose: true,
                             data: {
                               title: '',

projects/ucap-webmessenger-app/src/app/store/messenger/room/effects.ts

@@ -82,7 +82,6 @@ import {
   AlertDialogData,
   AlertDialogResult
 } from '@ucap-webmessenger/ui';
-import { ActivatedRouteSnapshot } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 
 @Injectable()
@@ -112,6 +111,7 @@ export class Effects {
               AlertDialogData,
               AlertDialogResult
             >(AlertDialogComponent, {
+              panelClass: 'miniSize-dialog',
               disableClose: true,
               data: {
                 title: 'Warnning!!',
@@ -299,6 +299,7 @@ export class Effects {
             AlertDialogData,
             AlertDialogResult
           >(AlertDialogComponent, {
+            panelClass: 'miniSize-dialog',
             data: {
               title: this.translateService.instant('chat.errors.label'),
               html: this.translateService.instant(

projects/ucap-webmessenger-app/src/app/store/messenger/settings/effects.ts

@@ -43,10 +43,8 @@ export class Effects {
               MessengerSettingsDialogData,
               MessengerSettingsDialogResult
             >(MessengerSettingsDialogComponent, {
-              width: '800px',
+              maxWidth: '94vw',
-              maxWidth: '800px',
+              maxHeight: '90vh',
-              height: '800px',
-              minHeight: '800px',
               disableClose: false,
               data: {}
             });
@@ -76,6 +74,7 @@ export class Effects {
               AlertDialogData,
               AlertDialogResult
             >(AlertDialogComponent, {
+              panelClass: 'miniSize-dialog',
               disableClose: true,
               data: {
                 title: 'Warnning!!',

projects/ucap-webmessenger-app/src/app/store/messenger/status/effects.ts

@@ -5,6 +5,7 @@ import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 
 import { NGXLogger } from 'ngx-logger';
+import * as RoomStore from '@app/store/messenger/room';
 import * as SyncStore from '@app/store/messenger/sync';
 import * as AuthStore from '@app/store/account/authentication';
 import {
@@ -143,6 +144,25 @@ export class Effects {
     { dispatch: false }
   );
 
+  mroomUserStatusCheck$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(RoomStore.infoSuccess),
+        map(action => action.userInfoList),
+        tap(userInfoList => {
+          if (!!userInfoList && userInfoList.length > 0) {
+            this.store.dispatch(
+              bulkInfo({
+                divCd: 'roomuserBulk',
+                userSeqs: userInfoList.map(userinfo => userinfo.seq)
+              })
+            );
+          }
+        })
+      ),
+    { dispatch: false }
+  );
+
   constructor(
     private actions$: Actions,
     private store: Store<any>,

projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts

@@ -453,6 +453,7 @@ export class Effects {
                 AlertDialogData,
                 AlertDialogResult
               >(AlertDialogComponent, {
+                panelClass: 'miniSize-dialog',
                 data: {
                   title: this.translateService.instant('chat.errors.label'),
                   html: this.translateService.instant(

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -244,6 +244,8 @@
     "btnSticker": "Sticker",
     "btnTranslate": "Translate",
     "noRoomUser": "No chat users",
+    "existOfflineUser": "{{offlineUser}} may not respond because it is [offline].",
+    "existOfflineUsers": "Some chat partners may not respond because they are not online.",
     "event": {
       "inviteToRoomWith": "{{owner}} invited {{inviter}}.",
       "exitFromRoomWith": "{{exitor}} has left.",

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -244,6 +244,8 @@
     "btnSticker": "스티커",
     "btnTranslate": "번역",
     "noRoomUser": "대화상대 없음",
+    "existOfflineUser": "{{offlineUser}}님이 [오프라인]이므로 응답하지 않을 수도 있습니다.",
+    "existOfflineUsers": "일부 대화상대는 온라인 상태가 아니어서 응답하지 않을 수도 있습니다.",
     "event": {
       "inviteToRoomWith": "{{owner}}이 {{inviter}}을 초대했습니다.",
       "exitFromRoomWith": "{{exitor}}님이 퇴장하셨습니다.",

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

@@ -55,13 +55,13 @@ $lg-red: (
   50: #ffffff,
   100: #fff9fc,
   200: #f1e1e5,
-  /*300: #f06292,*/ 300: #ef4c73,
+  300: #ef4c73,
   400: #ec407a,
   500: #ed097e,
   600: #d81b60,
   700: #c2185b,
   800: #ad1457,
-  /*900: #880e4f,*/ 900: #5f2a41,
+  900: #5f2a41,
   A100: #ff80ab,
   A200: #ff4081,
   A400: #ff3399,
@@ -291,29 +291,12 @@ $daesang-grey: (
   .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
     background-color: mat-color($accent, 700);
     cursor: pointer;
-    .mat-chip-remove {
-      opacity: 0.6;
-    }
   }
 
   .load-container .loader:after {
     background-color: mat-color($accent, 300);
   }
 
-  .ps__rail-y {
-    & > .ps__thumb-y {
-      margin-right: -2px;
-    }
-  }
-
-  .cdk-virtual-scroll-orientation-vertical {
-    .cdk-virtual-scroll-content-wrapper {
-      width: 100%;
-      height: 100%;
-      contain: none;
-    }
-  }
-
   .global-menu {
     .mat-tab-label[aria-selected='true'] {
       .mat-tab-label-content {
@@ -372,7 +355,7 @@ $daesang-grey: (
     color: #ffffff;
   }
 
-  //탭개수에 의한 width 정의
+  //[S]탭개수에 의한 width 정의
   .mat-tab-group {
     &.tab_num2 {
       .mat-tab-label {
@@ -394,8 +377,9 @@ $daesang-grey: (
       border: none;
     }
   }
+  //[E]탭개수에 의한 width 정의
 
-  //쪽지 라디오 버튼 정렬
+  //[S]쪽지 라디오 버튼 정렬
   .message-box {
     .mat-radio-label {
       .mat-radio-label-content {
@@ -403,10 +387,23 @@ $daesang-grey: (
       }
     }
   }
+  //[E]쪽지 라디오 버튼 정렬
+
+  //[S]mat-tab-group
+  /*mat-tab-group {
+    display: flex;
+    flex-direction: row;
+    .mat-tab-header {
+      width: 100%;
+      .mat-tab-label-container {
+        width: 100%;
+      }
+    }
+  }*/
 
   mat-tab-group[vertical] {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     .mat-tab-header {
       border-bottom: none;
       .mat-tab-labels {
@@ -435,6 +432,32 @@ $daesang-grey: (
     }
   }
 
+  //설정 general-theme
+  .theme-list {
+    .mat-tab-header {
+      width: 100%;
+      border: none !important;
+      .mat-tab-labels {
+        position: relative;
+        width: 100%;
+        flex-direction: row !important;
+        .mat-tab-label {
+          width: 140px;
+          height: 120px;
+          &.mat-tab-label-active {
+            opacity: 1;
+          }
+          .mat-tab-label-content {
+            position: relative;
+            flex-flow: column;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+  //[E]mat-tab-group
+
   nav[mat-tab-nav-bar][vertical] {
     display: flex;
     flex-direction: row !important;
@@ -466,7 +489,7 @@ $daesang-grey: (
     }
   }
 
-  //대화 말풍선 global 적용
+  //[S]대화 말풍선 global 적용
   .message-row {
     .message-main {
       .bubble {
@@ -502,8 +525,22 @@ $daesang-grey: (
       }
     }
   }
+  //[E]대화 말풍선 global 적용
 
-  //[s] 번역
+  //[S]스티커
+  .sticker-selector {
+    .mat-tab-header {
+      .mat-tab-label {
+        min-width: 16%;
+        @media screen and (max-width: #{$tablet-s-width}) {
+          padding: 0 10px;
+        }
+      }
+    }
+  }
+  //[E]스티커
+
+  //[S]번역
   .translationForm {
     background-color: mat-color($accent, 200, 0.4);
     .select-language {
@@ -531,6 +568,7 @@ $daesang-grey: (
   .translation-preview {
     background-color: mat-color($accent, 900, 0.8);
   }
+  //[E] 번역
 
   .tree-has-child {
     li {
@@ -540,6 +578,16 @@ $daesang-grey: (
       }
     }
   }
+
+  .mat-calendar {
+    mat-calendar-header {
+      .mat-calendar-header {
+        .mat-calendar-controls {
+          margin: 0;
+        }
+      }
+    }
+  }
   .mat-calendar-body-selected {
     background-color: mat-color($accent);
   }

projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts

@@ -213,6 +213,8 @@ export class BrowserNativeService extends NativeService {
     });
   }
 
+  onFlashFlame(): void {}
+  offFlashFlame(): void {}
   windowStateChanged(): Observable<WindowState> {
     return new Observable<WindowState>(subscriber => {
       try {

projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts

@@ -352,6 +352,12 @@ export class ElectronNativeService implements NativeService {
     });
   }
 
+  onFlashFlame(): void {
+    this.ipcRenderer.send(WindowStateChannel.OnFlashFrame);
+  }
+  offFlashFlame(): void {
+    this.ipcRenderer.send(WindowStateChannel.OffFlashFrame);
+  }
   windowStateChanged(): Observable<WindowState> {
     if (!this.windowStateChangedSubject) {
       this.windowStateChangedSubject = new Subject<WindowState>();

projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts

@@ -47,7 +47,9 @@ export enum ProcessChannel {
 
 export enum WindowStateChannel {
   Changed = 'UCAP::windowState::windowStateChanged',
-  FocuseChanged = 'UCAP::windowState::windowFocusStateChanged'
+  FocuseChanged = 'UCAP::windowState::windowFocusStateChanged',
+  OnFlashFrame = 'UCAP::windowState::OnFlashFrame',
+  OffFlashFrame = 'UCAP::windowState::OffFlashFrame'
 }
 
 export enum IdleStateChannel {

projects/ucap-webmessenger-native/src/lib/services/native.service.ts

@@ -70,6 +70,8 @@ export abstract class NativeService {
 
   abstract executeProcess(executableName: string): Promise<number>;
 
+  abstract onFlashFlame(): void;
+  abstract offFlashFlame(): void;
   abstract windowStateChanged(): Observable<WindowState>;
   abstract windowClose(): void;
   abstract windowMinimize(): void;

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss

@@ -159,7 +159,7 @@ $login-max-height: 800px;
   .policy {
     cursor: pointer;
     position: absolute;
-    bottom: 2vh;
+    bottom: 0;
     display: block;
     background-color: #58b0b1;
     width: 100%;

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

@@ -2,39 +2,39 @@
   <form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
     <perfect-scrollbar>
       <div class="write-form">
-      <div class="add-row">
+        <div class="add-row">
-        <button
+          <button
-          mat-button
+            mat-button
-          (click)="onClickReceiverList()"
+            (click)="onClickReceiverList()"
-          class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
+            class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
-        >
+          >
-          <mat-icon>add</mat-icon>
+            <mat-icon>add</mat-icon>
-          <span class="mat-fab__label">{{
+            <span class="mat-fab__label">{{
-            'message.addReceiver' | translate
+              'message.addReceiver' | translate
-          }}</span>
+            }}</span>
-        </button>
+          </button>
-        <span
+          <span
-          *ngIf="!!receiverList && receiverList.length > 0"
+            *ngIf="!!receiverList && receiverList.length > 0"
-          class="receiver-sum text-accent-color"
+            class="receiver-sum text-accent-color"
-        >
+          >
-          {{
+            {{
-            'message.countOfReceiver'
+              'message.countOfReceiver'
-              | translate: { count: receiverList.length }
+                | translate: { count: receiverList.length }
-          }}
+            }}
-        </span>
+          </span>
-      </div>
+        </div>
-      <mat-chip-list #chipList aria-label="receiver selection">
+        <mat-chip-list #chipList aria-label="receiver selection">
-        <mat-chip
+          <mat-chip
-          *ngFor="let receiver of receiverList"
+            *ngFor="let receiver of receiverList"
-          removable="true"
+            removable="true"
-          (removed)="onRemovedReceiver(receiver)"
+            (removed)="onRemovedReceiver(receiver)"
-        >
+          >
-          {{ receiver.name }}
+            {{ receiver.name }}
-          <span matChipRemove class="mdi mdi-close"></span>
+            <span matChipRemove class="mdi mdi-close"></span>
-        </mat-chip>
+          </mat-chip>
-      </mat-chip-list>
+        </mat-chip-list>
 
-      <!--<mat-form-field class="message-receiver-list">
+        <!--<mat-form-field class="message-receiver-list">
         <perfect-scrollbar>
           <mat-chip-list #chipList aria-label="receiver selection">
             <mat-chip
@@ -56,65 +56,67 @@
       </mat-form-field>
       -->
 
-      <mat-form-field class="message-title">
+        <mat-form-field class="message-title">
-        <input
+          <input
-          matInput
+            matInput
-          #inputTitle
+            #inputTitle
-          formControlName="title"
+            formControlName="title"
-          placeholder="{{ 'message.fieldTitle' | translate }}"
+            placeholder="{{ 'message.fieldTitle' | translate }}"
-          maxlength="100"
+            maxlength="100"
-        />
+          />
-        <mat-hint align="end">{{ inputTitle.value?.length || 0 }}/100</mat-hint>
+          <mat-hint align="end"
-      </mat-form-field>
+            >{{ inputTitle.value?.length || 0 }}/100</mat-hint
+          >
+        </mat-form-field>
 
-      <div class="message-content">
+        <div class="message-content">
-        <mat-card-content class="message-write-body">
+          <mat-card-content class="message-write-body">
-          <div
+            <div
-            #editor
+              #editor
-            class="ucap-message-write-editor"
+              class="ucap-message-write-editor"
-            contenteditable="true"
+              contenteditable="true"
-            (paste)="onPasteEditor($event)"
+              (paste)="onPasteEditor($event)"
-            (input)="onInputEditor()"
+              (input)="onInputEditor()"
-          ></div>
+            ></div>
-          <input type="file" #fileInput style="display: none" multiple />
+            <input type="file" #fileInput style="display: none" multiple />
-          <mat-list>
+            <mat-list>
-            <mat-list-item
+              <mat-list-item
-              *ngFor="let oldAttachment of oldAttachmentList"
+                *ngFor="let oldAttachment of oldAttachmentList"
-              class="attach-file-list"
+                class="attach-file-list"
-            >
+              >
-              <div class="attach-file">
+                <div class="attach-file">
-                <span class="mdi mdi-attachment mdi-18px"> </span>
+                  <span class="mdi mdi-attachment mdi-18px"> </span>
-                <span class="file-name">{{ oldAttachment.resContent }}</span>
+                  <span class="file-name">{{ oldAttachment.resContent }}</span>
-                <button
+                  <button
-                  mat-button
+                    mat-button
-                  class="icon-button"
+                    class="icon-button"
-                  aria-label="기존파일삭제"
+                    aria-label="기존파일삭제"
-                  (click)="onClickDeleteOldAttachment(oldAttachment)"
+                    (click)="onClickDeleteOldAttachment(oldAttachment)"
-                >
+                  >
-                  <i class="mid mdi-18px mdi-delete-outline"></i>
+                    <i class="mid mdi-18px mdi-delete-outline"></i>
-                </button>
+                  </button>
-              </div>
+                </div>
-            </mat-list-item>
+              </mat-list-item>
-            <mat-list-item
+              <mat-list-item
-              *ngFor="let attachment of attachmentList"
+                *ngFor="let attachment of attachmentList"
-              class="attach-file-list"
+                class="attach-file-list"
-            >
+              >
-              <div class="attach-file">
+                <div class="attach-file">
-                <span class="mdi mdi-attachment mdi-18px"> </span
+                  <span class="mdi mdi-attachment mdi-18px"> </span
-                ><span class="file-name">{{ attachment.name }}</span>
+                  ><span class="file-name">{{ attachment.name }}</span>
-                <button
+                  <button
-                  mat-button
+                    mat-button
-                  class="icon-button"
+                    class="icon-button"
-                  aria-label="파일삭제"
+                    aria-label="파일삭제"
-                  (click)="onClickDelelteAttachment(attachment)"
+                    (click)="onClickDelelteAttachment(attachment)"
-                >
+                  >
-                  <i class="mid mdi-18px mdi-delete-outline"></i>
+                    <i class="mid mdi-18px mdi-delete-outline"></i>
-                </button>
+                  </button>
-              </div>
+                </div>
-            </mat-list-item>
+              </mat-list-item>
-          </mat-list>
+            </mat-list>
-        </mat-card-content>
+          </mat-card-content>
-      </div>
+        </div>
       </div>
     </perfect-scrollbar>
   </form>

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

@@ -2,12 +2,13 @@
   width: 100%;
   height: 100%;
   form {
-    height: 400px;
+    height: calc(100% - 100px);
     perfect-scrollbar {
       .ps--active-x > .ps__rail-x {
         display: none;
       }
       .write-form {
+        height: 100%;
         padding-right: 10px;
       }
     }
@@ -56,6 +57,8 @@
   flex-flow: row;
   position: relative;
   width: 100%;
+  min-height: calc(100% - 150px);
+  margin-top: 10px;
   .message-receiver-list {
     position: relative;
     width: 30%;
@@ -64,15 +67,15 @@
   }
   .message-write-body {
     display: flex;
-    flex: 1 1 auto;
+    flex: 1 1 100%;
     flex-flow: column;
     margin: 0;
+    height: auto;
     .ucap-message-write-editor {
       display: inline-block;
       width: 100%;
       height: 100%;
       padding: 10px;
-      min-height: 250px;
       border: 1px solid #dddddd;
       word-break: break-all;
     }

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

@@ -372,7 +372,7 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
       ScheduleSendDialogResult
     >(ScheduleSendDialogComponent, {
       width: '600px',
-      height: '600px',
+      height: '560px',
       disableClose: true,
       data: {
         reservationDate

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

@@ -6,7 +6,7 @@
   </mat-card-header>
   <mat-card-content>
     <div fxLayout="row">
-      <div fxFlex="60%">
+      <div flFlex="0 0 100%" style="width:50%;">
         <div fxLayout="column">
           <div fxFlexFill>
             <ucap-pick-date
@@ -101,31 +101,31 @@
         </div>
       </div>
     </div>
-  </mat-card-content>
+    <div class="actions-message text-warn-color">
-  <mat-card-actions>
+      <span *ngIf="dateIsToEarly">
-    <div class="actions-container">
+        {{ 'message.errors.minTimeReservation' | translate }}
-      <div class="actions-message text-warn-color">
+      </span>
-        <span *ngIf="dateIsToEarly">
-          {{ 'message.errors.minTimeReservation' | translate }}
-        </span>
-      </div>
-      <div class="actions">
-        <button
-          mat-stroked-button
-          (click)="onClickCancel()"
-          class="mat-primary"
-        >
-          {{ 'common.messages.cancel' | translate }}
-        </button>
-        <button
-          mat-flat-button
-          [disabled]="dateIsToEarly"
-          (click)="onClickSend()"
-          class="mat-primary"
-        >
-          {{ 'message.sendReservation' | translate }}
-        </button>
-      </div>
     </div>
-  </mat-card-actions>
+    <mat-card-actions>
+      <div class="actions-container">
+        <div class="actions">
+          <button
+            mat-stroked-button
+            (click)="onClickCancel()"
+            class="mat-primary"
+          >
+            {{ 'common.messages.cancel' | translate }}
+          </button>
+          <button
+            mat-flat-button
+            [disabled]="dateIsToEarly"
+            (click)="onClickSend()"
+            class="mat-primary"
+          >
+            {{ 'message.sendReservation' | translate }}
+          </button>
+        </div>
+      </div>
+    </mat-card-actions>
+  </mat-card-content>
 </mat-card>

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

@@ -8,6 +8,7 @@
 
   .actions-message {
     font-size: 0.9em;
+    height: 30px;
   }
 
   .actions-spacer {
@@ -36,6 +37,10 @@
 }
 
 .Reservation-dete {
-  margin-top: 30px;
+  margin-top: 10px;
   font-size: 1.6em;
 }
+
+.actions-message {
+  height: 30px;
+}

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

@@ -250,6 +250,9 @@
               | ucapStringFormatterPhone
               | ucapStringEmptycheck
           }}
+          <span *ngIf="!!userInfo.madn && userInfo.madn.trim().length > 0"
+            >({{ userInfo.madn }})</span
+          >
         </dd>
         <button
           mat-mini-fab
@@ -260,12 +263,7 @@
           [disabled]="getDisabledBtn('LINE')"
           (click)="onClickCall('LINE')"
         >
-          <svg
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-            id="레이어_1"
-            data-name="레이어 1"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-          >
             <path
               d="M18.61,16.55c-0.42,1.03-2.29,1.97-3.12,2.01c-0.83,0.04-0.85,0.64-5.37-1.32c-4.51-1.96-7.23-6.73-7.45-7.04
               C2.46,9.9,0.92,7.71,1,5.51c0.08-2.2,1.29-3.24,1.72-3.67c0.43-0.43,0.92-0.51,1.22-0.51c0.36-0.01,0.59-0.01,0.85,0
@@ -293,12 +291,7 @@
           [disabled]="getDisabledBtn('MOBILE')"
           (click)="onClickCall('MOBILE')"
         >
-          <svg
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-            id="레이어_1"
-            data-name="레이어 1"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-          >
             <path
               d="M18.61,16.55c-0.42,1.03-2.29,1.97-3.12,2.01c-0.83,0.04-0.85,0.64-5.37-1.32c-4.51-1.96-7.23-6.73-7.45-7.04
             	C2.46,9.9,0.92,7.71,1,5.51c0.08-2.2,1.29-3.24,1.72-3.67c0.43-0.43,0.92-0.51,1.22-0.51c0.36-0.01,0.59-0.01,0.85,0
@@ -325,12 +318,7 @@
             matTooltipPosition="above"
             (click)="onClickOpenChat()"
           >
-            <svg
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-              id="레이어_1"
-              data-name="레이어 1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-            >
               <path
                 d="M26.57,14a9.05,9.05,0,0,0-12.82,0,9.07,9.07,0,0,0-.57,12.2,3.57,3.57,0,0,1-1.46,1.61.84.84,0,0,0-.46.89.86.86,0,0,0,.71.71,4.34,4.34,0,0,0,.71.05,5.32,5.32,0,0,0,3.19-1.06A9.07,9.07,0,0,0,26.57,14Z"
                 transform="translate(-11.09 -11.32)"
@@ -340,7 +328,6 @@
                 transform="translate(-11.09 -11.32)"
               />
               <path
-                class="cls-1"
                 d="M20.16,19.75a.64.64,0,1,0,.64.64.64.64,0,0,0-.64-.64Z"
                 transform="translate(-11.09 -11.32)"
               />
@@ -366,6 +353,24 @@
           }}</span>
         </div>
 
+        <div class="button-text-item" *ngIf="!isMe && !!enableElephantButton">
+          <button
+            mat-mini-fab
+            class="mat-elevation-z btn-elephant"
+            matTooltip="칭찬 코끼리 보내기"
+            (click)="onClickSendElephant()"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24.49">
+              <path
+                d="M31.91,13.4a12.78,12.78,0,0,0-12-8.64A12.63,12.63,0,0,0,7.42,15.53c0,.34-.16,1-.41.79,0,0-1.59-.8-.36-3.26l-4.35-2s-2.63,3.69-.41,7.22a6.39,6.39,0,0,0,6,3l.15.49q.25.66.57,1.29a13.62,13.62,0,0,0,6.66,6.06c.92.41.9-.63.9-.63V27.37a3.83,3.83,0,0,1,7.65,0v.91s.07,1.12.7.87c2.54-1,5.11-2.95,5.93-5.86l.18.74c.31,1.83.33,3.37.91,2.46C33.92,22.87,32.89,16.18,31.91,13.4Zm-20-.3a1,1,0,1,1,1-1A1,1,0,0,1,11.91,13.1Zm11.62,5.76c-5.76,5.3-9-1.34-8.8-5,.14-2.3,1.73-5.05,6.47-6C25.74,7.08,29.28,13.56,23.53,18.86Z"
+                transform="translate(-1 -4.76)"
+                style="fill:#fff"
+              />
+            </svg>
+          </button>
+          <span class="button-text">칭찬코끼리</span>
+        </div>
+
         <div class="button-text-item" *ngIf="!isMe">
           <button
             mat-mini-fab
@@ -384,7 +389,7 @@
           </button>
           <span class="button-text">{{ 'profile.fieldSMS' | translate }}</span>
         </div>
-
+        <!--화상
         <div
           class="button-text-item"
           *ngIf="!isMe && !!authInfo && authInfo.canVideoConference"
@@ -407,32 +412,7 @@
             'profile.fieldVideoConference' | translate
           }}</span>
         </div>
-
+        -->
-        <!-- <div class="button-text-item" *ngIf="!!enableElephantButton">
-          <button
-            mat-mini-fab
-            class="mat-elevation-z bg-accent-darkest"
-            *ngIf="!isMe"
-            matTooltip="칭찬 코끼리"
-            matTooltipPosition="above"
-            (click)="onClickSendElephant()"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 30 30"
-              stroke-width="1.5"
-              stroke="#357abc"
-              fill="#98d7e2"
-            >
-              <path
-                d="M29,17.3a21.32,21.32,0,0,0-.63-4.39A10.59,10.59,0,0,0,28,11.85c0-.14-.1-.27-.15-.41l-.16-.39a13,13,0,0,0-.81-1.52,11.29,11.29,0,0,0-1.59-2c-.2-.2-.4-.4-.62-.58s-.43-.36-.66-.53a10.83,10.83,0,0,0-1.82-1.09l-.39-.18c-.26-.11-.53-.21-.81-.31A11.06,11.06,0,0,0,6.62,13.71l0,.09v0s0,.07,0,.1v0a.52.52,0,0,0,0,.11h0a.43.43,0,0,1,0,.11h0a.32.32,0,0,1,0,.09v0s0,.05,0,.08h0a.1.1,0,0,1,0,0h0l-.05,0h0l0,0a1.42,1.42,0,0,1-.56-.62,1.84,1.84,0,0,1-.13-1.17A4,4,0,0,1,6,11.55L2.14,9.83h0a6.75,6.75,0,0,0-.84,1.78c-.05.14-.09.29-.13.45A6.18,6.18,0,0,0,1,13.31a5,5,0,0,0,.78,2.84c.08.13.17.26.26.38l.06.08c.09.11.17.22.27.33l0,0,.26.28.07.06.28.25,0,0a2.48,2.48,0,0,0,.26.19l.06,0,.3.19.05,0,.27.14.06,0,.29.13.06,0,.25.09,0,0,.29.09h.06l.24.06h0l.26.05h0l.23,0h0l.23,0h.94l.13.43c.07.19.15.38.23.57s.17.38.27.56a11.26,11.26,0,0,0,1,1.51c.13.16.25.32.39.48a5.34,5.34,0,0,0,.39.44A11.78,11.78,0,0,0,10.9,24.1c.27.2.54.39.83.57a11.72,11.72,0,0,0,1.78,1l.16.06h.19l.13,0h0l.1-.06h0a.39.39,0,0,0,.08-.1h0l.05-.11v0l0-.1h0s0-.06,0-.09v-.08h0v-1a3.27,3.27,0,0,1,.41-1.59,3.36,3.36,0,0,1,2.94-1.76h0a3.31,3.31,0,0,1,1,.16l.3.11a3.15,3.15,0,0,1,.57.31,2.48,2.48,0,0,1,.26.19A3.34,3.34,0,0,1,21,24.08v.79h0v.29l0,0v0a.43.43,0,0,1,0,0v0a.25.25,0,0,0,0,.07h0a.21.21,0,0,0,0,.06v0l0,0,0,0,0,0,0,0,0,0h.18l.09,0a11,11,0,0,0,1.65-.82c.27-.16.53-.34.78-.52a10.65,10.65,0,0,0,1.07-.93c.11-.12.22-.23.32-.35a7.25,7.25,0,0,0,.58-.76l.24-.4a6.43,6.43,0,0,0,.41-.88l.15-.46.15.64c0,.09,0,.18.05.27v.09l0,.18v.1l0,.19V22l0,.2v.05l0,.2v.07c0,.05,0,.09,0,.14v.07a.69.69,0,0,1,0,.13V23a.94.94,0,0,1,0,.16v0a.56.56,0,0,0,0,.12v0l0,.08v0l0,.06,0,0a.1.1,0,0,0,.05,0h.07l.05,0s0,0,0,0a.12.12,0,0,0,.05,0l0,0a.52.52,0,0,0,.08-.11A9.41,9.41,0,0,0,29,18.52C29,18.12,29,17.71,29,17.3ZM10.55,11.59a.86.86,0,1,1,0-1.71.85.85,0,0,1,.85.85A.86.86,0,0,1,10.55,11.59Zm9.79,4.79A5.27,5.27,0,0,1,17,18.07a2.67,2.67,0,0,1-2-.95,7.21,7.21,0,0,1-1.69-4.84c.07-1.18.76-4,5.58-4.94a4.18,4.18,0,0,1,.61,0v0a3.43,3.43,0,0,1,3.11,2.29C23.5,11.73,22.63,14.27,20.34,16.38Z"
-                transform="translate(-1 -4.29)"
-              />
-            </svg>
-          </button>
-          <span class="button-text">칭찬 코끼리</span>
-        </div> -->
-
         <div class="button-text-item" *ngIf="!isMe">
           <button
             mat-mini-fab

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

@@ -33,7 +33,6 @@ $login-max-height: 800px;
 
 .mat-card.profile {
   display: flex;
-  min-width: 600px;
   flex-flow: row;
   flex: 0 0 auto;
   width: 100%;
@@ -228,6 +227,7 @@ $login-max-height: 800px;
   }
 }
 
+/* 프로필사진 옆에 보여줄때
 .btn-elephant {
   position: absolute;
   background-color: #ffffff !important;
@@ -246,7 +246,7 @@ $login-max-height: 800px;
       fill: #ffffff;
     }
   }
-}
+}*/
 
 .userInfo-call {
   position: relative;
@@ -287,6 +287,11 @@ $login-max-height: 800px;
         height: 20px;
         display: flex;
       }
+      &.btn-elephant {
+        svg {
+          width: 24px;
+        }
+      }
     }
   }
   .button-text {

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

@@ -18,10 +18,9 @@
         animationDuration="0ms"
         (selectedTabChange)="onSelectedTabChange($event)"
         fxLayout="row"
-        horizontal
         class="theme-list"
       >
-        <mat-tab>
+        <mat-tab fxLayout="row" fxFlex="0 0 auto">
           <ng-template mat-tab-label class="theme-item">
             <div class="theme-box default-theme"></div>
             <div class="theme-name">

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

@@ -23,33 +23,6 @@
   }
 }
 
-::ng-deep .theme-list {
-  .mat-tab-header {
-    width: 100%;
-    border: none !important;
-    .mat-tab-labels {
-      position: relative;
-      width: 100%;
-      flex-direction: row !important;
-      .mat-tab-label {
-        width: 140px;
-        height: 120px;
-        &.mat-tab-label-active {
-          opacity: 1;
-        }
-        .mat-tab-label-content {
-          position: relative;
-          flex-flow: column;
-          width: 100%;
-        }
-      }
-    }
-  }
-  .mat-tab-body-wrapper {
-    border: none !important;
-  }
-}
-
 .theme-box {
   width: 140px;
   height: 98px;
@@ -75,3 +48,6 @@
   position: relative;
   padding-top: 10px;
 }
+.theme-item {
+  height: 100%;
+}

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

@@ -66,6 +66,10 @@
       color: #444444;
     }
   }
+  .mat-card-content {
+    position: relative;
+    height: calc(100% - 50px);
+  }
   .button-form {
     text-align: right;
     .mat-primary {
@@ -74,13 +78,55 @@
   }
 }
 
-.cdk-overlay-container {
+//기본 다이얼로그
-  .cdk-global-overlay-wrapper {
+.cdk-overlay-pane {
-    .cdk-overlay-pane {
+  max-width: 90vw;
-      //max-width: 90vw !important;
+  max-height: 94vh;
-      .mat-dialog-container {
+  .mat-dialog-container {
-        overflow: hidden;
+    position: relative;
-      }
+    width: 800px;
+    height: 90vh;
+    @media screen and (max-width: 1000px) {
+      width: 800px;
+      height: 90vh;
+    }
+    @media screen and (max-width: 800px) {
+      width: 90vw;
+      height: 94vh;
+    }
+    & > .mat-card {
+      width: 100%;
+      height: 100%;
     }
   }
 }
+
+//통합검색
+.fullSize-dialog {
+  width: 90vw;
+  height: 94vh;
+  .mat-dialog-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+//confirm-dialog
+.miniSize-dialog {
+  width: 400px;
+  height: 260px;
+  .mat-dialog-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+//viwer-dialog
+.app-dialog-full {
+  .mat-dialog-container {
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -20,3 +20,26 @@ body:not(.is-mobile) {
     border-radius: 12px;
   }
 }
+
+.cdk-virtual-scroll-orientation-vertical {
+  .cdk-virtual-scroll-content-wrapper {
+    width: 100%;
+    height: 100%;
+    contain: none;
+  }
+}
+
+perfect-scrollbar {
+  .ps-content {
+    position: inherit;
+    width: inherit;
+    height: inherit;
+  }
+}
+
+.ps__rail-y {
+  left: auto !important;
+  & > .ps__thumb-y {
+    margin-right: -2px;
+  }
+}

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html

@@ -30,18 +30,15 @@
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="21"
+        viewBox="0 0 20 19.01"
-        height="21"
+        width="20"
-        viewBox="0 0 24 24"
+        height="20"
-        fill="none"
+        fill="currentColor"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="butt"
-        stroke-linejoin="round"
       >
-        <path
+        <polygon
-          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+          points="12.01 9 11.96 0 7.96 0.02 8.01 9.02 3.01 9.05 10.04 15.01 17.01 8.97 12.01 9"
         />
+        <rect y="17.01" width="20" height="2" />
       </svg>
     </button>
     <button
@@ -52,21 +49,22 @@
       aria-label=""
       (click)="onClickSaveAs()"
     >
-      <!--<mat-icon>get_app</mat-icon>-->
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="21"
-        height="21"
         viewBox="0 0 24 24"
-        fill="none"
+        width="24"
-        stroke="currentColor"
+        height="24"
-        stroke-width="2"
+        fill="currentColor"
-        stroke-linecap="butt"
-        stroke-linejoin="round"
       >
         <path
-          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+          d="M10.2,18.6l0.7,2.9l2.9-0.7l6.3-10.6l-3.5-2.2L10.2,18.6z M21.4,6.4L19.3,5c-0.2-0.1-0.4-0.1-0.6-0.1
+                      c-0.2,0-0.3,0.2-0.5,0.3l-1,1.7l3.5,2.2l1.1-1.8C22,7,21.9,6.6,21.4,6.4z"
         />
+        <g>
+          <polygon class="st0" points="7.1,15.4 12.9,10.4 1.4,10.4 	" />
+          <rect x="5.5" y="2.9" class="st0" width="3.3" height="7.5" />
+        </g>
+        <rect x="1.4" y="16.6" class="st0" width="8.2" height="2" />
       </svg>
     </button>
     <span class="stroke-bar"></span>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html

@@ -31,7 +31,6 @@
     <span class="ucap-image-viewer-spacer"></span>
 
     <button
-      *ngIf="!imageOnly"
       mat-icon-button
       class="ucap-image-viewer-action"
       matTooltip="{{ 'common.messages.zoomReset' | translate }}"
@@ -58,7 +57,6 @@
       </svg>
     </button>
     <button
-      *ngIf="!imageOnly"
       mat-icon-button
       class="ucap-image-viewer-action"
       matTooltip="{{ 'common.messages.zoomOut' | translate }}"
@@ -84,7 +82,6 @@
       </svg>
     </button>
     <button
-      *ngIf="!imageOnly"
       mat-icon-button
       class="ucap-image-viewer-action"
       matTooltip="{{ 'common.messages.zoomIn' | translate }}"
@@ -110,6 +107,7 @@
         <line x1="8" y1="11" x2="14" y2="11"></line>
       </svg>
     </button>
+
     <button
       *ngIf="!imageOnly"
       mat-icon-button
@@ -119,23 +117,20 @@
       aria-label=""
       (click)="onClickDownload()"
     >
-      <!--<mat-icon>get_app</mat-icon>-->
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="21"
+        viewBox="0 0 20 19.01"
-        height="21"
+        width="20"
-        viewBox="0 0 24 24"
+        height="20"
-        fill="none"
+        fill="currentColor"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="butt"
-        stroke-linejoin="round"
       >
-        <path
+        <polygon
-          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+          points="12.01 9 11.96 0 7.96 0.02 8.01 9.02 3.01 9.05 10.04 15.01 17.01 8.97 12.01 9"
         />
+        <rect y="17.01" width="20" height="2" />
       </svg>
     </button>
+
     <button
       *ngIf="!imageOnly"
       mat-icon-button
@@ -145,21 +140,22 @@
       aria-label=""
       (click)="onClickSaveAs()"
     >
-      <!--<mat-icon>get_app</mat-icon>-->
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="21"
-        height="21"
         viewBox="0 0 24 24"
-        fill="none"
+        width="24"
-        stroke="currentColor"
+        height="24"
-        stroke-width="2"
+        fill="currentColor"
-        stroke-linecap="butt"
-        stroke-linejoin="round"
       >
         <path
-          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+          d="M10.2,18.6l0.7,2.9l2.9-0.7l6.3-10.6l-3.5-2.2L10.2,18.6z M21.4,6.4L19.3,5c-0.2-0.1-0.4-0.1-0.6-0.1
+          c-0.2,0-0.3,0.2-0.5,0.3l-1,1.7l3.5,2.2l1.1-1.8C22,7,21.9,6.6,21.4,6.4z"
         />
+        <g>
+          <polygon class="st0" points="7.1,15.4 12.9,10.4 1.4,10.4 	" />
+          <rect x="5.5" y="2.9" class="st0" width="3.3" height="7.5" />
+        </g>
+        <rect x="1.4" y="16.6" class="st0" width="8.2" height="2" />
       </svg>
     </button>
     <span class="stroke-bar"></span>
@@ -212,11 +208,15 @@
       <ng-template #imageOnlyImg>
         <img
           ucapImage
+          #downloadImage
           [base]="imageOnlyData.imageRootUrl"
           [path]="imageOnlyData.imageUrl"
           [default]="imageOnlyData.defaultImage"
-          style="cursor: pointer; width: auto;"
+          style="cursor: pointer;"
+          [style.width]="'auto'"
+          [style.height]="imageHeight + 'px'"
           (click)="onClickClose()"
+          (load)="onLoadFileDownloadUrl(downloadImage)"
         />
       </ng-template>
       <ng-template #defaultImg>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html

@@ -11,21 +11,17 @@
       aria-label=""
       (click)="onClickDownload()"
     >
-      <!--<mat-icon>get_app</mat-icon>-->
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="21"
+        viewBox="0 0 20 19.01"
-        height="21"
+        width="20"
-        viewBox="0 0 24 24"
+        height="20"
-        fill="none"
+        fill="currentColor"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="butt"
-        stroke-linejoin="round"
       >
-        <path
+        <polygon
-          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+          points="12.01 9 11.96 0 7.96 0.02 8.01 9.02 3.01 9.05 10.04 15.01 17.01 8.97 12.01 9"
         />
+        <rect y="17.01" width="20" height="2" />
       </svg>
     </button>
     <button
@@ -36,21 +32,22 @@
       aria-label=""
       (click)="onClickSaveAs()"
     >
-      <!--<mat-icon>get_app</mat-icon>-->
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="21"
-        height="21"
         viewBox="0 0 24 24"
-        fill="none"
+        width="24"
-        stroke="currentColor"
+        height="24"
-        stroke-width="2"
+        fill="currentColor"
-        stroke-linecap="butt"
-        stroke-linejoin="round"
       >
         <path
-          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+          d="M10.2,18.6l0.7,2.9l2.9-0.7l6.3-10.6l-3.5-2.2L10.2,18.6z M21.4,6.4L19.3,5c-0.2-0.1-0.4-0.1-0.6-0.1
+                c-0.2,0-0.3,0.2-0.5,0.3l-1,1.7l3.5,2.2l1.1-1.8C22,7,21.9,6.6,21.4,6.4z"
         />
+        <g>
+          <polygon class="st0" points="7.1,15.4 12.9,10.4 1.4,10.4 	" />
+          <rect x="5.5" y="2.9" class="st0" width="3.3" height="7.5" />
+        </g>
+        <rect x="1.4" y="16.6" class="st0" width="8.2" height="2" />
       </svg>
     </button>
     <span class="stroke-bar"></span>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html

@@ -32,21 +32,17 @@
       aria-label=""
       (click)="onClickDownload()"
     >
-      <!--<mat-icon>get_app</mat-icon>-->
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="21"
+        viewBox="0 0 20 19.01"
-        height="21"
+        width="20"
-        viewBox="0 0 24 24"
+        height="20"
-        fill="none"
+        fill="currentColor"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="butt"
-        stroke-linejoin="round"
       >
-        <path
+        <polygon
-          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+          points="12.01 9 11.96 0 7.96 0.02 8.01 9.02 3.01 9.05 10.04 15.01 17.01 8.97 12.01 9"
         />
+        <rect y="17.01" width="20" height="2" />
       </svg>
     </button>
     <button
@@ -57,21 +53,22 @@
       aria-label=""
       (click)="onClickSaveAs()"
     >
-      <!--<mat-icon>get_app</mat-icon>-->
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="21"
-        height="21"
         viewBox="0 0 24 24"
-        fill="none"
+        width="24"
-        stroke="currentColor"
+        height="24"
-        stroke-width="2"
+        fill="currentColor"
-        stroke-linecap="butt"
-        stroke-linejoin="round"
       >
         <path
-          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+          d="M10.2,18.6l0.7,2.9l2.9-0.7l6.3-10.6l-3.5-2.2L10.2,18.6z M21.4,6.4L19.3,5c-0.2-0.1-0.4-0.1-0.6-0.1
+                c-0.2,0-0.3,0.2-0.5,0.3l-1,1.7l3.5,2.2l1.1-1.8C22,7,21.9,6.6,21.4,6.4z"
         />
+        <g>
+          <polygon class="st0" points="7.1,15.4 12.9,10.4 1.4,10.4 	" />
+          <rect x="5.5" y="2.9" class="st0" width="3.3" height="7.5" />
+        </g>
+        <rect x="1.4" y="16.6" class="st0" width="8.2" height="2" />
       </svg>
     </button>
     <span class="stroke-bar"></span>

projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="column" fxFlex="1 1 auto" class="rightDrawer-notice">
+<div fxLayout="column" fxFlex="1 1 auto" class="integrated-search-frame">
   <div class="search-area">
     <ucap-integrated-search-form
       [searchWord]="!!searchWord ? searchWord : ''"

projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss

@@ -57,6 +57,7 @@
   width: 100%;
   overflow: hidden;
   display: flex;
+  height: calc(100% - 160px);
   table {
     table-layout: fixed;
     width: 100%;

projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss

@@ -1,49 +1,15 @@
 $tablet-l-width: 1024px;
 $tablet-s-width: 768px;
 
-::ng-deep .sticker-selector {
+.sticker-selector {
-  height: 210px;
+  .mat-tab-group {
-  border-top: 1px solid #cccccc;
+    height: 200px;
-  .mat-tab-header {
-    .mat-tab-label {
-      //padding: 0 10px;
-      min-width: 16%;
-    }
-  }
-  .mat-tab-body-wrapper {
-    height: 150px !important;
-    overflow: auto;
-  }
-  @media screen and (max-width: #{$tablet-s-width}) {
-    height: 180px;
-    .mat-tab-body-wrapper {
-      height: 130px;
-    }
-  }
-}
-
-.sticker-item-box {
-  flex-wrap: wrap;
-  padding: 10px 20px 0;
-  overflow: auto;
-
-  .sticker-item {
-    width: 60px;
-    margin-bottom: 10px;
-    display: inline-flex;
-    cursor: pointer;
-  }
-}
-
-@media screen and (max-width: #{$tablet-s-width}) {
-  .sticker-item-box {
-    .sticker-item {
-      width: 50px;
-    }
   }
 }
 
 .selected-sticker {
+  height: 80px;
+  border-top: 1px solid #cccccc;
   position: relative;
   padding: 10px 20px;
   text-align: right;
@@ -60,3 +26,27 @@ $tablet-s-width: 768px;
     color: #ffffff;
   }
 }
+
+.sticker-item-box {
+  flex-wrap: wrap;
+  padding: 10px 20px 0;
+  overflow: auto;
+  height: 150px !important;
+  overflow: auto;
+
+  @media screen and (max-width: #{$tablet-s-width}) {
+    height: 130px;
+  }
+
+  .sticker-item {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 10px;
+    display: inline-flex;
+    cursor: pointer;
+    @media screen and (max-width: #{$tablet-s-width}) {
+      width: 50px;
+      height: 50px;
+    }
+  }
+}

projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html

@@ -9,10 +9,10 @@
     <div #messageContainer class="notice">
       {{ data.message }}
     </div>
+    <mat-card-actions class="button-form flex-row">
+      <button mat-flat-button (click)="onClickConfirm()" class="mat-primary">
+        {{ 'common.messages.confirm' | translate }}
+      </button>
+    </mat-card-actions>
   </mat-card-content>
-  <mat-card-actions class="button-form flex-row">
-    <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
-      {{ 'common.messages.confirm' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>

projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.scss

@@ -1,5 +1,14 @@
-form {
+.confirm-card {
-  .mat-form-field {
+  width: 100%;
-    width: 100%;
+  height: 100%;
+  .mat-card-content {
+    display: flex;
+    flex-flow: column;
+    .mat-card-actions {
+      display: flex;
+      align-self: flex-end;
+      flex-flow: row;
+      margin-top: auto;
+    }
   }
 }

projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html

@@ -14,17 +14,17 @@
     <div #messageContainer class="notice">
       {{ data.message }}
     </div>
+    <mat-card-actions *ngIf="!hideAction" class="button-form flex-row">
+      <button
+        mat-stroked-button
+        (click)="onClickChoice(false)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.no' | translate }}
+      </button>
+      <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+        {{ 'common.messages.yes' | translate }}
+      </button>
+    </mat-card-actions>
   </mat-card-content>
-  <mat-card-actions *ngIf="!hideAction" class="button-form flex-row">
-    <button
-      mat-stroked-button
-      (click)="onClickChoice(false)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.no' | translate }}
-    </button>
-    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
-      {{ 'common.messages.yes' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>

projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss

@@ -1,18 +1,27 @@
-.mat-card-header {
+.confirm-card {
-  .mat-card-header-text {
+  width: 100%;
-    margin: 0;
+  height: 100%;
-  }
-  .btn-dialog-close {
-    font-size: 20px;
-    display: flex;
-    margin-left: auto;
-    align-self: flex-start;
-    color: #444444;
-  }
-}
 
-form {
+  .mat-card-header {
-  .mat-form-field {
+    .mat-card-header-text {
-    width: 100%;
+      margin: 0;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
+  }
+  .mat-card-content {
+    display: flex;
+    flex-flow: column;
+    .mat-card-actions {
+      display: flex;
+      align-self: flex-end;
+      flex-flow: row;
+      margin-top: auto;
+    }
   }
 }