From a62a18b0b6d6fc99659ca8efaa47b3c9ff9c17a8 Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Tue, 21 Jan 2020 18:20:34 +0900
Subject: [PATCH] left side drawer is implemented

---
 .../components/left-side.component.ts         | 39 +++++++++----------
 .../components/main.page.component.html       | 21 +++++-----
 .../components/main.page.component.ts         | 29 ++++++++++++--
 3 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
index 508eefda..fe111db9 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
@@ -181,8 +181,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
     if (!!this.badgeMessageInterval) {
       clearInterval(this.badgeMessageInterval);
     }
-
-    this.logger.debug('-----------------------LeftSideComponent ngOnDestroy');
   }
 
   @HostListener('mouseenter', ['$event'])
@@ -209,24 +207,25 @@ export class LeftSideComponent implements OnInit, OnDestroy {
 
   @HostListener('mouseleave', ['$event'])
   mouseLeave(event: MouseEvent) {
-    const rect = this.leftSideContainer.nativeElement.getBoundingClientRect();
-
-    const minX = rect.left;
-    const maxX = rect.left + rect.width + 5;
-    const minY = rect.top;
-    const maxY = rect.top + rect.height;
-
-    if (
-      event.pageX >= minX &&
-      event.pageX <= maxX &&
-      event.pageY >= minY &&
-      event.pageY <= maxY
-    ) {
-    } else {
-      this.store.dispatch(
-        ChatStore.toggleLeftSideDrawerIndicator({ show: false })
-      );
-    }
+    // const rect = this.leftSideContainer.nativeElement.getBoundingClientRect();
+    // const minX = rect.left;
+    // const maxX = rect.left + rect.width + 5;
+    // const minY = rect.top;
+    // const maxY = rect.top + rect.height;
+    // if (
+    //   event.pageX >= minX &&
+    //   event.pageX <= maxX &&
+    //   event.pageY >= minY &&
+    //   event.pageY <= maxY
+    // ) {
+    // } else {
+    //   this.store.dispatch(
+    //     ChatStore.toggleLeftSideDrawerIndicator({ show: false })
+    //   );
+    // }
+    this.store.dispatch(
+      ChatStore.toggleLeftSideDrawerIndicator({ show: false })
+    );
   }
 
   async onClickNewChat(type: string = 'NORMAL') {
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
index 6dddbc2b..843bc514 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
@@ -12,15 +12,6 @@
       ></app-layout-messenger-left-side>
     </mat-drawer>
     <div class="chat-messages">
-      <button
-        mat-icon-button
-        class="left-drawer-toggle"
-        *ngIf="!showLeftDrawer || showLeftDrawerIndicator"
-        (click)="onClickLeftDrawerToggle()"
-      >
-        <mat-icon>settings</mat-icon>
-      </button>
-
       <app-layout-messenger-intro
         *ngIf="!(this.selectedChat$ | async)"
       ></app-layout-messenger-intro>
@@ -32,6 +23,18 @@
         (openProfile)="onClickOpenProfile($event)"
         (closeRightDrawer)="onCloseRightDrawer()"
       ></app-layout-messenger-messages>
+      <button
+        mat-icon-button
+        class="left-drawer-toggle"
+        *ngIf="
+          !showLeftDrawer || showLeftDrawerIndicator || onLeftDrawerIndicator
+        "
+        (click)="onClickLeftDrawerToggle()"
+        (mouseover)="onMouseOverLeftDrawerIndicator($event)"
+        (mouseleave)="onMouseLeaveLeftDrawerIndicator($event)"
+      >
+        <mat-icon>settings</mat-icon>
+      </button>
     </div>
     <mat-drawer
       #rightDrawer
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
index 2ae33093..9cb0c148 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
@@ -1,4 +1,4 @@
-import { map, tap, take, catchError } from 'rxjs/operators';
+import { map, tap, take, catchError, debounce } from 'rxjs/operators';
 import {
   Component,
   OnInit,
@@ -14,7 +14,7 @@ import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
 import * as MessageStore from '@app/store/messenger/message';
 import * as StatusStore from '@app/store/messenger/status';
-import { Observable, Subscription, of } from 'rxjs';
+import { Observable, Subscription, of, timer, EMPTY } from 'rxjs';
 import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 
 import { StatusProtocolService } from '@ucap-webmessenger/protocol-status';
@@ -76,6 +76,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
 
   showLeftDrawer = true;
   showLeftDrawerIndicator = false;
+  onLeftDrawerIndicator = false;
 
   constructor(
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
@@ -121,11 +122,16 @@ export class MainPageComponent implements OnInit, OnDestroy {
         select(AppStore.MessengerSelector.ChatSelector.selectLeftSideDrawer)
       )
       .subscribe(leftSideDrawer => {
-        this.showLeftDrawer = leftSideDrawer;
         if (leftSideDrawer) {
-          this.leftSideDrawer.open();
+          this.leftSideDrawer.open().then(() => {
+            this.showLeftDrawer = true;
+          });
         } else {
+          this.showLeftDrawer = false;
           this.leftSideDrawer.close();
+          this.store.dispatch(
+            ChatStore.toggleLeftSideDrawerIndicator({ show: false })
+          );
         }
       });
 
@@ -133,6 +139,9 @@ export class MainPageComponent implements OnInit, OnDestroy {
       .pipe(
         select(
           AppStore.MessengerSelector.ChatSelector.selectLeftSideDrawerIndicator
+        ),
+        debounce(leftSideDrawerIndicator =>
+          leftSideDrawerIndicator ? EMPTY : timer(500)
         )
       )
       .subscribe(leftSideDrawerIndicator => {
@@ -434,4 +443,16 @@ export class MainPageComponent implements OnInit, OnDestroy {
   onClickLeftDrawerToggle() {
     this.store.dispatch(ChatStore.toggleLeftSideDrawer());
   }
+
+  onMouseOverLeftDrawerIndicator(event: MouseEvent) {
+    if (!this.onLeftDrawerIndicator) {
+      this.onLeftDrawerIndicator = true;
+    }
+  }
+
+  onMouseLeaveLeftDrawerIndicator(event: MouseEvent) {
+    if (this.onLeftDrawerIndicator) {
+      this.onLeftDrawerIndicator = false;
+    }
+  }
 }