From 23507a52aad66e6f54866fc0bc33eab2855f31d0 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Fri, 14 Feb 2020 17:33:37 +0900
Subject: [PATCH] =?UTF-8?q?=EC=84=B8=EB=A1=9C=ED=98=95=20mat-tab=20?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat/clipboard.dialog.component.html      |  8 +-
 .../chat/clipboard.dialog.component.scss      | 93 ++++++++++---------
 .../src/assets/scss/global/_default.scss      | 26 ++++--
 3 files changed, 72 insertions(+), 55 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/clipboard.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/clipboard.dialog.component.html
index 662b94bd..e1672ad4 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/clipboard.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/clipboard.dialog.component.html
@@ -15,13 +15,15 @@
       <mat-tab-group animationDuration="0ms" vertical>
         <mat-tab *ngIf="data.content.text">
           <ng-template mat-tab-label>
-            <mat-checkbox #chkText> </mat-checkbox>
+            <mat-checkbox #chkText checked="true"> </mat-checkbox>
             <span class="title-text">{{
               'common.file.clipboardType.text' | translate
             }}</span>
           </ng-template>
           <perfect-scrollbar>
-            <div style="white-space: pre-wrap;">{{ data.content.text }}</div>
+            <div class="clipboard-text" style="white-space: pre-wrap;">
+              {{ data.content.text }}
+            </div>
           </perfect-scrollbar>
         </mat-tab>
         <!-- <mat-tab *ngIf="data.content.rtf">
@@ -59,7 +61,7 @@
           </ng-template>
 
           <perfect-scrollbar>
-            <div>
+            <div class="clipboard-img">
               <img [src]="data.content.imageDataUrl" />
             </div>
           </perfect-scrollbar>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/clipboard.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/clipboard.dialog.component.scss
index b71eb7e3..1b44fb18 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/clipboard.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/clipboard.dialog.component.scss
@@ -1,55 +1,64 @@
-.clipboard-frame {
-  padding: 16px;
-  height: 100%;
-  min-width: 500px;
-  position: relative;
-
-  .mat-dialog-container {
+.clipboard {
+  &-frame {
+    padding: 16px;
+    height: 100%;
+    min-width: 500px;
     position: relative;
-  }
 
-  .mat-card-header {
-    position: relative;
-    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-dialog-container {
+      position: relative;
     }
-  }
-  .mat-card-content {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: flex-start;
-    height: calc(100% - 100px);
-    border-bottom: 1px solid #dddddd;
-    .clipboard-tab {
+
+    .mat-card-header {
       position: relative;
       width: 100%;
-      height: 100%;
-      .mat-tab-group {
+      border-bottom: 1px solid #dddddd;
+      margin-bottom: 12px;
+
+      .btn-dialog-close {
+        font-size: 20px;
         display: flex;
-        flex-direction: row;
+        margin-left: auto;
+        align-self: flex-start;
+        color: #444444;
+      }
+    }
+    .mat-card-content {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: flex-start;
+      height: calc(100% - 100px);
+      border-bottom: 1px solid #dddddd;
+      .clipboard-tab {
         position: relative;
-        height: 100%;
         width: 100%;
+        height: 100%;
+        .mat-tab-group {
+          display: flex;
+          flex-direction: row;
+          position: relative;
+          height: 100%;
+          width: 100%;
+        }
+      }
+    }
+
+    .button-farm {
+      text-align: right;
+      position: absolute;
+      width: 100%;
+      bottom: 10px;
+      margin: 0 -16px;
+      .mat-primary {
+        margin-left: 4px;
       }
     }
   }
-
-  .button-farm {
-    text-align: right;
-    position: absolute;
-    width: 100%;
-    bottom: 10px;
-    margin: 0 -16px;
-    .mat-primary {
-      margin-left: 4px;
-    }
+  &-text {
+    padding: 0 10px;
+    white-space: pre-wrap;
+  }
+  &-img {
+    padding: 0 10px;
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
index 8dd59ef1..395102dc 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -407,15 +407,21 @@ $daesang-grey: (
   mat-tab-group[vertical] {
     display: flex;
     flex-direction: row;
-    .mat-tab-labels {
-      display: flex;
-      flex-direction: column;
-      align-content: flex-start;
-      .mat-tab-label {
-        justify-content: flex-start;
-        padding: 0;
-        .mat-checkbox {
-          margin-right: 8px;
+    .mat-tab-header {
+      border-bottom: none;
+      .mat-tab-labels {
+        display: flex;
+        flex-direction: column;
+        align-content: flex-start;
+        .mat-tab-label {
+          justify-content: flex-start;
+          padding: 0;
+          &[aria-selected='true'] {
+            opacity: 1;
+          }
+          .mat-checkbox {
+            margin-right: 8px;
+          }
         }
       }
     }
@@ -425,7 +431,7 @@ $daesang-grey: (
     .mat-tab-body-wrapper {
       flex: 1 1 auto;
       border-left: 1px solid #dddddd;
-      padding: 0 10px;
+      padding: 0;
     }
   }