Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger
This commit is contained in:
commit
3ffe4b2746
@ -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,
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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,
|
||||||
|
@ -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)"
|
||||||
|
@ -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');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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'
|
||||||
|
);
|
||||||
|
@ -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,
|
||||||
|
@ -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
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user