This commit is contained in:
leejinho 2020-01-21 16:37:02 +09:00
commit 3ffe4b2746
9 changed files with 92 additions and 9 deletions

View File

@ -38,7 +38,7 @@
}, },
"publish": { "publish": {
"provider": "generic", "provider": "generic",
"url": "http://localhost:8099/client-updates/" "url": "https://messenger.daesang.com/AppDist/pc"
}, },
"mac": { "mac": {
"target": ["default"], "target": ["default"],
@ -74,7 +74,6 @@
"include": "./config/build/win/nsis/installer.nsh" "include": "./config/build/win/nsis/installer.nsh"
}, },
"nsisWeb": { "nsisWeb": {
"appPackageUrl": "https://messenger.daesang.com/AppDist/pc/",
"oneClick": true, "oneClick": true,
"allowToChangeInstallationDirectory": false, "allowToChangeInstallationDirectory": false,
"perMachine": false, "perMachine": false,

View File

@ -1,5 +1,5 @@
<div class="container"> <div #leftSideContainer class="container">
<div class="left-side-tabs-body"> <div fxFlexFill class="left-side-tabs-body">
<div <div
#tabs #tabs
class="left-side-tabs-contents" class="left-side-tabs-contents"
@ -64,3 +64,12 @@
(buttonClick)="onClickFab($event)" (buttonClick)="onClickFab($event)"
></ucap-float-action-button> ></ucap-float-action-button>
</div> </div>
<button
mat-icon-button
class="left-drawer-toggle"
*ngIf="showLeftDrawerToggle"
(click)="onClickLeftDrawerToggle()"
>
<mat-icon>settings</mat-icon>
</button>

View File

@ -25,7 +25,7 @@
.container { .container {
display: flex; display: flex;
width: 250px; width: 300px;
height: 100%; height: 100%;
} }
@ -124,3 +124,8 @@
height: 100%; height: 100%;
} }
} }
.left-drawer-toggle {
position: absolute;
top: 0px;
}

View File

@ -8,7 +8,8 @@ import {
QueryList, QueryList,
ElementRef, ElementRef,
OnDestroy, OnDestroy,
ViewChild ViewChild,
HostListener
} from '@angular/core'; } from '@angular/core';
import { NGXLogger } from 'ngx-logger'; import { NGXLogger } from 'ngx-logger';
import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui'; import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
@ -75,6 +76,9 @@ export class LeftSideComponent implements OnInit, OnDestroy {
@ViewChild('messageBoxComponent', { static: false }) @ViewChild('messageBoxComponent', { static: false })
messageBoxComponent: MessageBoxComponent; messageBoxComponent: MessageBoxComponent;
@ViewChild('leftSideContainer', { static: false })
leftSideContainer: ElementRef<HTMLElement>;
onLangChangeSubscription: Subscription; onLangChangeSubscription: Subscription;
badgeChatUnReadCount: number; badgeChatUnReadCount: number;
@ -96,6 +100,8 @@ export class LeftSideComponent implements OnInit, OnDestroy {
loginRes: LoginResponse; loginRes: LoginResponse;
loginResSubscription: Subscription; loginResSubscription: Subscription;
showLeftDrawerToggle = false;
constructor( constructor(
private store: Store<any>, private store: Store<any>,
private dialogService: DialogService, private dialogService: DialogService,
@ -181,6 +187,35 @@ export class LeftSideComponent implements OnInit, OnDestroy {
this.logger.debug('-----------------------LeftSideComponent ngOnDestroy'); this.logger.debug('-----------------------LeftSideComponent ngOnDestroy');
} }
@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.showLeftDrawerToggle = true;
}
}
@HostListener('mouseleave', ['$event'])
mouseLeave(event: MouseEvent) {
this.showLeftDrawerToggle = false;
}
onClickLeftDrawerToggle() {
this.store.dispatch(ChatStore.toggleLeftSideDrawer());
}
async onClickNewChat(type: string = 'NORMAL') { async onClickNewChat(type: string = 'NORMAL') {
const result = await this.dialogService.open< const result = await this.dialogService.open<
CreateChatDialogComponent, CreateChatDialogComponent,

View File

@ -4,7 +4,7 @@
</div> </div>
<mat-drawer-container class="contents" autosize> <mat-drawer-container class="contents" autosize>
<mat-drawer #drawer mode="side" opened> <mat-drawer #leftSideDrawer mode="side" opened>
<app-layout-messenger-left-side <app-layout-messenger-left-side
(openProfile)="onClickOpenProfile($event)" (openProfile)="onClickOpenProfile($event)"
(sendCall)="sendClickToCall($event)" (sendCall)="sendClickToCall($event)"

View File

@ -61,6 +61,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
chatOpenRoomSubscription: Subscription; chatOpenRoomSubscription: Subscription;
msgOpenMessageSubscription: Subscription; msgOpenMessageSubscription: Subscription;
myIdleCheckTimeSubscription: Subscription; myIdleCheckTimeSubscription: Subscription;
leftSideDrawerSubscription: Subscription;
defaultLeftSideComponentWidth = 380; defaultLeftSideComponentWidth = 380;
leftSideComponentWidth = this.defaultLeftSideComponentWidth; leftSideComponentWidth = this.defaultLeftSideComponentWidth;
@ -70,6 +71,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
environmentsInfo: EnvironmentsInfo; environmentsInfo: EnvironmentsInfo;
@ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer; @ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer;
@ViewChild('leftSideDrawer', { static: true }) leftSideDrawer: MatDrawer;
constructor( constructor(
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService, @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 this.idleStateChangedSubscription = this.nativeService
.idleStateChanged() .idleStateChanged()
.subscribe(action => { .subscribe(action => {
@ -218,6 +232,10 @@ export class MainPageComponent implements OnInit, OnDestroy {
this.myIdleCheckTimeSubscription.unsubscribe(); this.myIdleCheckTimeSubscription.unsubscribe();
} }
if (!!this.leftSideDrawerSubscription) {
this.leftSideDrawerSubscription.unsubscribe();
}
this.logger.debug('-----------------------MainPageComponent ngOnDestroy'); this.logger.debug('-----------------------MainPageComponent ngOnDestroy');
} }

View File

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

View File

@ -8,7 +8,8 @@ import {
massTalkDownloadSuccess, massTalkDownloadSuccess,
clearSelectedRoom, clearSelectedRoom,
selectedRightDrawer, selectedRightDrawer,
clearRightDrawer clearRightDrawer,
toggleLeftSideDrawer
} from './actions'; } from './actions';
import * as AuthenticationStore from '@app/store/account/authentication'; import * as AuthenticationStore from '@app/store/account/authentication';
@ -61,6 +62,12 @@ export const reducer = createReducer(
selectedRightDrawer: action.req selectedRightDrawer: action.req
}; };
}), }),
on(toggleLeftSideDrawer, (state, action) => {
return {
...state,
leftSideDrawer: !state.leftSideDrawer
};
}),
on(clearRightDrawer, (state, action) => { on(clearRightDrawer, (state, action) => {
return { return {
...state, ...state,

View File

@ -7,13 +7,15 @@ export interface State {
massDetailProcessing: boolean; massDetailProcessing: boolean;
selectedRightDrawer: string | null; selectedRightDrawer: string | null;
leftSideDrawer: boolean;
} }
export const initialState: State = { export const initialState: State = {
selectedRoom: null, selectedRoom: null,
selectedMassDetail: null, selectedMassDetail: null,
massDetailProcessing: false, massDetailProcessing: false,
selectedRightDrawer: '' selectedRightDrawer: '',
leftSideDrawer: true
}; };
export function selectors<S>(selector: Selector<any, State>) { export function selectors<S>(selector: Selector<any, State>) {
@ -29,6 +31,10 @@ export function selectors<S>(selector: Selector<any, State>) {
selectedRightDrawer: createSelector( selectedRightDrawer: createSelector(
selector, selector,
(state: State) => state.selectedRightDrawer (state: State) => state.selectedRightDrawer
),
selectLeftSideDrawer: createSelector(
selector,
(state: State) => state.leftSideDrawer
) )
}; };
} }