Dev

CRBM-Viz/src/app/Layout/account-menu/account-menu.component.html

@@ -0,0 +1,48 @@
+<mat-menu #profileMenu="matMenu" color="primary">
+  <button
+    mat-menu-item
+    color="primary"
+    [routerLink]="['/profile']"
+    matTooltip=" View Profile"
+    matTooltipPosition="below"
+  >
+    <mat-icon aria-hidden="false" aria-label="Profile icon">face</mat-icon>
+    Profile
+  </button>
+
+  <button
+    mat-menu-item
+    color="primary"
+    [routerLink]="['/profile']"
+    matTooltip=" View Messages"
+    matTooltipPosition="below"
+  >
+    <mat-icon aria-hidden="false" aria-label="notifications icon"
+      >notifications</mat-icon
+    >
+    Notifications
+  </button>
+  <button
+    mat-menu-item
+    color="primary"
+    [routerLink]="['/profile']"
+    matTooltip=" Change Settings"
+    matTooltipPosition="below"
+  >
+    <mat-icon aria-hidden="false" aria-label="Settings icon"
+      >settings_applications</mat-icon
+    >
+    Settings
+  </button>
+
+  <button
+    mat-menu-item
+    color="primary"
+    matTooltip="Log Out"
+    matTooltipPosition="below"
+    (click)="auth.logout()"
+  >
+    <mat-icon aria-hidden="false" aria-label="Log Out icon">lock</mat-icon>
+    Log Out
+  </button>
+</mat-menu>

CRBM-Viz/src/app/Layout/account-menu/account-menu.component.spec.ts

@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountMenuComponent } from './account-menu.component';
+import { MaterialModule } from 'src/app/Modules/app-material.module';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('AccountMenuComponent', () => {
+  let component: AccountMenuComponent;
+  let fixture: ComponentFixture<AccountMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AccountMenuComponent],
+      imports: [MaterialModule, RouterTestingModule],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

CRBM-Viz/src/app/Layout/account-menu/account-menu.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { AuthService } from 'src/app/Services/auth0.service';
+import { MatMenu } from '@angular/material';
+@Component({
+  selector: 'app-account-menu',
+  templateUrl: './account-menu.component.html',
+  styleUrls: ['./account-menu.component.sass'],
+})
+export class AccountMenuComponent implements OnInit {
+  @ViewChild('profileMenu', { static: true }) profileMenu: MatMenu;
+  constructor(public auth: AuthService) {}
+
+  ngOnInit() {}
+}

CRBM-Viz/src/app/Layout/footer/footer.component.html

@@ -1,5 +1,9 @@
 <div class="footer">
-  <div class="spacer"></div>
+  <span class="spacer"></span>
+  <span class="crbm">
+    <p>Created by:</p>
+    <app-logo class="app-logo"></app-logo>
+  </span>
   <span class="Auth0">
     <p>Authenticated by:</p>
     <a

CRBM-Viz/src/app/Layout/footer/footer.component.sass

@@ -1,23 +1,25 @@
 .footer
     background: inherit
-    height: 100%
+    height: auto
     width: 100%
     display: flex
     flex-direction: row
     flex-wrap: false
 
-    .spacer
-        min-width: 5px
-        flex: 1 0 auto
-        height: 100%
+.spacer
+    min-width: 5px
+    flex: 1 0 auto
+    height: 100%
+
+.Auth0, .github, .crbm
+    display: flex
+    flex: 0 0 auto
+    flex-wrap: false
+    padding: 5px
+.app-logo
+    height: 50px
 
-    .Auth0, .github
-        display: flex
-        flex: 0 0 auto
-        height: auto
-        p
-            height: auto
-            align-self: flex-end
-        .octicon
-            margin-left: -40px
-
+    p
+        justify-self: flex-start
+.octicon
+    margin-left: -40px

CRBM-Viz/src/app/Layout/footer/footer.component.spec.ts

@@ -1,16 +1,17 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FooterComponent } from './footer.component';
+import { LogoComponent } from '../logo/logo.component';
 
 describe('FooterComponent', () => {
   let component: FooterComponent;
   let fixture: ComponentFixture<FooterComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FooterComponent ]
-    })
-    .compileComponents();
+      declarations: [FooterComponent, LogoComponent],
+      imports: [],
+    }).compileComponents();
   }));
 
   beforeEach(() => {

CRBM-Viz/src/app/Layout/logo/logo.component.html

@@ -1,5 +1,3 @@
-<div class="logo">
-    <a href="https://reproduciblebiomodels.org/">
-        <img src="assets/logo.png" />
-    </a>
-</div>
+<a href="https://reproduciblebiomodels.org/">
+  <img src="assets/logo.png" />
+</a>

CRBM-Viz/src/app/Layout/logo/logo.component.sass

@@ -1,6 +1,6 @@
-.logo
-    height: 100%
-    width: 100%
 a
+    flex: 0 2 auto
+    height: 100%
     img
-        height: 100%
+        max-height: 100%
+        max-width: 100%

CRBM-Viz/src/app/Layout/nav-icons/nav-icons.component.html

@@ -0,0 +1,71 @@
+<div class="icons">
+  <button
+    mat-icon-button
+    [routerLink]="['']"
+    matTooltip="Home"
+    matTooltipPosition="below"
+  >
+    <mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
+  </button>
+
+  <button
+    mat-icon-button
+    [routerLink]="['/about']"
+    matTooltip="About"
+    matTooltipPosition="below"
+  >
+    <mat-icon aria-hidden="false" aria-label="About icon">help</mat-icon>
+  </button>
+
+  <button
+    mat-icon-button
+    [routerLink]="['/visualize']"
+    matTooltip="Visualizations"
+    matTooltipPosition="below"
+  >
+    <mat-icon aria-hidden="false" aria-label="visualize icon"
+      >timeline</mat-icon
+    >
+  </button>
+
+  <button
+    mat-icon-button
+    [routerLink]="['/files']"
+    matTooltip="Models"
+    matTooltipPosition="below"
+  >
+    <mat-icon aria-hidden="false" aria-label="Files icon">file_copy</mat-icon>
+  </button>
+
+  <button
+    mat-icon-button
+    [routerLink]="['/simulate']"
+    matTooltip="Simulations"
+    matTooltipPosition="below"
+  >
+    <mat-icon aria-hidden="false" aria-label="Simulations icon"
+      >explore</mat-icon
+    >
+  </button>
+  <button
+    mat-icon-button
+    *ngIf="!auth.loggedIn"
+    (click)="auth.login()"
+    matTooltip="Log In"
+    matTooltipPosition="below"
+  >
+    <mat-icon aria-hidden="false" aria-label="LogIn icon">lock_open</mat-icon>
+  </button>
+  <app-account-menu></app-account-menu>
+  <button
+    mat-icon-button
+    *ngIf="auth.loggedIn"
+    matTooltip="Account"
+    matTooltipPosition="below"
+    [matMenuTriggerFor]="accountMenu?.profileMenu"
+  >
+    <mat-icon aria-hidden="false" aria-label="Account icon"
+      >account_circle</mat-icon
+    >
+  </button>
+</div>

CRBM-Viz/src/app/Layout/nav-icons/nav-icons.component.sass

@@ -0,0 +1,20 @@
+@import 'src/styles.sass'
+.icons
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    align-self: flex-end
+button
+    min-width: min-content
+    flex: 1 1 auto
+    height: 100%
+button:focus
+    outline: 0px
+button:hover
+    color: mat-color($accent)
+
+a
+    color: white
+    flex: 1 1 auto
+a:hover
+    color: mat-color($accent)

CRBM-Viz/src/app/Layout/nav-icons/nav-icons.component.spec.ts

@@ -0,0 +1,30 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavIconsComponent } from './nav-icons.component';
+import { MaterialModule } from 'src/app/Modules/app-material.module';
+import { RouterTestingModule } from '@angular/router/testing';
+// TODO mock account menu
+import { AccountMenuComponent } from '../account-menu/account-menu.component';
+
+describe('NavIconsComponent', () => {
+  let component: NavIconsComponent;
+  let fixture: ComponentFixture<NavIconsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MaterialModule, RouterTestingModule],
+      providers: [MaterialModule, RouterTestingModule],
+      declarations: [NavIconsComponent, AccountMenuComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavIconsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

CRBM-Viz/src/app/Layout/nav-icons/nav-icons.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { AuthService } from 'src/app/Services/auth0.service';
+import { AccountMenuComponent } from 'src/app/Layout/account-menu/account-menu.component';
+
+@Component({
+  selector: 'app-nav-icons',
+  templateUrl: './nav-icons.component.html',
+  styleUrls: ['./nav-icons.component.sass'],
+})
+export class NavIconsComponent implements OnInit {
+  @ViewChild(AccountMenuComponent, { static: true })
+  accountMenu: AccountMenuComponent;
+  constructor(public auth: AuthService) {}
+
+  ngOnInit() {}
+}