팝업 전체 사이즈 조정(사이즈 이슈 발생 할 수 있음), 앨범뷰어 저장, 다른이름 저장, 다수대화방 오프라인 표시 적용

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

@@ -156,7 +156,8 @@ export class LeftSideComponent implements OnInit, OnDestroy {
       CreateChatDialogData,
       CreateChatDialogResult
     >(CreateChatDialogComponent, {
-      width: '600px',
+      maxWidth: '94vw',
+      maxHeight: '90vh',
       data: {
         type: UserSelectDialogType.NewChat,
         title:
@@ -188,7 +189,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')
@@ -220,8 +222,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.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/messages.component.html

@@ -48,37 +48,15 @@
         </button>
       </div>
       <div class="room-info">
-        <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>
-        </div>
-        <div
-          *ngIf="
-            roomInfoSubject.value &&
-            (roomInfoSubject.value.roomType === RoomType.Single ||
-              roomInfoSubject.value.roomType === RoomType.Multi) &&
-            offLineUsers.length > 0
-          "
-          class="room-type text-accent-color"
-        >
-          <span
-            *ngIf="roomInfoSubject.value.roomType === RoomType.Single"
-            class="bg-accent-darkest"
-          >
-            {{ 'chat.existOfflineUser' | translate }}
           </span>
-          <span
-            *ngIf="roomInfoSubject.value.roomType === RoomType.Multi"
-            class="bg-accent-darkest"
-          >
-            {{ 'chat.existOfflineUsers' | translate }}
-          </span>
-        </div>
-        <h3 class="room-name">
           <ng-container
             *ngIf="!roomInfoSubject.value || !userInfoListSubject.value"
           >
@@ -148,18 +126,22 @@
             </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"
+          <span *ngIf="roomInfoSubject.value.roomType === RoomType.Single">
-            >{{
+            {{ 'chat.existOfflineUser' | translate }}
-              getConvertTimer(roomInfoSubject.value.timeRoomInterval)
+          </span>
-            }} </span
+          <span *ngIf="roomInfoSubject.value.roomType === RoomType.Multi">
-          >{{ 'chat.isRoomTypeSecret' | translate }}
+            {{ 'chat.existOfflineUsers' | translate }}
-        </div>-->
+          </span>
-        <!-- Timer Room Info -->
+        </div>
       </div>
       <div class="room-option">
         <button
@@ -168,11 +150,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/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/messages.component.ts

@@ -777,13 +777,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;
         }
@@ -1575,7 +1575,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')
@@ -1599,7 +1599,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')
@@ -1716,7 +1716,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             CreateChatDialogData,
             CreateChatDialogResult
           >(CreateChatDialogComponent, {
-            width: '600px',
             data: {
               type: UserSelectDialogType.EditChatMember,
               title: this.translateService.instant('chat.modifyRoomMember'),
@@ -1783,7 +1782,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             SelectGroupDialogData,
             SelectGroupDialogResult
           >(SelectGroupDialogComponent, {
-            width: '600px',
             data: {
               title: this.translateService.instant('chat.addMemberToGroup')
             }
@@ -1819,6 +1817,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

@@ -181,7 +181,6 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
       CreateChatDialogData,
       CreateChatDialogResult
     >(CreateChatDialogComponent, {
-      width: '600px',
       data: {
         type: UserSelectDialogType.EditChatMember,
         title: this.translateService.instant('chat.modifyRoomMember'),
@@ -237,7 +236,6 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
       SelectGroupDialogData,
       SelectGroupDialogResult
     >(SelectGroupDialogComponent, {
-      width: '600px',
       data: {
         title: this.translateService.instant('group.selectTargetGroup')
       }
@@ -291,6 +289,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;
@@ -28,9 +30,17 @@
     }
   }
 }
-
+::ng-deep.use-caution {
-form {
+  .notice {
-  .mat-form-field {
+    ol {
-    width: 100%;
+      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,7 +212,6 @@
         </mat-tab-group>
       </div>
     </div>
-  </mat-card-content>
     <mat-card-actions class="button-form flex-row">
       <button
         mat-stroked-button
@@ -245,6 +229,7 @@
         {{ 'common.messages.yes' | translate }}
       </button>
     </mat-card-actions>
+  </mat-card-content>
 </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,21 +10,23 @@
     }
   }
   & > .mat-card-content {
-    //height: 568px;
     position: relative;
+    .mat-card-content-frame {
+      height: calc(100% - 50px);
       .container {
         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-frame {
             .mat-tab-group {
               & > .mat-tab-body {
                 height: 380px;
@@ -34,6 +36,7 @@
         }
       }
     }
+  }
   & > .mat-tab-body-wrapper {
     height: calc(100% - 50px);
     .mat-tag-body {
@@ -44,7 +47,7 @@
 }
 
 .dialog-tab-grouplist {
-  height: 380px;
+  height: calc(100% - 140px);
   width: 100%;
   .group,
   .search-result {
@@ -82,7 +85,7 @@
 
 ::ng-deep .dialog-tab-orglist {
   width: 100%;
-  height: 380px;
+  height: calc(100% - 150px);
   border-bottom: 1px solid #dddddd;
   position: relative;
   .oraganization {
@@ -147,7 +150,7 @@
   }
 }
 
-/*:ng-deep .dialog-creat-chat {
+/*::ng-deep .dialog-creat-chat {
   & > .mat-tab-body-wrapper {
     .mat-tab-body {
       height: 380px;
@@ -162,3 +165,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

@@ -787,7 +787,6 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
         ConfirmDialogData,
         ConfirmDialogResult
       >(ConfirmDialogComponent, {
-        width: '400px',
         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,7 +41,6 @@
         </mat-error>
       </mat-form-field>
     </form>
-  </mat-card-content>
     <mat-card-actions class="button-form flex-row">
       <button
         mat-stroked-button
@@ -59,4 +58,5 @@
         {{ 'common.messages.yes' | translate }}
       </button>
     </mat-card-actions>
+  </mat-card-content>
 </mat-card>

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

@@ -1,4 +1,8 @@
-.mat-card-header {
+.edit-group {
+  width: 100%;
+  height: 100%;
+
+  .mat-card-header {
     .mat-card-header-text {
       margin: 0;
     }
@@ -9,10 +13,20 @@
       align-self: flex-start;
       color: #444444;
     }
-}
+  }
-
+  .mat-card-content {
-form {
+    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,7 +16,7 @@
         <mat-icon>add</mat-icon>
         <span class="mat-fab__label">{{ 'group.addNew' | translate }}</span>
       </button>
-
+    </div>
     <div *ngIf="isShowAddGroupField" class="input-groupname-box">
       <form name="inputForm" [formGroup]="inputForm" novalidate>
         <mat-form-field
@@ -77,8 +77,8 @@
         </button>
       </div>
     </div>
-    </div>
     <mat-selection-list #groups>
+      <perfect-scrollbar fxFlex="1 1 auto">
         <mat-list-option
           *ngFor="let groupBuddy of groupBuddyList$ | async"
           [value]="groupBuddy.group"
@@ -86,16 +86,17 @@
           class="group-list"
         >
           <div class="group-name">
-          <span class="title-name ellipsis"> {{ groupBuddy.group.name }} </span>
+            <span class="title-name ellipsis">
+              {{ groupBuddy.group.name }}
+            </span>
             <span class="text-accent-color number"
               >({{ groupBuddy.buddyList.length
               }}{{ 'common.units.persons' | translate }})</span
             >
           </div>
         </mat-list-option>
+      </perfect-scrollbar>
     </mat-selection-list>
-  </mat-card-content>
-
     <mat-card-actions class="button-form flex-row">
       <button
         mat-stroked-button
@@ -108,4 +109,5 @@
         {{ 'common.messages.yes' | translate }}
       </button>
     </mat-card-actions>
+  </mat-card-content>
 </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 {
-
-.mat-selection-list {
     border-top: 1px solid #999999;
+    height: calc(100% - 100px);
+  }
+}
+.input-groupname-box {
+  + .mat-selection-list {
+    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,6 @@ export class SelectGroupDialogComponent implements OnInit {
       ConfirmDialogData,
       ConfirmDialogResult
     >(ConfirmDialogComponent, {
-      width: '300px',
       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,7 +257,6 @@
         </mat-tab-group>
       </mat-drawer>
     </mat-drawer-container>
-  </mat-card-content>
     <mat-card-actions class="button-form flex-row">
       <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
         {{ 'common.messages.confirm' | translate }}
@@ -271,6 +270,7 @@
         {{ 'message.sendReply' | translate }}
       </button>
     </mat-card-actions>
+  </mat-card-content>
 </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,4 +1,7 @@
-.mat-card-header {
+.message-detail {
+  width: 100%;
+  height: 100%;
+  .mat-card-header {
     .mat-card-header-text {
       margin: 0;
     }
@@ -9,11 +12,10 @@
       align-self: flex-start;
       color: #444444;
     }
-}
+  }
-
-.confirm-card {
-  min-width: 500px;
   .mat-card-content {
+    mat-drawer-container {
+      height: calc(100% - 40px);
     }
     .button-form {
       text-align: right;
@@ -21,6 +23,7 @@
         margin-left: 4px;
       }
     }
+  }
 }
 
 .contents {

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

@@ -465,6 +465,7 @@ export class MessageDetailDialogComponent implements OnInit {
             ConfirmDialogData,
             ConfirmDialogResult
           >(ConfirmDialogComponent, {
+            panelClass: 'miniSize-dialog',
             data: {
               title: this.translateService.instant('message.cancelReservation'),
               html: this.translateService.instant(
@@ -509,8 +510,8 @@ export class MessageDetailDialogComponent implements OnInit {
             MessageWriteDialogData,
             MessageWriteDialogResult
           >(MessageWriteDialogComponent, {
-            width: '600px',
+            maxWidth: '90vw',
-            height: '600px',
+            maxHeight: '94vh',
             disableClose: true,
             hasBackdrop: false,
             data: {
@@ -558,6 +559,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,4 +1,8 @@
-.mat-card-header {
+.message-write {
+  width: 100%;
+  height: 100%;
+
+  .mat-card-header {
     .mat-card-header-text {
       margin: 0;
     }
@@ -9,13 +13,5 @@
       align-self: flex-start;
       color: #444444;
     }
-}
-
-.confirm-card {
-  min-width: 500px;
-  height: 100%;
-
-  mat-card-content {
-    height: calc(100% - 40px);
   }
 }

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

@@ -124,7 +124,7 @@ export class MessageWriteDialogComponent implements OnInit {
       CreateChatDialogData,
       CreateChatDialogResult
     >(CreateChatDialogComponent, {
-      width: '600px',
+      //width: '600px',
       data: {
         type: UserSelectDialogType.EditChatMember,
         title: this.translateService.instant('message.selectRecipient'),

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

@@ -68,7 +68,6 @@
         </ucap-profile-user-list-item> -->
       </cdk-virtual-scroll-viewport>
     </div>
-  </mat-card-content>
     <mat-card-actions class="button-frame  flex-row">
       <button
         mat-stroked-button
@@ -81,4 +80,5 @@
         {{ 'common.messages.apply' | translate }}
       </button>
     </mat-card-actions>
+  </mat-card-content>
 </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 {
       text-align: right;
+      margin: 0;
       .mat-primary {
         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

@@ -235,8 +235,8 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
         MessageWriteDialogData,
         MessageWriteDialogResult
       >(MessageWriteDialogComponent, {
-        width: '600px',
+        maxWidth: '90vw',
-        height: '600px',
+        maxHeight: '94vh',
         disableClose: true,
         hasBackdrop: false,
         data: {
@@ -273,7 +273,7 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
         ConfirmDialogData,
         ConfirmDialogResult
       >(ConfirmDialogComponent, {
-        width: '360px',
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('call.callTo'),
           html: this.translateService.instant('call.callWithNumber', {
@@ -359,7 +359,6 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
         SelectGroupDialogData,
         SelectGroupDialogResult
       >(SelectGroupDialogComponent, {
-        width: '600px',
         data: {
           title: this.translateService.instant('group.selectTargetGroup')
         }
@@ -387,7 +386,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.scss

@@ -1,4 +1,6 @@
-.mat-card-header {
+.integrated-search {
+  height: 100%;
+  .mat-card-header {
     .mat-card-header-text {
       margin: 0;
     }
@@ -9,4 +11,10 @@
       align-self: flex-start;
       color: #444444;
     }
+  }
+  .mat-card-content {
+    ucap-integrated-search {
+      height: 100%;
+    }
+  }
 }

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

@@ -219,6 +219,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,6 +1,6 @@
 .setting-frame {
   padding: 16px;
-  height: calc(90vh - 40px);
+  height: calc(90vh - 50px);
   width: 100%;
   position: relative;
 

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

@@ -406,6 +406,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
               ProfileDialogData,
               ProfileDialogResult
             >(ProfileDialogComponent, {
+              maxWidth: '90vw',
+              height: '500px',
               data: {
                 userInfo: res.userInfo
               }
@@ -687,7 +689,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
       data: {
         keyword
       },
-      restoreFocus: false
+      restoreFocus: false,
+      panelClass: 'fullSize-dialog'
     });
 
     this.integratedSearchWord = '';
@@ -699,7 +702,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

@@ -53,7 +53,6 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
   position: relative;
   height: 100%;
   width: 100%;
-  //background: $main;
   overflow: hidden;
   &_wrap {
     position: absolute;
@@ -333,20 +332,6 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
     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 {

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

@@ -353,6 +353,8 @@ export class MainPageComponent implements OnInit, OnDestroy {
               ProfileDialogData,
               ProfileDialogResult
             >(ProfileDialogComponent, {
+              maxWidth: '90vw',
+              height: '500px',
               data: {
                 userInfo: res.userInfo,
                 openProfileOptions: params.openProfileOptions
@@ -389,7 +391,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
         ConfirmDialogData,
         ConfirmDialogResult
       >(ConfirmDialogComponent, {
-        width: '360px',
+        panelClass: 'miniSize-dialog',
         data: {
           title: this.translateService.instant('call.callTo'),
           html: this.translateService.instant('call.callWithNumber', {

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,6 @@ export class Effects {
               ConfirmDialogData,
               ConfirmDialogResult
             >(ConfirmDialogComponent, {
-              width: '100%',
-              height: '500px',
               disableClose: true,
               data: {
                 title: this.translateService.instant(
@@ -365,8 +364,6 @@ export class Effects {
               ConfirmDialogData,
               ConfirmDialogResult
             >(ConfirmDialogComponent, {
-              width: '100%',
-              height: '500px',
               disableClose: true,
               data: {
                 title: this.translateService.instant('accounts.resetPassword'),
@@ -526,7 +523,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/settings/effects.ts

@@ -43,10 +43,8 @@ export class Effects {
               MessengerSettingsDialogData,
               MessengerSettingsDialogResult
             >(MessengerSettingsDialogComponent, {
-              width: '800px',
               maxWidth: '94vw',
               maxHeight: '90vh',
-              minHeight: '500px',
               disableClose: false,
               data: {}
             });

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

@@ -540,6 +540,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-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,14 +101,13 @@
         </div>
       </div>
     </div>
-  </mat-card-content>
-  <mat-card-actions>
-    <div class="actions-container">
     <div class="actions-message text-warn-color">
       <span *ngIf="dateIsToEarly">
         {{ 'message.errors.minTimeReservation' | translate }}
       </span>
     </div>
+    <mat-card-actions>
+      <div class="actions-container">
         <div class="actions">
           <button
             mat-stroked-button
@@ -128,4 +127,5 @@
         </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.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,7 +227,8 @@ $login-max-height: 800px;
   }
 }
 
-/*.btn-elephant {
+/* 프로필사진 옆에 보여줄때
+.btn-elephant {
   position: absolute;
   background-color: #ffffff !important;
   justify-content: center;

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

@@ -63,6 +63,10 @@
       color: #444444;
     }
   }
+  .mat-card-content {
+    position: relative;
+    height: calc(100% - 50px);
+  }
   .button-form {
     text-align: right;
     .mat-primary {
@@ -70,3 +74,56 @@
     }
   }
 }
+
+//기본 다이얼로그
+.cdk-overlay-pane {
+  max-width: 90vw;
+  max-height: 94vh;
+  .mat-dialog-container {
+    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,10 @@ body:not(.is-mobile) {
     border-radius: 12px;
   }
 }
+perfect-scrollbar {
+  .ps-content {
+    position: inherit;
+    width: inherit;
+    height: inherit;
+  }
+}

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

@@ -110,6 +110,7 @@
         <line x1="8" y1="11" x2="14" y2="11"></line>
       </svg>
     </button>
+    <!--
     <button
       *ngIf="!imageOnly"
       mat-icon-button
@@ -119,7 +120,6 @@
       aria-label=""
       (click)="onClickDownload()"
     >
-      <!--<mat-icon>get_app</mat-icon>-->
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="21"
@@ -136,6 +136,8 @@
         />
       </svg>
     </button>
+  -->
+    <!--
     <button
       *ngIf="!imageOnly"
       mat-icon-button
@@ -145,7 +147,7 @@
       aria-label=""
       (click)="onClickSaveAs()"
     >
-      <!--<mat-icon>get_app</mat-icon>-->
+
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="21"
@@ -162,6 +164,58 @@
         />
       </svg>
     </button>
+  -->
+
+    <button
+      *ngIf="!imageOnly"
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="{{ 'common.file.download' | translate }}"
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickDownload()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 19.01"
+        width="20"
+        height="20"
+        fill="currentColor"
+      >
+        <polygon
+          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
+      class="ucap-image-viewer-action"
+      matTooltip="{{ 'common.file.saveAs' | translate }}"
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickSaveAs()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+        fill="currentColor"
+      >
+        <path
+          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>
     <button
       mat-icon-button

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

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

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

@@ -14,7 +14,6 @@
     <div #messageContainer class="notice">
       {{ data.message }}
     </div>
-  </mat-card-content>
     <mat-card-actions *ngIf="!hideAction" class="button-form flex-row">
       <button
         mat-stroked-button
@@ -27,4 +26,5 @@
         {{ 'common.messages.yes' | translate }}
       </button>
     </mat-card-actions>
+  </mat-card-content>
 </mat-card>

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

@@ -1,4 +1,8 @@
-.mat-card-header {
+.confirm-card {
+  width: 100%;
+  height: 100%;
+
+  .mat-card-header {
     .mat-card-header-text {
       margin: 0;
     }
@@ -9,10 +13,15 @@
       align-self: flex-start;
       color: #444444;
     }
-}
+  }
-
+  .mat-card-content {
-form {
+    display: flex;
-  .mat-form-field {
+    flex-flow: column;
-    width: 100%;
+    .mat-card-actions {
+      display: flex;
+      align-self: flex-end;
+      flex-flow: row;
+      margin-top: auto;
+    }
   }
 }