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 0dfd4d00..cf3a5a45 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 @@ -64,12 +64,3 @@ (buttonClick)="onClickFab($event)" > - - 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 87983add..508eefda 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 @@ -100,8 +100,6 @@ export class LeftSideComponent implements OnInit, OnDestroy { loginRes: LoginResponse; loginResSubscription: Subscription; - showLeftDrawerToggle = false; - constructor( private store: Store, private dialogService: DialogService, @@ -203,17 +201,32 @@ export class LeftSideComponent implements OnInit, OnDestroy { event.pageY <= maxY ) { this.logger.debug('mouseOver edge of container'); - this.showLeftDrawerToggle = true; + this.store.dispatch( + ChatStore.toggleLeftSideDrawerIndicator({ show: true }) + ); } } @HostListener('mouseleave', ['$event']) mouseLeave(event: MouseEvent) { - this.showLeftDrawerToggle = false; - } + const rect = this.leftSideContainer.nativeElement.getBoundingClientRect(); - onClickLeftDrawerToggle() { - this.store.dispatch(ChatStore.toggleLeftSideDrawer()); + 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 }) + ); + } } 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 8544e4eb..6dddbc2b 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,6 +12,15 @@ >
+ + diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss index b69b08d7..cdce1e12 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss +++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss @@ -48,3 +48,8 @@ flex: 1 1 auto; justify-content: space-around; } + +.left-drawer-toggle { + position: absolute; + top: calc(50% - 20px); +} 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 82511507..2ae33093 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 @@ -55,6 +55,9 @@ 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; + selectedChat$: Observable; selectedRightDrawer$: Observable; idleStateChangedSubscription: Subscription; @@ -62,6 +65,7 @@ export class MainPageComponent implements OnInit, OnDestroy { msgOpenMessageSubscription: Subscription; myIdleCheckTimeSubscription: Subscription; leftSideDrawerSubscription: Subscription; + leftSideDrawerIndicatorSubscription: Subscription; defaultLeftSideComponentWidth = 380; leftSideComponentWidth = this.defaultLeftSideComponentWidth; @@ -70,8 +74,8 @@ export class MainPageComponent implements OnInit, OnDestroy { loginResSubscription: Subscription; environmentsInfo: EnvironmentsInfo; - @ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer; - @ViewChild('leftSideDrawer', { static: true }) leftSideDrawer: MatDrawer; + showLeftDrawer = true; + showLeftDrawerIndicator = false; constructor( @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService, @@ -117,6 +121,7 @@ export class MainPageComponent implements OnInit, OnDestroy { select(AppStore.MessengerSelector.ChatSelector.selectLeftSideDrawer) ) .subscribe(leftSideDrawer => { + this.showLeftDrawer = leftSideDrawer; if (leftSideDrawer) { this.leftSideDrawer.open(); } else { @@ -124,6 +129,16 @@ export class MainPageComponent implements OnInit, OnDestroy { } }); + this.leftSideDrawerIndicatorSubscription = this.store + .pipe( + select( + AppStore.MessengerSelector.ChatSelector.selectLeftSideDrawerIndicator + ) + ) + .subscribe(leftSideDrawerIndicator => { + this.showLeftDrawerIndicator = leftSideDrawerIndicator; + }); + this.idleStateChangedSubscription = this.nativeService .idleStateChanged() .subscribe(action => { @@ -236,6 +251,10 @@ export class MainPageComponent implements OnInit, OnDestroy { this.leftSideDrawerSubscription.unsubscribe(); } + if (!!this.leftSideDrawerIndicatorSubscription) { + this.leftSideDrawerIndicatorSubscription.unsubscribe(); + } + this.logger.debug('-----------------------MainPageComponent ngOnDestroy'); } @@ -411,4 +430,8 @@ export class MainPageComponent implements OnInit, OnDestroy { onCloseRightDrawer() { this.rightDrawer.close(); } + + onClickLeftDrawerToggle() { + this.store.dispatch(ChatStore.toggleLeftSideDrawer()); + } } diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts index 6aae0ebf..820d2a04 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts +++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts @@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common'; import { FlexLayoutModule } from '@angular/flex-layout'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; import { MatSidenavModule } from '@angular/material/sidenav'; import { AppMessengerLayoutModule } from '@app/layouts/messenger/messenger.layout.module'; @@ -17,13 +19,15 @@ import { AngularSplitModule } from 'angular-split'; imports: [ CommonModule, FlexLayoutModule, + MatButtonModule, + MatIconModule, MatSidenavModule, AppMessengerLayoutModule, AppMessengerRoutingPageModule, - AngularSplitModule.forRoot(), + AngularSplitModule.forRoot() ], declarations: [...COMPONENTS], - entryComponents: [], + entryComponents: [] }) export class AppMessengerPageModule {} diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts index 0954354a..b4f100f2 100644 --- a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts +++ b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts @@ -57,3 +57,8 @@ export const clearRightDrawer = createAction( export const toggleLeftSideDrawer = createAction( '[Messenger::Chat] Toggle Left Side Drawer' ); + +export const toggleLeftSideDrawerIndicator = createAction( + '[Messenger::Chat] Toggle Left Side Drawer Indicator', + props<{ show: boolean }>() +); diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/reducers.ts index b7c52629..9caa2fe2 100644 --- a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/reducers.ts +++ b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/reducers.ts @@ -9,7 +9,8 @@ import { clearSelectedRoom, selectedRightDrawer, clearRightDrawer, - toggleLeftSideDrawer + toggleLeftSideDrawer, + toggleLeftSideDrawerIndicator } from './actions'; import * as AuthenticationStore from '@app/store/account/authentication'; @@ -68,6 +69,12 @@ export const reducer = createReducer( leftSideDrawer: !state.leftSideDrawer }; }), + on(toggleLeftSideDrawerIndicator, (state, action) => { + return { + ...state, + leftSideDrawerIndicator: action.show + }; + }), on(clearRightDrawer, (state, action) => { return { ...state, diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/state.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/state.ts index 446d00ff..77e5f79f 100644 --- a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/state.ts +++ b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/state.ts @@ -8,6 +8,7 @@ export interface State { selectedRightDrawer: string | null; leftSideDrawer: boolean; + leftSideDrawerIndicator: boolean; } export const initialState: State = { @@ -15,7 +16,8 @@ export const initialState: State = { selectedMassDetail: null, massDetailProcessing: false, selectedRightDrawer: '', - leftSideDrawer: true + leftSideDrawer: true, + leftSideDrawerIndicator: false }; export function selectors(selector: Selector) { @@ -35,6 +37,10 @@ export function selectors(selector: Selector) { selectLeftSideDrawer: createSelector( selector, (state: State) => state.leftSideDrawer + ), + selectLeftSideDrawerIndicator: createSelector( + selector, + (state: State) => state.leftSideDrawerIndicator ) }; }