From 7d76bb707657b2de7f72ad8f26a9985cf6487f7b Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Thu, 21 Nov 2019 15:19:27 +0900
Subject: [PATCH] vertial tab is modified

---
 .../messenger-settings.dialog.component.html  | 42 +++++++++++++++----
 .../src/assets/scss/global/_default.scss      | 14 +++++--
 2 files changed, 43 insertions(+), 13 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 b8ca4a78..7da16f55 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" mat-stretch-tabs>
+      <mat-tab-group animationDuration="0ms" vertical>
         <mat-tab>
           <ng-template mat-tab-label>
             <span class="mdi mdi-settings"></span>
@@ -49,28 +49,52 @@
         </mat-tab>
       </mat-tab-group>
 
-      <div class="left-side-tabs-body">
-        <div #tabs id="tabs-0" class="left-side-tabs-contents" style="display: block;">
+      <!-- <div class="left-side-tabs-body">
+        <div
+          #tabs
+          id="tabs-0"
+          class="left-side-tabs-contents"
+          style="display: block;"
+        >
           ddddd
         </div>
-        <div #tabs id="tabs-1" class="left-side-tabs-contents" style="display: none;">
+        <div
+          #tabs
+          id="tabs-1"
+          class="left-side-tabs-contents"
+          style="display: none;"
+        >
           dddagadsfgadsf
         </div>
-        <div #tabs id="tabs-2" class="left-side-tabs-contents" style="display: none;">
+        <div
+          #tabs
+          id="tabs-2"
+          class="left-side-tabs-contents"
+          style="display: none;"
+        >
           fbkasfldsafkskdf
         </div>
-        <div #tabs id="tabs-3" class="left-side-tabs-contents" style="display: none;">
+        <div
+          #tabs
+          id="tabs-3"
+          class="left-side-tabs-contents"
+          style="display: none;"
+        >
           rgkdsfgkdfglkdsflgs
         </div>
-      </div>
+      </div> -->
     </div>
   </mat-card-content>
   <mat-card-actions class="button-farm flex-row">
-    <button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
+    <button
+      mat-stroked-button
+      (click)="onClickChoice(false)"
+      class="mat-primary"
+    >
       No
     </button>
     <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
       Yes
     </button>
   </mat-card-actions>
-</mat-card>
\ No newline at end of file
+</mat-card>
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 7bed9a97..33f12de3 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -301,6 +301,11 @@ $daesang-grey: (
     .mat-tab-labels {
       display: flex;
       flex-direction: column !important;
+      align-content: flex-start;
+
+      .mat-tab-label {
+        justify-content: flex-start;
+      }
     }
 
     .mat-ink-bar {
@@ -313,12 +318,13 @@ $daesang-grey: (
   nav[mat-tab-nav-bar][vertical] {
     display: flex;
     flex-direction: row !important;
+
+    .mat-tab-links {
+      display: flex;
+      flex-direction: column !important;
+    }
   }
 
-  nav[mat-tab-nav-bar][vertical] .mat-tab-links {
-    display: flex;
-    flex-direction: column !important;
-  }
   .messages .container {
     background: mat-color($accent, 50);
   }