FAB 툴팁 기능 추가 및 새 대화 팝업 연동.

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

@@ -18,6 +18,7 @@ import {
   UserInfoF,
   UserInfoDN
 } from '@ucap-webmessenger/protocol-query';
+import { BuiltinType } from '@angular/compiler';
 
 @Component({
   selector: 'app-layout-messenger-left-side',
@@ -32,7 +33,7 @@ export class LeftSideComponent implements OnInit {
   selectedUserList: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
 
   /** FAB */
-  fabButtons: { icon: string }[];
+  fabButtons: { icon: string; tooltip?: string; divisionType?: string }[];
 
   constructor(
     private store: Store<any>,
@@ -46,16 +47,14 @@ export class LeftSideComponent implements OnInit {
     );
     this.fabButtons = [
       {
-        icon: 'timeline'
+        icon: 'chat',
+        tooltip: 'New Chat',
+        divisionType: 'NEW_CHAT'
       },
       {
-        icon: 'view_headline'
+        icon: 'textsms',
-      },
+        tooltip: 'New Timer Chat',
-      {
+        divisionType: 'NEW_TIMER_CHAT'
-        icon: 'room'
-      },
-      {
-        icon: 'lock'
       }
     ];
   }
@@ -125,7 +124,23 @@ export class LeftSideComponent implements OnInit {
   }
 
   /** FAB */
-  onClickFab(params: { btn: { icon: string } }) {
+  onClickFab(params: { btn: any }) {
-    this.logger.debug('FAB click', params.btn);
+    const btn = params.btn as {
+      icon: string;
+      tooltip?: string;
+      divisionType?: string;
+    };
+
+    switch (btn.divisionType) {
+      case 'NEW_CHAT':
+        {
+          this.onClickNewChat();
+        }
+        break;
+      case 'NEW_TIMER_CHAT':
+        {
+        }
+        break;
+    }
   }
 }

projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.html

@@ -11,6 +11,8 @@
     <button
       *ngFor="let btn of buttons"
       mat-mini-fab
+      [matTooltip]="btn.tooltip"
+      matTooltipPosition="before"
       class="fab-secondary"
       color="secondary"
       (click)="onClickButton(btn)"

projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.ts

@@ -4,6 +4,7 @@ import { ucapAnimations } from '../animations';
 export interface FloatActionButton {
   /** Meterial Icon type */
   icon: string;
+  tooltip?: string;
   divisionType?: string;
 }
 
@@ -37,6 +38,14 @@ export class FloatActionButtonComponent implements OnInit {
     this.buttons = [];
   }
 
+  getTooltip(btn: FloatActionButton) {
+    if (!!btn && !!btn.tooltip && btn.tooltip.trim().length > 0) {
+      return btn.tooltip;
+    } else {
+      return '';
+    }
+  }
+
   onToggleFab() {
     this.buttons.length ? this.hideItems() : this.showItems();
   }

projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts

@@ -1,3 +1,4 @@
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
@@ -60,6 +61,7 @@ const SERVICES = [
     MatIconModule,
     MatProgressBarModule,
     MatSnackBarModule,
+    MatTooltipModule,
     DragDropModule
   ],
   exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES],