팝업에 닫기 버튼 생성.

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

@@ -1,7 +1,10 @@
 <mat-card class="confirm-card mat-elevation-z">
+  <!-- 이용시 주의사항 항목 -->
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
-    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div #messageContainer class="notice">

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

@@ -1,22 +1,29 @@
-.mat-card{
+.mat-card {
-  padding:10px;
+  padding: 10px;
-  .mat-card-header{
+  .mat-card-header {
-    margin-bottom:20px;
+    margin-bottom: 20px;
-    .mat-card-title{
+    .mat-card-title {
-      margin:0 -16px;
+      margin: 0 -16px;
-      padding-bottom:10px;
+      padding-bottom: 10px;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
     }
   }
   .button-farm {
-    text-align:right;
+    text-align: right;
-    .mat-primary{
+    .mat-primary {
-      margin-left:4px;
+      margin-left: 4px;
     }
   }
 }
 
-form{
+form {
-.mat-form-field{
+  .mat-form-field {
-  width:100%;
+    width: 100%;
   }
 }

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

@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div *ngIf="data.type === UserSelectDialogType.NewGroup">

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

@@ -1,5 +1,14 @@
-::ng-deep .mat-card-header-tex {
+::ng-deep .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;
+  }
 }
 
 //조직도 레이아웃 변경

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

@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <form name="inputForm" [formGroup]="inputForm" novalidate>

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

@@ -1,6 +1,16 @@
-::ng-deep .mat-card-header-tex {
+::ng-deep .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;
+  }
 }
+
 .confirm-card {
   min-width: 500px;
   .mat-card-header {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html

@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <perfect-scrollbar>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss

@@ -1,6 +1,16 @@
-::ng-deep .mat-card-header-tex {
+::ng-deep .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;
+  }
 }
+
 .confirm-card {
   min-width: 500px;
   .mat-card-header {

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

@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <form name="inputForm" [formGroup]="inputForm" novalidate>

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

@@ -1,26 +1,35 @@
-::ng-deep .mat-card-header-tex{
+::ng-deep .mat-card-header {
-  margin:0;
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
-.confirm-card{
+.confirm-card {
-  min-width:500px;
+  min-width: 500px;
-  .mat-card-header{
+  .mat-card-header {
-    margin-bottom:20px;
+    margin-bottom: 20px;
-    .mat-card-header-text{
+    .mat-card-header-text {
-       .mat-card-title{
+      .mat-card-title {
-         margin:0 -16px;
+        margin: 0 -16px;
       }
     }
   }
   .button-farm {
-    text-align:right;
+    text-align: right;
-    .mat-primary{
+    .mat-primary {
-      margin-left:4px;
+      margin-left: 4px;
     }
   }
 }
 
-form{
+form {
-.mat-form-field{
+  .mat-form-field {
-  width:100%;
+    width: 100%;
   }
 }

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

@@ -1,7 +1,7 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
-    <button class="icon-button btn-dialog-close">
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
       <i class="mdi mdi-window-close"></i>
     </button>
   </mat-card-header>

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

@@ -1,5 +1,5 @@
 ::ng-deep .mat-card-header {
-  .mat-card-header-tex {
+  .mat-card-header-text {
     margin: 0;
   }
   .btn-dialog-close {

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

@@ -13,6 +13,9 @@
         }}</span>
       </ng-container>
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <mat-drawer-container

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

@@ -1,6 +1,16 @@
-::ng-deep .mat-card-header-tex {
+::ng-deep .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;
+  }
 }
+
 .confirm-card {
   min-width: 500px;
   .mat-card-content {

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

@@ -3,6 +3,9 @@
     <mat-card-title>
       {{ (isModify ? 'message.modify' : 'message.sendTo') | translate }}
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onCancel()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <ucap-message-write

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

@@ -1,3 +1,16 @@
+::ng-deep .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;
+  }
+}
+
 .confirm-card {
   min-width: 500px;
   height: 100%;

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

@@ -6,6 +6,9 @@
       </span>
       {{ data.notice.title }}
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div>

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

@@ -19,6 +19,13 @@
     width: 480px;
     @include ellipsis(1);
   }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
 .confirm-card {
   min-width: 500px;

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

@@ -18,6 +18,9 @@
         {{ 'common.messages.selectAll' | translate }}
       </mat-checkbox>
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div class="item-list">

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

@@ -1,5 +1,14 @@
-::ng-deep .mat-card-header-tex {
+::ng-deep .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;
+  }
 }
 
 .confirm-card {

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

@@ -1,4 +1,17 @@
-<ucap-integrated-search
+<mat-card class="confirm-card mat-elevation-z">
+  <mat-card-header
+    cdkDrag
+    cdkDragRootElement=".cdk-overlay-pane"
+    cdkDragHandle
+    class="card-header"
+  >
+    <mat-card-title>{{ 'search.label' | translate }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onCancel()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
+  </mat-card-header>
+  <mat-card-content>
+    <ucap-integrated-search
       [sessionVerinfo]="sessionVerinfo"
       [presence]="presence$ | async"
       [searchWord]="!!data.keyword ? data.keyword : ''"
@@ -9,5 +22,7 @@
       [pageListCount]="pageListCount"
       (search)="onSearch($event)"
       (changePage)="onChangePage($event)"
->
+    >
-</ucap-integrated-search>
+    </ucap-integrated-search>
+  </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,12 @@
+::ng-deep .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;
+  }
+}

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

@@ -154,6 +154,10 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
     }
   }
 
+  onCancel(): void {
+    this.dialogRef.close({});
+  }
+
   onChangePage(event: PageEvent) {
     this.pageCurrent = event.pageIndex + 1;
     this.pageListCount = event.pageSize;

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

@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z setting-frame">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ 'settings.label' | translate }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div fxFlex class="setting-tab">

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

@@ -13,6 +13,14 @@
     width: 100%;
     border-bottom: 1px solid #dddddd;
     margin-bottom: 12px;
+
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
   }
 
   .mat-card-content {

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

@@ -1,14 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z">
+<div fxLayout="column" class="rightDrawer-notice">
-  <mat-card-header
-    cdkDrag
-    cdkDragRootElement=".cdk-overlay-pane"
-    cdkDragHandle
-    class="card-header"
-  >
-    <mat-card-title>{{ 'search.label' | translate }}</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <div fxLayout="column" class="rightDrawer-notice">
   <div fxFlex="1 1 80px" class="search-area">
     <ucap-integrated-search-form
       [searchWord]="!!searchWord ? searchWord : ''"
@@ -214,18 +204,4 @@
       showFirstLastButtons
     ></mat-paginator>
   </div>
-    </div>
+</div>
-  </mat-card-content>
-  <!-- <mat-card-actions *ngIf="!hideAction" class="button-farm 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/alert.dialog.component.html

@@ -1,7 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
-  <mat-card-header *ngIf="data.title">
+  <mat-card-header>
-    <mat-card-title>{{ data.title }}</mat-card-title>
+    <mat-card-title *ngIf="data.title">{{ data.title }}</mat-card-title>
-    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div #messageContainer class="notice">

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

@@ -1,22 +1,30 @@
-.mat-card{
+.mat-card {
-  padding:10px;
+  padding: 10px;
-  .mat-card-header{
+  .mat-card-header {
-    margin-bottom:20px;
+    margin-bottom: 20px;
-    .mat-card-title{
+    .mat-card-title {
-      margin:0 -16px;
+      margin: 0 -16px;
-      padding-bottom:10px;
+      padding-bottom: 10px;
+    }
+
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
     }
   }
   .button-farm {
-    text-align:right;
+    text-align: right;
-    .mat-primary{
+    .mat-primary {
-      margin-left:4px;
+      margin-left: 4px;
     }
   }
 }
 
-form{
+form {
-.mat-form-field{
+  .mat-form-field {
-  width:100%;
+    width: 100%;
   }
 }

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

@@ -6,7 +6,9 @@
     class="card-header"
   >
     <mat-card-title>{{ data.title }}</mat-card-title>
-    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div #messageContainer class="notice">

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

@@ -1,25 +1,34 @@
-::ng-deep .mat-card-header-tex{
+::ng-deep .mat-card-header {
-  margin:0;
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
-.mat-card{
+.mat-card {
-  padding:10px;
+  padding: 10px;
-  .mat-card-header{
+  .mat-card-header {
-    margin-bottom:20px;
+    margin-bottom: 20px;
-    .mat-card-title{
+    .mat-card-title {
-      margin:0 -16px;
+      margin: 0 -16px;
-      padding-bottom:10px;
+      padding-bottom: 10px;
     }
   }
   .button-farm {
-    text-align:right;
+    text-align: right;
-    .mat-primary{
+    .mat-primary {
-      margin-left:4px;
+      margin-left: 4px;
     }
   }
 }
 
-form{
+form {
-.mat-form-field{
+  .mat-form-field {
-  width:100%;
+    width: 100%;
   }
 }