left side drawer is implemented

This commit is contained in:
Richard Park 2020-01-21 15:29:59 +09:00
parent 6952b84edb
commit 0f51d458e0
7 changed files with 48 additions and 4 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -53,3 +53,7 @@ export const clearRightDrawer = createAction(
'[Messenger::Chat] Clear Right Drawer',
props()
);
export const toggleLeftSideDrawer = createAction(
'[Messenger::Chat] Toggle Left Side Drawer'
);

View File

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

View File

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