refactoring of left side drawer indicator

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html

@@ -1,4 +1,4 @@
-<div #leftSideContainer class="container">
+<div class="container">
   <div fxFlexFill class="left-side-tabs-body">
     <div
       #tabs

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss

@@ -124,8 +124,3 @@
     height: 100%;
   }
 }
-
-.left-drawer-toggle {
-  position: absolute;
-  top: 0px;
-}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts

@@ -8,8 +8,7 @@ import {
   QueryList,
   ElementRef,
   OnDestroy,
-  ViewChild,
+  ViewChild
-  HostListener
 } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
@@ -31,13 +30,12 @@ import {
   UserInfoF,
   UserInfoDN
 } from '@ucap-webmessenger/protocol-query';
-import { MatTabChangeEvent } from '@angular/material';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { OpenProfileOptions } from '@ucap-webmessenger/protocol-buddy';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { MessageType } from '@ucap-webmessenger/api-message';
-import { tap, take } from 'rxjs/operators';
+import { tap } from 'rxjs/operators';
 import {
   MessageWriteDialogComponent,
   MessageWriteDialogResult,
@@ -51,7 +49,7 @@ import {
 } from '@app/types';
 import { MessageBoxComponent } from './left-sidenav/message.component';
 import { environment } from '../../../../environments/environment';
-import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-layout-messenger-left-side',
@@ -76,9 +74,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
   @ViewChild('messageBoxComponent', { static: false })
   messageBoxComponent: MessageBoxComponent;
 
-  @ViewChild('leftSideContainer', { static: false })
-  leftSideContainer: ElementRef<HTMLElement>;
-
   onLangChangeSubscription: Subscription;
 
   badgeChatUnReadCount: number;
@@ -102,6 +97,7 @@ export class LeftSideComponent implements OnInit, OnDestroy {
 
   constructor(
     private store: Store<any>,
+    public elementRef: ElementRef<HTMLElement>,
     private dialogService: DialogService,
     private sessionStorageService: SessionStorageService,
     private translateService: TranslateService,
@@ -183,51 +179,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
     }
   }
 
-  @HostListener('mouseenter', ['$event'])
-  mouseOver(event: MouseEvent) {
-    const rect = this.leftSideContainer.nativeElement.getBoundingClientRect();
-
-    const minX = rect.left + rect.width - 5;
-    const maxX = rect.left + rect.width;
-    const minY = rect.top;
-    const maxY = rect.top + rect.height;
-
-    if (
-      event.pageX >= minX &&
-      event.pageX <= maxX &&
-      event.pageY >= minY &&
-      event.pageY <= maxY
-    ) {
-      this.logger.debug('mouseOver edge of container');
-      this.store.dispatch(
-        ChatStore.toggleLeftSideDrawerIndicator({ show: true })
-      );
-    }
-  }
-
-  @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 })
-    //   );
-    // }
-    this.store.dispatch(
-      ChatStore.toggleLeftSideDrawerIndicator({ show: false })
-    );
-  }
-
   async onClickNewChat(type: string = 'NORMAL') {
     const result = await this.dialogService.open<
       CreateChatDialogComponent,

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -6,9 +6,12 @@
   <mat-drawer-container class="contents" autosize>
     <mat-drawer #leftSideDrawer mode="side" opened>
       <app-layout-messenger-left-side
+        #leftSideContainer
         (openProfile)="onClickOpenProfile($event)"
         (sendCall)="sendClickToCall($event)"
         (sendSms)="openSms($event)"
+        (mouseenter)="onMouseEnterLeftSideContainer($event)"
+        (mouseleave)="onMouseLeaveLeftSideContainer($event)"
       ></app-layout-messenger-left-side>
     </mat-drawer>
     <div class="chat-messages">

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts

@@ -5,7 +5,8 @@ import {
   Inject,
   OnDestroy,
   ViewChild,
-  NgZone
+  NgZone,
+  ElementRef
 } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
@@ -48,6 +49,7 @@ import { MessageType } from '@ucap-webmessenger/api-message';
 import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
 import { environment } from '../../../../environments/environment';
 import { TranslateService } from '@ngx-translate/core';
+import { LeftSideComponent } from '@app/layouts/messenger/components/left-side.component';
 
 @Component({
   selector: 'app-page-messenger-main',
@@ -55,8 +57,12 @@ import { TranslateService } from '@ngx-translate/core';
   styleUrls: ['./main.page.component.scss']
 })
 export class MainPageComponent implements OnInit, OnDestroy {
-  @ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer;
+  @ViewChild('rightDrawer', { static: true })
-  @ViewChild('leftSideDrawer', { static: true }) leftSideDrawer: MatDrawer;
+  rightDrawer: MatDrawer;
+  @ViewChild('leftSideDrawer', { static: true })
+  leftSideDrawer: MatDrawer;
+  @ViewChild('leftSideContainer', { static: false })
+  leftSideContainer: LeftSideComponent;
 
   selectedChat$: Observable<string | null>;
   selectedRightDrawer$: Observable<string | null>;
@@ -455,4 +461,31 @@ export class MainPageComponent implements OnInit, OnDestroy {
       this.onLeftDrawerIndicator = false;
     }
   }
+
+  onMouseEnterLeftSideContainer(event: MouseEvent) {
+    const rect = this.leftSideContainer.elementRef.nativeElement.getBoundingClientRect();
+
+    const minX = rect.left + rect.width - 10;
+    const maxX = rect.left + rect.width;
+    const minY = rect.top;
+    const maxY = rect.top + rect.height;
+
+    if (
+      event.pageX >= minX &&
+      event.pageX <= maxX &&
+      event.pageY >= minY &&
+      event.pageY <= maxY
+    ) {
+      this.logger.debug('mouseOver edge of container');
+      this.store.dispatch(
+        ChatStore.toggleLeftSideDrawerIndicator({ show: true })
+      );
+    }
+  }
+
+  onMouseLeaveLeftSideContainer(event: MouseEvent) {
+    this.store.dispatch(
+      ChatStore.toggleLeftSideDrawerIndicator({ show: false })
+    );
+  }
 }