From ec3e57200f74a8f87e1716a414ecf0ed99fc04f1 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Fri, 3 Jan 2020 17:53:51 +0900
Subject: [PATCH] profile menu is modified

---
 .../native/components/top-bar.component.html  | 50 +++++++++++++------
 .../native/components/top-bar.component.ts    | 31 ++++++++++--
 2 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 64c53e4c..3820358d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -322,22 +322,44 @@
 </mat-toolbar>
 
 <mat-menu #profileMenu="matMenu" class="myset">
-  <div class="setting"><button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button></div>
+  <div class="setting">
+    <button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button>
+  </div>
   <div class="setting"><button mat-menu-item>상태 메시지 설정</button></div>
-  <div class="setting"><button mat-menu-item>축소</button><span>100%</span><button mat-menu-item>확대</button></div>
-  <div class="setting"><button mat-menu-item (click)="onClickSettings()">설정</button></div>
+  <div class="setting">
+    <button mat-menu-item (click)="onClickZoomOut($event)">축소</button>
+    <span>100%</span>
+    <button mat-menu-item (click)="onClickZoomIn($event)">확대</button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item (click)="onClickSettings()">설정</button>
+  </div>
   <mat-divider></mat-divider>
-  <div class="setting"><button mat-menu-item (click)="onClickLogout()">로그아웃</button></div>
+  <div class="setting">
+    <button mat-menu-item (click)="onClickLogout()">로그아웃</button>
+  </div>
 </mat-menu>
 
 <mat-menu #presenseMenu="matMenu" class="status-pc-set">
-  <div class="setting"><button mat-menu-item><span class="presence pcOn"> </span>온라인</button></div>
-  <div class="setting"><button mat-menu-item><span class="presence pcOut"> </span>부재중</button><button mat-menu-item
-      class="clock"></button></div>
-  <div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>다른용무중</button><button mat-menu-item
-      class="edit"></button></div>
-  <div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>회의중</button><button mat-menu-item
-      class="edit"></button></div>
-  <div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>집중근무중</button><button mat-menu-item
-      class="edit"></button></div>
-</mat-menu>
\ No newline at end of file
+  <div class="setting">
+    <button mat-menu-item><span class="presence pcOn"> </span>온라인</button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item><span class="presence pcOut"> </span>부재중</button
+    ><button mat-menu-item class="clock"></button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item>
+      <span class="presence pcOther"> </span>다른용무중</button
+    ><button mat-menu-item class="edit"></button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item><span class="presence pcOther"> </span>회의중</button
+    ><button mat-menu-item class="edit"></button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item>
+      <span class="presence pcOther"> </span>집중근무중</button
+    ><button mat-menu-item class="edit"></button>
+  </div>
+</mat-menu>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
index 8f9fbf82..6eba481d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
@@ -1,4 +1,11 @@
-import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Inject,
+  OnDestroy,
+  ChangeDetectorRef,
+  ViewChild
+} from '@angular/core';
 import {
   UCAP_NATIVE_SERVICE,
   NativeService,
@@ -47,6 +54,8 @@ import {
   ProfileDialogData
 } from '@app/layouts/messenger/dialogs/profile/profile.dialog.component';
 import { DialogService } from '@ucap-webmessenger/ui';
+import { DOCUMENT } from '@angular/common';
+import { MatMenu } from '@angular/material';
 
 @Component({
   selector: 'app-layout-native-top-bar',
@@ -70,6 +79,9 @@ export class TopBarComponent implements OnInit, OnDestroy {
 
   WebLinkType = WebLinkType;
 
+  @ViewChild('profileMenu', { static: true })
+  profileMenu: MatMenu;
+
   constructor(
     private store: Store<any>,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
@@ -78,6 +90,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
     private sessionStorageService: SessionStorageService,
     private daesangApiService: DaesangApiService,
     private daesangProtocolService: DaesangProtocolService,
+    private changeDetectorRef: ChangeDetectorRef,
+    @Inject(DOCUMENT) private document: Document,
     private logger: NGXLogger
   ) {}
 
@@ -252,9 +266,6 @@ export class TopBarComponent implements OnInit, OnDestroy {
     //   .subscribe();
     event.preventDefault();
 
-    this.logger.debug('onClickOpenProfile');
-    return;
-
     // [Daesang]
     this.daesangProtocolService
       .dataUserDaesang({
@@ -313,4 +324,16 @@ export class TopBarComponent implements OnInit, OnDestroy {
   onClickUpdate() {
     this.store.dispatch(UpdateStore.applyInstantUpdate());
   }
+
+  onClickZoomOut(event: Event) {
+    event.stopPropagation();
+
+    this.document.body.style.zoom = '80%';
+  }
+
+  onClickZoomIn(event: Event) {
+    event.stopPropagation();
+
+    this.document.body.style.zoom = '120%';
+  }
 }