Merge pull request #310 from ngageoint/menu-icon-tooltips

Added tooltips to nav bar icons

Author: jmckomni

web-app/src/app/navigation/navigation.component.html

@@ -7,16 +7,24 @@
     </div>
 
     <div class="event-title">
-      <span class="filter-event">{{filteredEvent.name}}</span>
-      <span *ngIf="filteredTeams" class="filter-teams"><span>> {{filteredTeams}}</span></span>
-      <span *ngIf="filteredInterval" class="filter-interval"> {{filteredInterval}}</span>
+      <span class="filter-event">{{ filteredEvent.name }}</span>
+      <span *ngIf="filteredTeams" class="filter-teams"
+        ><span>> {{ filteredTeams }}</span></span
+      >
+      <span *ngIf="filteredInterval" class="filter-interval">
+        {{ filteredInterval }}</span
+      >
     </div>
 
     <div class="collapsed-menu">
-      <button mat-button (click)="togglePreferences()">
+      <button matTooltip="Preferences" mat-button (click)="togglePreferences()">
         <mat-icon>tune</mat-icon>
       </button>
-      <button mat-icon-button class="navigation-options" [matMenuTriggerFor]="menu">
+      <button
+        mat-icon-button
+        class="navigation-options"
+        [matMenuTriggerFor]="menu"
+      >
         <mat-icon>more_vert</mat-icon>
       </button>
       <mat-menu #menu>
@@ -39,22 +47,27 @@
       </mat-menu>
 
       <div class="actions">
-        <a [routerLink]="['/profile']" mat-button>
+        <a matTooltip="Profile" [routerLink]="['/profile']" mat-button>
           <mat-icon>account_circle</mat-icon>
         </a>
 
-        <a [routerLink]="['/about']" mat-button>
+        <a matTooltip="Info" [routerLink]="['/about']" mat-button>
           <mat-icon>info</mat-icon>
         </a>
 
-        <a *ngIf="isAdmin" mat-button href="admin/#/admin/">
+        <a
+          matTooltip="Admin Page"
+          *ngIf="isAdmin"
+          mat-button
+          href="admin/#/admin/"
+        >
           <mat-icon>admin_panel_settings</mat-icon>
         </a>
 
-        <a mat-button (click)="onLogout()">
+        <a matTooltip="Logout" mat-button (click)="onLogout()">
           <mat-icon>logout</mat-icon>
         </a>
       </div>
     </div>
   </div>
-</mat-toolbar>
+</mat-toolbar>

web-app/src/app/navigation/navigation.component.scss

@@ -33,12 +33,12 @@
   justify-content: center;
 }
 
-@media(min-width:900px) {
+@media (min-width: 900px) {
   .navigation-options {
     display: none;
   }
 
   .actions {
     display: block;
   }
-}
+}

web-app/src/app/navigation/navigation.component.ts

@@ -1,4 +1,10 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output
+} from '@angular/core';
 import { FilterService } from '../filter/filter.service';
 import { MapService } from '../map/map.service';
 import { UserService } from '../user/user.service';
@@ -16,12 +22,12 @@ export class NavigationComponent implements OnInit, OnDestroy {
   @Output() onFeedToggle = new EventEmitter<void>();
   @Output() onPreferencesToggle = new EventEmitter<void>();
 
-  state = "map"
-  filteredEvent: any = {}
-  filteredTeams: any
-  filteredInterval: any
-  feedChangedUsers = {}
-  isAdmin: boolean = false
+  state = 'map';
+  filteredEvent: any = {};
+  filteredTeams: any;
+  filteredInterval: any;
+  feedChangedUsers = {};
+  isAdmin: boolean = false;
 
   constructor(
     private router: Router,
@@ -30,52 +36,58 @@ export class NavigationComponent implements OnInit, OnDestroy {
     private eventService: EventService,
     private filterService: FilterService,
     private pollingService: PollingService
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     this.filterService.addListener(this);
 
-    this.eventService.query().subscribe(events => {
+    this.eventService.query().subscribe((events) => {
       const recentEventId = this.userService.getRecentEventId();
-      const recentEvent = _.find(events, event => { return event.id === recentEventId; });
+      const recentEvent = _.find(events, (event) => {
+        return event.id === recentEventId;
+      });
       if (recentEvent) {
         this.filterService.setFilter({ event: recentEvent });
-        this.pollingService.setPollingInterval(this.pollingService.getPollingInterval());
+        this.pollingService.setPollingInterval(
+          this.pollingService.getPollingInterval()
+        );
       } else if (events.length > 0) {
         // TODO 'welcome to Mage dialog'
         this.filterService.setFilter({ event: events[0] });
-        this.pollingService.setPollingInterval(this.pollingService.getPollingInterval());
+        this.pollingService.setPollingInterval(
+          this.pollingService.getPollingInterval()
+        );
       } else {
         // TODO welcome to mage, sorry you have no events
       }
     });
 
-    this.mapService.init()
-    this.eventService.init()
+    this.mapService.init();
+    this.eventService.init();
     this.isAdmin = this.userService.amAdmin;
   }
 
   ngOnDestroy(): void {
-    this.filterService.removeListener(this)
-    this.filterService.removeFilters()
+    this.filterService.removeListener(this);
+    this.filterService.removeFilters();
 
-    this.mapService.destroy()
+    this.mapService.destroy();
 
-    this.eventService.destroy()
+    this.eventService.destroy();
   }
 
   toggleFeed(): void {
-    this.onFeedToggle.emit()
+    this.onFeedToggle.emit();
   }
 
   togglePreferences(): void {
-    this.onPreferencesToggle.emit()
+    this.onPreferencesToggle.emit();
   }
 
   onLogout() {
     this.userService.logout().subscribe(() => {
       this.router.navigate(['landing']);
-    })
+    });
   }
 
   onFilterChanged(filter) {
@@ -88,7 +100,10 @@ export class NavigationComponent implements OnInit, OnDestroy {
       this.mapService.onLocationStop();
     }
 
-    if (filter.teams) this.filteredTeams = _.map(this.filterService.getTeams(), t => { return t.name; }).join(', ');
+    if (filter.teams)
+      this.filteredTeams = _.map(this.filterService.getTeams(), (t) => {
+        return t.name;
+      }).join(', ');
     if (filter.timeInterval) {
       const intervalChoice = this.filterService.getIntervalChoice();
       if (intervalChoice.filter !== 'all') {