Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

electron-builder.json

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

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html

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

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss

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

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts

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

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

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

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts

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

projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts

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

projects/ucap-webmessenger-app/src/app/store/messenger/chat/reducers.ts

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

projects/ucap-webmessenger-app/src/app/store/messenger/chat/state.ts

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