From 6ed31ffd62ad82126b6ab9ca8abbe7dec1f794f4 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Tue, 11 Feb 2020 17:13:46 +0900
Subject: [PATCH] =?UTF-8?q?ng-deep=20=EC=82=AD=EC=A0=9C=20=ED=9B=84=20?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=88:=20=ED=99=98=EA=B2=BD=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat/clipboard.dialog.component.scss      |  4 +-
 .../messenger-settings.dialog.component.html  |  6 +-
 .../messenger-settings.dialog.component.scss  | 60 ++++++++++++-------
 .../components/main.page.component.scss       |  2 +-
 .../src/lib/components/general.component.html |  2 +-
 .../src/lib/components/general.component.scss | 37 +++++++++---
 6 files changed, 73 insertions(+), 38 deletions(-)

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 58580a0a..c2da493c 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
@@ -77,14 +77,14 @@
     width: 100%;
 
     .mat-tab-header {
-      width: 160px;
+      width: 170px;
       flex-flow: column;
       border-right: 1px solid #dddddd;
       .mat-tab-label-container {
         .mat-tab-list {
           .mat-tab-labels {
             border-bottom: 0;
-            padding-right: 10px;
+            //padding-right: 10px;
             .mat-tab-label {
               padding: 0 10px;
             }
diff --git 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
index 3f30b878..ec3d2e2c 100644
--- 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
@@ -13,7 +13,7 @@
   <mat-card-content>
     <div fxFlex class="setting-tab">
       <mat-tab-group animationDuration="0ms">
-        <mat-tab>
+        <mat-tab class="setting">
           <ng-template mat-tab-label>
             <span class="mdi mdi-settings"></span>
             {{ 'settings.typeGenernal' | translate }}
@@ -36,7 +36,7 @@
             class="setting-category"
           ></ucap-settings-privacy>
         </mat-tab> -->
-        <mat-tab>
+        <mat-tab class="setting">
           <ng-template mat-tab-label>
             <span class="mdi mdi-bell"></span>
             {{ 'settings.typeNotification' | translate }}
@@ -72,7 +72,7 @@
           </ng-template>
           <ucap-settings-call class="setting-category"></ucap-settings-call>
         </mat-tab> -->
-        <mat-tab>
+        <mat-tab class="setting">
           <ng-template mat-tab-label>
             <span class="mdi mdi-chat"></span>
             {{ 'settings.typeChat' | translate }}
diff --git 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
index c4ad3975..3c8237c9 100644
--- 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
@@ -1,4 +1,4 @@
-::ng-deep .setting-frame {
+.setting-frame {
   padding: 16px;
   height: 100%;
   min-width: 500px;
@@ -33,23 +33,11 @@
       width: 100%;
       height: 100%;
       .mat-tab-group {
+        display: flex;
         flex-direction: row;
-        .mat-tab-header {
-          width: 160px;
-          .mat-tab-labels {
-            flex-direction: column;
-            .mat-tab-label {
-              padding: 0 10px;
-              align-content: flex-start;
-              text-align: left;
-              align-items: center;
-              justify-content: flex-start;
-            }
-          }
-          .mat-ink-bar {
-            display: none;
-          }
-        }
+        position: relative;
+        height: 100%;
+        width: 100%;
       }
     }
   }
@@ -65,21 +53,46 @@
   }
 }
 
-::ng-deep .setting-tab {
-  .mat-tab-group {
-    position: relative;
-    height: 100%;
-    width: 100%;
+.setting-category {
+}
 
+::ng-deep .setting-tab {
+  .mat-tab-header {
+    border: none !important;
+    .mat-tab-labels {
+      flex-direction: column;
+      border: none;
+      .mat-tab-label {
+        padding: 0 10px;
+        align-content: flex-start;
+        text-align: left;
+        align-items: center;
+        justify-content: flex-start;
+      }
+    }
+    .mat-ink-bar {
+      display: none;
+    }
+  }
+
+  .mat-tab-body-wrapper {
+    flex: 1 1 auto;
+    border-left: 1px solid #dddddd;
+  }
+}
+
+/*::ng-deep .setting-tab {
+  .mat-tab-group {
     .mat-tab-header {
       width: 160px;
       flex-flow: column;
+      flex: 0 0 auto;
       border-right: 1px solid #dddddd;
       .mat-tab-label-container {
         .mat-tab-list {
           .mat-tab-labels {
             border-bottom: 0;
-            padding-right: 10px;
+            //padding-right: 10px;
             .mat-tab-label {
               padding: 0 10px;
             }
@@ -120,3 +133,4 @@
     }
   }
 }
+*/
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
index c416a80d..faa5a584 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
@@ -62,7 +62,7 @@
 ::ng-deep .mat-tab-labels {
   display: flex;
   width: 100%;
-  border-bottom: 2px solid #dddddd;
+  //border-bottom: 2px solid #dddddd;
   flex: 1 1 auto;
   justify-content: space-around;
 }
diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
index 5538ded6..01e12359 100644
--- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
+++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
@@ -1,4 +1,4 @@
-<div>
+<div class="set-general">
   <mat-list>
     <h1 mat-subheader>{{ 'settings.genernal.theme' | translate }}</h1>
     <!--<ul class="theme-list">
diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
index 6cbcedc7..e41072ab 100644
--- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
+++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
@@ -41,15 +41,31 @@
   }
 }
 
-.theme-item {
-  width: 140px;
-  height: 98px;
-  margin-right: 10px;
-  border: 1px solid #dddddd;
-  background-size: 100% auto;
-  background-repeat: no-repeat;
-  opacity: 0.7;
+/*
+.mat-list-item {
+  margin-bottom: 10px;
 }
+.set-general {
+  .theme-select {
+    position: relative;
+    width: 100%;
+    height: 160px;
+    .theme-list {
+      position: relative;
+      height: 160px;
+      .theme-item {
+        width: 140px;
+        height: 98px;
+        margin-right: 10px;
+        border: 1px solid #dddddd;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+*/
 .theme-box {
   width: 140px;
   height: 98px;
@@ -70,3 +86,8 @@
   display: flex;
   flex-direction: row;
 }
+
+.mat-divider {
+  position: relative;
+  padding-top: 10px;
+}