AW-6410 Add settings menu

projects/common/src/fm/components/app/app.component.html

@@ -34,6 +34,7 @@
   </ng-container>  
   <div class="user-menu apponly">
     <fm-help-menu [user]="user|async" [showMenu]="helpMenuVisible|async"></fm-help-menu>
+    <fm-settings-menu [user]="user|async" [showMenu]="settingsMenuVisible|async"></fm-settings-menu>
     <fm-notification-menu [user]="user|async" [unread]="unreadNotifications|async" [showMenu]="notificationMenuVisible|async"></fm-notification-menu>
     <fm-app-menu [user]="user|async" [showMenu]="appMenuVisible|async"></fm-app-menu>
     <fm-user-menu [user]="user|async" [showMenu]="accountMenuVisible|async"></fm-user-menu>    

projects/common/src/fm/components/app/app.component.scss

@@ -119,7 +119,7 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;font-family: Lat
   max-height:0em;
 }
 
-fm-help-menu,fm-app-menu,fm-user-menu,fm-notification-menu {
+fm-help-menu,fm-app-menu,fm-user-menu,fm-notification-menu,fm-settings-menu {
   display: inline-block;
   margin-left: 1rem;
 }

projects/common/src/fm/components/app/app.component.ts

@@ -45,6 +45,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public accountMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetAccountMenuVisible);
   public appMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetAppMenuVisible);
   public notificationMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetNotificationMenuVisible);
+  public settingsMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetHelpMenuVisible);
   public helpMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetHelpMenuVisible);
   public unreadNotifications: Observable<number> = this.store$.select(appReducers.SelectgetUnreadNotifications);
   public user: Observable<IUser> = this.store$.select(appReducers.SelectGetUser);

projects/common/src/fm/components/settings-menu/settings-menu.component.html

@@ -0,0 +1,8 @@
+<div class="mobile-hide">
+    <div (click)="toggle($event)" class="rounded-circle menu-button hidden"  [ngClass]="{'hidden':!user || noContent}">
+        <span i18n-title title="Settings"><i class="fas fa-gear" aria-hidden="true"></i></span>
+        <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">                                     
+            <router-outlet name="settings-menu" (activate)="activateRoute()" (deactivate)="deActivateRoute()"></router-outlet>            
+       </div>
+    </div>
+</div>

projects/common/src/fm/components/settings-menu/settings-menu.component.scss

@@ -0,0 +1,90 @@
+.menu-button {
+    background-color: gray;  
+    display: inline-block;
+    width: 2.5em;
+    height: 2.5em;
+    line-height: 2.5em;
+    text-align: center;
+    font-size: 1rem;
+    position: relative;
+}
+
+div.menu-button > span {
+    color:white;
+}
+
+.menu {
+    max-height: calc( 100vh - 4rem);
+    //transition: max-height 0.2s;
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(0,0,0,.3);
+    position: fixed;
+    top: 3.4rem;
+    right:0.5rem;
+    left:0.5rem;
+    background-color: #fff;
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    z-index: 3;
+}
+
+:host-context(.fullscreen)  .menu  {
+    top:4em;
+}
+
+.card {      
+    padding:0.5rem;
+    min-width: 10rem;          
+}
+
+.card-body {
+    text-align: left;
+}
+
+.hidden {
+    max-height: 0;   
+}
+
+.menu.hidden {
+    padding: 0;
+}
+
+.menu-button.hidden {
+    overflow: hidden;
+}
+
+
+@media screen and (min-width: 44rem)  {
+    .menu {
+        position: absolute;
+        top: 3rem;
+        right:0;
+        left: unset;
+        max-width: 30em;
+    }
+
+    :host-context(.fullscreen)  .menu  {
+        top: 3rem;
+    }
+}    
+
+.mobile-hide {
+    display: inherit;
+}
+
+@media screen and (max-width: 768px) {
+    .mobile-hide {
+        display: none;
+    }
+}
+
+.unread {
+    display: block;
+    position: absolute;
+    top:-0.5em;
+    right: -0.5em;
+}
+
+.unread.hidden {
+    display: none;
+}

projects/common/src/fm/components/settings-menu/settings-menu.component.ts

@@ -0,0 +1,37 @@
+import { Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { IUser } from '../../models/user';
+import {Store} from '@ngrx/store';
+import * as appReducers from '../../reducers/app-common.reducer';
+import * as appActions from '../../actions/app-common.actions';
+
+@Component({
+  selector: 'fm-settings-menu',
+  templateUrl: './settings-menu.component.html',
+  styleUrls: ['./settings-menu.component.scss']
+})
+export class SettingsMenuComponent implements OnInit {
+  
+  @Input() user:IUser;
+  @Input() showMenu:boolean;
+  public noContent = true;
+
+  constructor(private store: Store<appReducers.State>) { }
+
+  ngOnInit(): void {
+  }
+
+  toggle(event:MouseEvent) {
+    event.stopPropagation();
+    this.store.dispatch(new appActions.ToggleSettingsMenu());
+  } 
+
+  activateRoute() {
+    this.noContent=false;
+  }
+
+  deActivateRoute() {
+    this.noContent=true;
+  }
+}