팝업에 닫기 버튼 생성.

2020-01-29 13:14:26 +09:00 · 2020-01-29 13:14:26 +09:00 · 9ab918cd1d
commit 9ab918cd1d
parent 9b18f6ec64
30 changed files with 468 additions and 318 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.html
+++ b/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">
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.scss
@ -1,22 +1,29 @@
-.mat-card{
-  padding:10px;
-  .mat-card-header{
-    margin-bottom:20px;
-    .mat-card-title{
-      margin:0 -16px;
-      padding-bottom:10px;
+.mat-card {
+  padding: 10px;
+  .mat-card-header {
+    margin-bottom: 20px;
+    .mat-card-title {
+      margin: 0 -16px;
+      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;
-    .mat-primary{
-      margin-left:4px;
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
    }
  }
 }

-form{
-.mat-form-field{
-  width:100%;
+form {
+  .mat-form-field {
+    width: 100%;
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/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">
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
+++ b/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;
+  }
 }

 //조직도 레이아웃 변경
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.scss
+++ b/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 {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss
+++ b/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 {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss
+++ b/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{
-  margin:0;
+::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{
-    margin-bottom:20px;
-    .mat-card-header-text{
-       .mat-card-title{
-         margin:0 -16px;
+.confirm-card {
+  min-width: 500px;
+  .mat-card-header {
+    margin-bottom: 20px;
+    .mat-card-header-text {
+      .mat-card-title {
+        margin: 0 -16px;
      }
    }
  }
  .button-farm {
-    text-align:right;
-    .mat-primary{
-      margin-left:4px;
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
    }
  }
 }

-form{
-.mat-form-field{
-  width:100%;
+form {
+  .mat-form-field {
+    width: 100%;
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
+++ b/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 {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
+++ b/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
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
+++ b/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 {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.html
+++ b/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
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.scss
+++ b/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%;
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.scss
+++ b/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;
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.html
+++ b/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">
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.scss
+++ b/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 {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
+++ b/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;
+  }
+}
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
+++ b/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;
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
+++ b/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">
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
+++ b/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 {
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
@ -1,14 +1,4 @@
-<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>
-  </mat-card-header>
-  <mat-card-content>
-    <div fxLayout="column" class="rightDrawer-notice">
+<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>
-  </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>
+</div>
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
+++ b/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-title>{{ data.title }}</mat-card-title>
-    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+  <mat-card-header>
+    <mat-card-title *ngIf="data.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>
    <div #messageContainer class="notice">
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.scss
@ -1,22 +1,30 @@
-.mat-card{
-  padding:10px;
-  .mat-card-header{
-    margin-bottom:20px;
-    .mat-card-title{
-      margin:0 -16px;
-      padding-bottom:10px;
+.mat-card {
+  padding: 10px;
+  .mat-card-header {
+    margin-bottom: 20px;
+    .mat-card-title {
+      margin: 0 -16px;
+      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;
-    .mat-primary{
-      margin-left:4px;
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
    }
  }
 }

-form{
-.mat-form-field{
-  width:100%;
+form {
+  .mat-form-field {
+    width: 100%;
  }
 }
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
+++ b/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">
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
@ -1,25 +1,34 @@
-::ng-deep .mat-card-header-tex{
-  margin:0;
+::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;
+  }
 }
-.mat-card{
-  padding:10px;
-  .mat-card-header{
-    margin-bottom:20px;
-    .mat-card-title{
-      margin:0 -16px;
-      padding-bottom:10px;
+.mat-card {
+  padding: 10px;
+  .mat-card-header {
+    margin-bottom: 20px;
+    .mat-card-title {
+      margin: 0 -16px;
+      padding-bottom: 10px;
    }
  }
  .button-farm {
-    text-align:right;
-    .mat-primary{
-      margin-left:4px;
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
    }
  }
 }

-form{
-.mat-form-field{
-  width:100%;
+form {
+  .mat-form-field {
+    width: 100%;
  }
 }