left side drawer is implemented
This commit is contained in:
parent
6952b84edb
commit
0f51d458e0
|
@ -65,6 +65,11 @@
|
|||
></ucap-float-action-button>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button class="left-drawer-toggle" *ngIf="showLeftDrawerToggle">
|
||||
<button
|
||||
mat-icon-button
|
||||
class="left-drawer-toggle"
|
||||
*ngIf="showLeftDrawerToggle"
|
||||
(click)="onClickLeftDrawerToggle()"
|
||||
>
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
|
|
|
@ -212,6 +212,10 @@ export class LeftSideComponent implements OnInit, OnDestroy {
|
|||
this.showLeftDrawerToggle = false;
|
||||
}
|
||||
|
||||
onClickLeftDrawerToggle() {
|
||||
this.store.dispatch(ChatStore.toggleLeftSideDrawer());
|
||||
}
|
||||
|
||||
async onClickNewChat(type: string = 'NORMAL') {
|
||||
const result = await this.dialogService.open<
|
||||
CreateChatDialogComponent,
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
|
||||
<mat-drawer-container class="contents" autosize>
|
||||
<mat-drawer #drawer mode="side" opened>
|
||||
<mat-drawer #leftSideDrawer mode="side" opened>
|
||||
<app-layout-messenger-left-side
|
||||
(openProfile)="onClickOpenProfile($event)"
|
||||
(sendCall)="sendClickToCall($event)"
|
||||
|
|
|
@ -61,6 +61,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
|
|||
chatOpenRoomSubscription: Subscription;
|
||||
msgOpenMessageSubscription: Subscription;
|
||||
myIdleCheckTimeSubscription: Subscription;
|
||||
leftSideDrawerSubscription: Subscription;
|
||||
|
||||
defaultLeftSideComponentWidth = 380;
|
||||
leftSideComponentWidth = this.defaultLeftSideComponentWidth;
|
||||
|
@ -70,6 +71,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
|
|||
environmentsInfo: EnvironmentsInfo;
|
||||
|
||||
@ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer;
|
||||
@ViewChild('leftSideDrawer', { static: true }) leftSideDrawer: MatDrawer;
|
||||
|
||||
constructor(
|
||||
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
|
||||
|
@ -110,6 +112,18 @@ export class MainPageComponent implements OnInit, OnDestroy {
|
|||
})
|
||||
);
|
||||
|
||||
this.leftSideDrawerSubscription = this.store
|
||||
.pipe(
|
||||
select(AppStore.MessengerSelector.ChatSelector.selectLeftSideDrawer)
|
||||
)
|
||||
.subscribe(leftSideDrawer => {
|
||||
if (leftSideDrawer) {
|
||||
this.leftSideDrawer.open();
|
||||
} else {
|
||||
this.leftSideDrawer.close();
|
||||
}
|
||||
});
|
||||
|
||||
this.idleStateChangedSubscription = this.nativeService
|
||||
.idleStateChanged()
|
||||
.subscribe(action => {
|
||||
|
@ -218,6 +232,10 @@ export class MainPageComponent implements OnInit, OnDestroy {
|
|||
this.myIdleCheckTimeSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
if (!!this.leftSideDrawerSubscription) {
|
||||
this.leftSideDrawerSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
this.logger.debug('-----------------------MainPageComponent ngOnDestroy');
|
||||
}
|
||||
|
||||
|
|
|
@ -53,3 +53,7 @@ export const clearRightDrawer = createAction(
|
|||
'[Messenger::Chat] Clear Right Drawer',
|
||||
props()
|
||||
);
|
||||
|
||||
export const toggleLeftSideDrawer = createAction(
|
||||
'[Messenger::Chat] Toggle Left Side Drawer'
|
||||
);
|
||||
|
|
|
@ -8,7 +8,8 @@ import {
|
|||
massTalkDownloadSuccess,
|
||||
clearSelectedRoom,
|
||||
selectedRightDrawer,
|
||||
clearRightDrawer
|
||||
clearRightDrawer,
|
||||
toggleLeftSideDrawer
|
||||
} from './actions';
|
||||
|
||||
import * as AuthenticationStore from '@app/store/account/authentication';
|
||||
|
@ -61,6 +62,12 @@ export const reducer = createReducer(
|
|||
selectedRightDrawer: action.req
|
||||
};
|
||||
}),
|
||||
on(toggleLeftSideDrawer, (state, action) => {
|
||||
return {
|
||||
...state,
|
||||
leftSideDrawer: !state.leftSideDrawer
|
||||
};
|
||||
}),
|
||||
on(clearRightDrawer, (state, action) => {
|
||||
return {
|
||||
...state,
|
||||
|
|
|
@ -7,13 +7,15 @@ export interface State {
|
|||
massDetailProcessing: boolean;
|
||||
|
||||
selectedRightDrawer: string | null;
|
||||
leftSideDrawer: boolean;
|
||||
}
|
||||
|
||||
export const initialState: State = {
|
||||
selectedRoom: null,
|
||||
selectedMassDetail: null,
|
||||
massDetailProcessing: false,
|
||||
selectedRightDrawer: ''
|
||||
selectedRightDrawer: '',
|
||||
leftSideDrawer: true
|
||||
};
|
||||
|
||||
export function selectors<S>(selector: Selector<any, State>) {
|
||||
|
@ -29,6 +31,10 @@ export function selectors<S>(selector: Selector<any, State>) {
|
|||
selectedRightDrawer: createSelector(
|
||||
selector,
|
||||
(state: State) => state.selectedRightDrawer
|
||||
),
|
||||
selectLeftSideDrawer: createSelector(
|
||||
selector,
|
||||
(state: State) => state.leftSideDrawer
|
||||
)
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user