From 4dc92c000521f644278f8ad78b4368ea7d7abdab Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Mon, 18 Nov 2019 09:22:36 +0900
Subject: [PATCH] refactoring

---
 .../components/left-side.component.html       | 28 +++++-
 .../components/left-side.component.scss       |  6 ++
 .../left-sidenav/group.component.html         | 96 ++++++++++---------
 3 files changed, 80 insertions(+), 50 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
index f5bb42f0..bb16ccf8 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
@@ -119,17 +119,32 @@
   </mat-tab-group>
 
   <div class="left-side-tabs-body">
-    <div #tabs id="tabs-0" style="display: block;">
+    <div
+      #tabs
+      id="tabs-0"
+      class="left-side-tabs-contents"
+      style="display: block;"
+    >
       <app-layout-chat-left-sidenav-group
         class="left-group-side"
         (newGroupAndMember)="onClickNewGroupAndMember()"
         (openProfile)="onClickOpenProfile($event)"
       ></app-layout-chat-left-sidenav-group>
     </div>
-    <div #tabs id="tabs-1" style="display: none;">
+    <div
+      #tabs
+      id="tabs-1"
+      class="left-side-tabs-contents"
+      style="display: none;"
+    >
       <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
     </div>
-    <div #tabs id="tabs-2" style="display: none;">
+    <div
+      #tabs
+      id="tabs-2"
+      class="left-side-tabs-contents"
+      style="display: none;"
+    >
       <app-layout-chat-left-sidenav-organization
         [selectedUserList]="selectedUserList"
         (checkAllUser)="onCheckAllUser($event)"
@@ -137,7 +152,12 @@
         class="organization-side"
       ></app-layout-chat-left-sidenav-organization>
     </div>
-    <div #tabs id="tabs-3" style="display: none;">
+    <div
+      #tabs
+      id="tabs-3"
+      class="left-side-tabs-contents"
+      style="display: none;"
+    >
       <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
     </div>
   </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
index a6a2aa9a..6df06efc 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
@@ -15,6 +15,12 @@
 .left-side-tabs-body {
   height: 100%;
   width: 100%;
+  overflow: hidden;
+
+  .left-side-tabs-contents {
+    height: 100%;
+    width: 100%;
+  }
 }
 
 .container {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
index 08e4e596..5a334d21 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@@ -19,52 +19,12 @@
     (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
     (cancel)="onClickCancel()"
   ></ucap-organization-tenant-search>
-
-  <mat-menu
-    #groupMenu="matMenu"
-    xPosition="after"
-    yPosition="below"
-    [hasBackdrop]="false"
-  >
-    <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
-      <!--<mat-icon>group_add</mat-icon>-->
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="butt"
-        stroke-linejoin="round"
-      >
-        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-        <circle cx="8.5" cy="7" r="4"></circle>
-        <line x1="20" y1="8" x2="20" y2="14"></line>
-        <line x1="23" y1="11" x2="17" y2="11"></line>
-      </svg>
-      <span>새 그룹 추가</span>
-    </button>
-    <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
-      <mat-icon>expand_more</mat-icon>
-      <span>그룹 전체 열기</span>
-    </button>
-    <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
-      <mat-icon>expand_less</mat-icon>
-      <span>그룹 전체 닫기</span>
-    </button>
-    <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">
-      <mat-icon>save</mat-icon>
-      <span>그룹 저장하기</span>
-    </button>
-    <button mat-menu-item (click)="onClickGroupMenu('GROUP_RESTORE')">
-      <mat-icon>restore</mat-icon>
-      <span>그룹 가져오기</span>
-    </button>
-  </mat-menu>
 </div>
-<div *ngIf="!isShowSearch" class="search-result" style="overflow: auto;">
+<div
+  [style.display]="isShowSearch ? 'none' : 'block'"
+  class="search-result"
+  style="overflow: auto;"
+>
   <perfect-scrollbar>
     <ucap-group-expansion-panel
       #groupExpansionPanel
@@ -85,7 +45,7 @@
     </ucap-group-expansion-panel>
   </perfect-scrollbar>
 </div>
-<div *ngIf="isShowSearch" class="search-result">
+<div [style.display]="isShowSearch ? 'block' : 'none'" class="search-result">
   <div *ngIf="searchProcessing">
     <mat-progress-bar mode="indeterminate"></mat-progress-bar>
   </div>
@@ -105,6 +65,50 @@
   </ucap-profile-user-list-item>
 </div>
 
+<mat-menu
+  #groupMenu="matMenu"
+  xPosition="after"
+  yPosition="below"
+  [hasBackdrop]="false"
+>
+  <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
+    <!--<mat-icon>group_add</mat-icon>-->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+    >
+      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+      <circle cx="8.5" cy="7" r="4"></circle>
+      <line x1="20" y1="8" x2="20" y2="14"></line>
+      <line x1="23" y1="11" x2="17" y2="11"></line>
+    </svg>
+    <span>새 그룹 추가</span>
+  </button>
+  <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
+    <mat-icon>expand_more</mat-icon>
+    <span>그룹 전체 열기</span>
+  </button>
+  <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
+    <mat-icon>expand_less</mat-icon>
+    <span>그룹 전체 닫기</span>
+  </button>
+  <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">
+    <mat-icon>save</mat-icon>
+    <span>그룹 저장하기</span>
+  </button>
+  <button mat-menu-item (click)="onClickGroupMenu('GROUP_RESTORE')">
+    <mat-icon>restore</mat-icon>
+    <span>그룹 가져오기</span>
+  </button>
+</mat-menu>
+
 <div
   style="visibility: hidden; position: fixed"
   [style.left]="profileContextMenuPosition.x"