From 50f6fd8aaf691615bc15c8438d07f3e42962fa05 Mon Sep 17 00:00:00 2001
From: GloriousCode <scott@gloriousedge.com>
Date: Mon, 30 Oct 2017 16:52:25 +1100
Subject: [PATCH] Adds trading menu Changes how the menus render - more
 accurate scrollbars even if sidebar and navbar are no longer fixed

---
 web/package-lock.json                         |  5 +++
 web/package.json                              |  1 +
 web/src/app/app.component.html                | 43 +++++++++++--------
 web/src/app/app.component.scss                |  3 +-
 .../style-manager.service.spec.ts             |  2 +-
 .../style-manager/style-manager.service.ts    |  2 +-
 .../services/websocket/websocket.service.ts   | 14 +++---
 .../app/shared/navbar/navbar.component.scss   |  6 ++-
 web/src/styles.scss                           |  1 -
 9 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 67ed5e7d..5e66c720 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -4,6 +4,11 @@
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
+        "@amcharts/amcharts3-angular": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@amcharts/amcharts3-angular/-/amcharts3-angular-1.5.0.tgz",
+            "integrity": "sha512-GRw7svOXDegavtxWifbGZlh7Q2JOOzzeQX4NwNMAOy/yr3UOvsmNqvKLdYNjzcUc0TlLrmwgyjUL8w2tXmxY6g=="
+        },
         "@angular-devkit/build-optimizer": {
             "version": "0.0.27",
             "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.0.27.tgz",
diff --git a/web/package.json b/web/package.json
index 0bfc07cc..a04850a8 100644
--- a/web/package.json
+++ b/web/package.json
@@ -46,6 +46,7 @@
         "e2e": "protractor ./protractor.conf.js"
     },
     "dependencies": {
+        "@amcharts/amcharts3-angular": "^1.5.0",
         "@angular/animations": "^4.4.5",
         "@angular/cdk": "^2.0.0-beta.12",
         "@angular/common": "4.4.5",
diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html
index 82274694..9dcac19b 100644
--- a/web/src/app/app.component.html
+++ b/web/src/app/app.component.html
@@ -1,21 +1,26 @@
-    <app-navbar class="navbar mat-elevation-z6"></app-navbar>
-    <mat-sidenav-container class="container ">
-        <mat-sidenav #sidenav mode="side" class="sidebar" opened="true">
-            <mat-nav-list>
-                    <mat-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">
-                            <mat-icon >trending_up</mat-icon>&nbsp;<h3>Dashboard</h3>
-                    </mat-list-item>
-                    <mat-list-item routerLink="wallet" routerLinkActive="wallet-highlight">
-                            <mat-icon >account_balance_wallet</mat-icon>&nbsp;<h3>Wallet</h3>
-                    </mat-list-item>
-                    <mat-list-item routerLink="trading" routerLinkActive="trading-highlight">
-                            <mat-icon >history</mat-icon>&nbsp;<h3>Trading</h3>
-                    </mat-list-item>
-                    <mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
-                            <mat-icon >settings</mat-icon>&nbsp;<h3>Settings</h3>
-                    </mat-list-item>
-                  </mat-nav-list>
+<app-navbar class="mat-elevation-z6"></app-navbar>
+
+<mat-sidenav-container class="container ">
+    <mat-sidenav #sidenav mode="side" class="sidebar" opened="true">
+        <mat-nav-list>
+            <mat-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">
+                <mat-icon>trending_up</mat-icon>&nbsp;
+                <h3>Dashboard</h3>
+            </mat-list-item>
+            <mat-list-item routerLink="wallet" routerLinkActive="wallet-highlight">
+                <mat-icon>account_balance_wallet</mat-icon>&nbsp;
+                <h3>Wallet</h3>
+            </mat-list-item>
+            <mat-list-item routerLink="trading" routerLinkActive="trading-highlight">
+                <mat-icon>history</mat-icon>&nbsp;
+                <h3>Trading</h3>
+            </mat-list-item>
+            <mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
+                <mat-icon>settings</mat-icon>&nbsp;
+                <h3>Settings</h3>
+            </mat-list-item>
+        </mat-nav-list>
     </mat-sidenav>
 
-        <router-outlet class="main"></router-outlet>
-    </mat-sidenav-container>
\ No newline at end of file
+    <router-outlet class="main"></router-outlet>
+</mat-sidenav-container>
\ No newline at end of file
diff --git a/web/src/app/app.component.scss b/web/src/app/app.component.scss
index 95f7680b..98da567c 100644
--- a/web/src/app/app.component.scss
+++ b/web/src/app/app.component.scss
@@ -1,6 +1,5 @@
 .container {
-    border: 1px solid rgba(0, 0, 0, 0.5);
-    height: 96vh;
+    height: 96vmax;
 }
 
 .main {
diff --git a/web/src/app/services/style-manager/style-manager.service.spec.ts b/web/src/app/services/style-manager/style-manager.service.spec.ts
index c787073a..8a6304a4 100644
--- a/web/src/app/services/style-manager/style-manager.service.spec.ts
+++ b/web/src/app/services/style-manager/style-manager.service.spec.ts
@@ -1,7 +1,7 @@
 import {inject, TestBed} from '@angular/core/testing';
 import {HttpModule} from '@angular/http';
 import {StyleManagerComponent} from './style-manager.component';
-
+ 
 
 describe('StyleManager', () => {
   let styleManager: StyleManagerComponent;
diff --git a/web/src/app/services/style-manager/style-manager.service.ts b/web/src/app/services/style-manager/style-manager.service.ts
index c5790f6a..e4843c71 100644
--- a/web/src/app/services/style-manager/style-manager.service.ts
+++ b/web/src/app/services/style-manager/style-manager.service.ts
@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 /**
  * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
  * removed or changed later.
- */
+ */ 
 @Injectable()
 export class StyleManagerService {
   /**
diff --git a/web/src/app/services/websocket/websocket.service.ts b/web/src/app/services/websocket/websocket.service.ts
index ee293713..d1146910 100644
--- a/web/src/app/services/websocket/websocket.service.ts
+++ b/web/src/app/services/websocket/websocket.service.ts
@@ -1,13 +1,13 @@
 import { Injectable } from '@angular/core';
-import * as Rx from 'rxjs/Rx';
+import {Subject, Observable, Observer } from 'rxjs/Rx';
 
 @Injectable()
 export class WebsocketService {
   constructor() { }
 
-  private subject: Rx.Subject<MessageEvent>;
+  private subject: Subject<MessageEvent>;
 
-  public connect(url): Rx.Subject<MessageEvent> {
+  public connect(url): Subject<MessageEvent> {
     if (!this.subject) {
       this.subject = this.create(url);
     } 
@@ -21,11 +21,11 @@ export class WebsocketService {
 
   private isAuth = false;
 
-  private create(url): Rx.Subject<MessageEvent> {
+  private create(url): Subject<MessageEvent> {
     let ws = new WebSocket(url);
     
-    let observable = Rx.Observable.create(
-	(obs: Rx.Observer<MessageEvent>) => {
+    let observable = Observable.create(
+	(obs: Observer<MessageEvent>) => {
 		ws.onmessage = obs.next.bind(obs);
 		ws.onerror = obs.error.bind(obs);
     ws.onclose = obs.complete.bind(obs);
@@ -40,6 +40,6 @@ let observer = {
       }
   }
   }
-	return Rx.Subject.create(observer, observable);
+	return Subject.create(observer, observable);
   }
 }
\ No newline at end of file
diff --git a/web/src/app/shared/navbar/navbar.component.scss b/web/src/app/shared/navbar/navbar.component.scss
index 3722ff3d..8ea98975 100644
--- a/web/src/app/shared/navbar/navbar.component.scss
+++ b/web/src/app/shared/navbar/navbar.component.scss
@@ -1,3 +1,7 @@
 .material-icons {
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+.flex-spacer {
+    flex-grow: 1;
+  }
\ No newline at end of file
diff --git a/web/src/styles.scss b/web/src/styles.scss
index 947deb1b..6e0766d2 100644
--- a/web/src/styles.scss
+++ b/web/src/styles.scss
@@ -4,7 +4,6 @@ html,
 body {
     margin: 0;
     padding: 0;
-    overflow-y: hidden;
 }
 
 .loading-spinner {