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

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -216,13 +216,15 @@
         </svg>
       </button>
       E[삭제예정] 마이프로필 설정을 이동-->
+    </div>
     <ucap-profile-my-profile-widget
       [profileImageRoot]="sessionVerinfo.profileRoot"
       [profileImageFile]="getMyProfileImageWidget()"
-        (openProfile)="onClickOpenProfile()"
-        class="myprofile"
+      *ngIf="!!loginRes"
+      class="myprofile-item"
+      [matMenuTriggerFor]="profileMenu"
     ></ucap-profile-my-profile-widget>
-    </div>
+
     <div class="app-layout-native-title-bar-actions">
       <button
         mat-icon-button
@@ -318,3 +320,19 @@
     </div>
   </div>
 </mat-toolbar>
+
+<mat-menu #profileMenu="matMenu">
+  <button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button>
+  <button mat-menu-item>상태 메시지 설정</button>
+  <button mat-menu-item (click)="onClickSettings()">설정</button>
+  <mat-divider></mat-divider>
+  <button mat-menu-item (click)="onClickLogout()">로그아웃</button>
+</mat-menu>
+
+<mat-menu #presenseMenu="matMenu">
+  <button mat-menu-item>온라인</button>
+  <button mat-menu-item>부재중</button>
+  <button mat-menu-item>다른용무중</button>
+  <button mat-menu-item>회의중</button>
+  <button mat-menu-item>집중근무중</button>
+</mat-menu>

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -32,10 +32,23 @@
       margin-left: auto;
       flex-flow: row;
       justify-items: center;
+      width: calc(100% - 300px);
+      overflow: hidden;
+      white-space: nowrap;
+      position: relative;
+      margin-left: auto;
+      justify-content: flex-end;
+      height: 100%;
+
       .app-layout-native-title-bar-link {
         align-items: center;
         position: relative;
         display: flex;
+        justify-content: flex-end;
+        width: calc(100% - 300px);
+        overflow: hidden;
+        white-space: nowrap;
+        transform: translateY(2px);
         .stroke-bar {
           width: 1px;
           height: 20px;
@@ -59,7 +72,7 @@
           text-align: center;
           font-size: 10px;
           vertical-align: middle;
-          margin-left: 14px;
+          margin-left: 16px;
           .weblink {
             display: inline-flex;
             line-height: 24px;
@@ -100,10 +113,21 @@
           &:hover {
             opacity: 0.7;
           }
+          .mat-badge-content {
+            transform: translateY(4px);
+          }
         }
       }
 
+      .myprofile-item {
+        -webkit-app-region: no-drag;
+        align-items: center;
+        display: flex;
+        transform: translateY(2px);
+      }
+
       .app-layout-native-title-bar-actions {
+        display: flex;
         align-items: center;
         position: relative;
         .button {

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts

@@ -224,7 +224,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
     }
   }
 
-  onClickOpenProfile() {
+  onClickOpenProfile(event: Event) {
     // [GROUP]
     // this.queryProtocolService
     //   .dataUser({
@@ -250,6 +250,10 @@ export class TopBarComponent implements OnInit, OnDestroy {
     //     })
     //   )
     //   .subscribe();
+    event.preventDefault();
+
+    this.logger.debug('onClickOpenProfile');
+    return;
 
     // [Daesang]
     this.daesangProtocolService

projects/ucap-webmessenger-app/src/app/layouts/native/native.layout.module.ts

@@ -3,7 +3,9 @@ import { CommonModule } from '@angular/common';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { UCapUiModule } from '@ucap-webmessenger/ui';
@@ -16,9 +18,11 @@ import { MatTooltipModule, MatBadgeModule } from '@angular/material';
   imports: [
     CommonModule,
     FlexLayoutModule,
+    MatDividerModule,
     MatIconModule,
     MatToolbarModule,
     MatTooltipModule,
+    MatMenuModule,
     MatBadgeModule,
 
     UCapUiModule,

projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.ts

@@ -1,10 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { UserInfo } from '@ucap-webmessenger/protocol-room';
-import {
-  UserInfoSS,
-  UserInfoF,
-  UserInfoDN
-} from '@ucap-webmessenger/protocol-query';
+import { NGXLogger } from 'ngx-logger';
 
 @Component({
   selector: 'ucap-profile-my-profile-widget',
@@ -17,22 +12,7 @@ export class MyProfileWidgetComponent implements OnInit {
   @Input()
   profileImageFile: string;
 
-  @Output()
-  openProfile = new EventEmitter<
-    UserInfo | UserInfoSS | UserInfoF | UserInfoDN
-  >();
-
-  constructor() {}
+  constructor(private logger: NGXLogger) {}
 
   ngOnInit() {}
-
-  onClickOpenProfile(
-    event: MouseEvent,
-    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
-  ) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    this.openProfile.emit(userInfo);
-  }
 }