From 7da4bfb5ee77624c48507e0898fd4fe208660994 Mon Sep 17 00:00:00 2001
From: khk <kanghk@biztechpartners.co.kr>
Date: Tue, 26 Nov 2019 10:56:58 +0900
Subject: [PATCH] =?UTF-8?q?=ED=85=8C=EB=A7=88=EC=84=A0=ED=83=9D-=20tab?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../messenger-settings.dialog.component.html  |  2 +-
 .../messenger-settings.dialog.component.scss  | 31 +++++--
 .../src/assets/scss/global/_default.scss      |  2 +-
 .../src/lib/components/general.component.html | 33 ++++----
 .../src/lib/components/general.component.scss | 80 ++++++++++++++-----
 5 files changed, 105 insertions(+), 43 deletions(-)

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 7444dca5..c76235f8 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
@@ -4,7 +4,7 @@
   </mat-card-header>
   <mat-card-content>
     <div fxFlex class="setting-tab">
-      <mat-tab-group animationDuration="0ms" vertical>
+      <mat-tab-group animationDuration="0ms">
         <mat-tab>
           <ng-template mat-tab-label>
             <span class="mdi mdi-settings"></span>
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 11a27ce9..0eb9e3fc 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
@@ -25,11 +25,30 @@
       position: relative;
       width: 100%;
       height: 100%;
-      .mat-tab-body-wrapper {
-        border-left: 1px solid #dddddd;
-        position: relative;
-        height: 100%;
-        padding: 0 0 10px 10px;
+      .mat-tab-group {
+        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: self-start;
+              justify-content: flex-start;
+            }
+            .mat-ink-bar {
+              display: none;
+            }
+          }
+        }
+        .mat-tab-body-wrapper {
+          border-left: 1px solid #dddddd;
+          position: relative;
+          height: 100%;
+          padding: 0 0 10px 10px;
+        }
       }
     }
   }
@@ -51,6 +70,8 @@
     height: 100%;
     width: 100%;
     .mat-tab-header {
+      width: 160px;
+      flex-flow: column;
       .mat-tab-label-container {
         .mat-tab-list {
           .mat-tab-labels {
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 c6f51af9..d6536dbb 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -320,7 +320,7 @@ $daesang-grey: (
 
   mat-tab-group[vertical] {
     display: flex;
-    flex-direction: row !important;
+    flex-direction: row;
 
     .mat-tab-labels {
       display: flex;
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 98f25ae4..ab0aea14 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,40 +1,43 @@
 <div>
   <mat-list>
     <h1 mat-subheader>테마</h1>
-
-    <ul class="theme-list">
+    <!--<ul class="theme-list">
       <li
-        class="theme-box default on"
+        class="theme-box default"
         (click)="onSelectedTabChange('theme-default')"
       ></li>
       <li
         class="theme-box lgRed"
         (click)="onSelectedTabChange('theme-lgRed')"
       ></li>
-    </ul>
-    <mat-list-item>
-      <!-- <mat-tab-group
+    </ul>-->
+    <mat-list-item class="theme-select">
+      <mat-tab-group
         mat-stretch-tabs
         animationDuration="0ms"
         (selectedTabChange)="onSelectedTabChange($event)"
+        fxLayout="row"
+        class="theme-list"
       >
         <mat-tab>
-          <ng-template mat-tab-label>
+          <ng-template mat-tab-label class="theme-item">
             <div class="theme-box default-theme"></div>
-            <div>기본값</div>
+            <div class="theme-name">기본값</div>
           </ng-template>
         </mat-tab>
         <mat-tab>
-          <ng-template mat-tab-label>
+          <ng-template mat-tab-label class="theme-item">
             <div class="theme-box lg-red-theme"></div>
-            <div>LG Red</div>
+            <div class="theme-name">LG Red</div>
           </ng-template>
         </mat-tab>
-      </mat-tab-group> -->
-      <!--
-     <span>기본값</span>
-      <span>어둡게</span>
-      <span>밝게</span> -->
+      </mat-tab-group>
+
+      <div class="brightness">
+        <span>기본값</span>
+        <span>어둡게</span>
+        <span>밝게</span>
+      </div>
     </mat-list-item>
 
     <mat-divider></mat-divider>
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 3a190f10..d42e3d64 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
@@ -1,34 +1,72 @@
-.theme-list {
+::ng-deep .mat-list-base {
+  .theme-select.mat-list-item {
+    position: relative;
+    height: 200px;
+    .mat-list-item-content {
+      flex-direction: column;
+    }
+  }
+}
+
+::ng-deep .theme-list {
   position: relative;
   display: flex;
   flex-flow: row;
+  width: 100%;
   margin: 10px;
-  height: 120px;
-
-  .theme-box {
-    width: 140px;
-    height: 98px;
-    margin-right: 10px;
-    border: 1px solid #dddddd;
-    background-size: 100% auto;
-    background-repeat: no-repeat;
-    opacity: 0.7;
-    &.default {
-      background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png');
+  height: auto !important;
+  .mat-tab-header {
+    position: relative;
+    width: 100% !important;
+    .mat-tab-labels {
+      position: relative;
+      width: 100%;
+      flex-flow: row !important;
+      .mat-tab-label {
+        width: 140px;
+        height: 120px;
+        .mat-tab-label-content {
+          position: relative;
+          flex-flow: column;
+          width: 100%;
+        }
+      }
     }
-    &.lgRed {
-      background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png');
-    }
-    &.on {
-      border: 1px solid #333333;
-      opacity: 1;
+    .mat-ink-bar {
+      display: none;
     }
   }
+  .mat-tab-body-wrapper {
+    border-left: none;
+  }
+}
 
-  .default-theme {
+.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;
+  border: 1px solid #dddddd;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  &.default-theme {
     background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png');
   }
-  .lg-red-theme {
+  &.lg-red-theme {
     background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png');
   }
 }
+
+.brightness {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}