ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring of left side drawer indicator

Browse Source
This commit is contained in:
Richard Park 2020-01-22 10:36:14 +09:00
parent 73ea6f3ffa
commit c8b5aae629
5 changed files with 44 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -8,8 +8,7 @@ import {
QueryList,
ElementRef,
OnDestroy,
ViewChild,
HostListener
ViewChild
} 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,

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

@ -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">

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

@ -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('leftSideDrawer', { static: true }) leftSideDrawer: MatDrawer;
@ViewChild('rightDrawer', { static: true })
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 })
);
}
}