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

left side drawer is implemented

Browse Source
This commit is contained in:
Richard Park 2020-01-21 18:20:34 +09:00
parent 09e419c917
commit a62a18b0b6
3 changed files with 56 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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') {

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

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

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

@ -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;
}
}
}