Adds trading menu

Changes how the menus render - more accurate scrollbars even if sidebar and navbar are no longer fixed
This commit is contained in:
GloriousCode
2017-10-30 16:52:25 +11:00
parent d7f6693027
commit 50f6fd8aaf
9 changed files with 45 additions and 32 deletions

5
web/package-lock.json generated
View File

@@ -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",

View File

@@ -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",

View File

@@ -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>
<router-outlet class="main"></router-outlet>
</mat-sidenav-container>

View File

@@ -1,6 +1,5 @@
.container {
border: 1px solid rgba(0, 0, 0, 0.5);
height: 96vh;
height: 96vmax;
}
.main {

View File

@@ -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;

View File

@@ -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 {
/**

View File

@@ -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);
}
}

View File

@@ -1,3 +1,7 @@
.material-icons {
cursor: pointer;
}
}
.flex-spacer {
flex-grow: 1;
}

View File

@@ -4,7 +4,6 @@ html,
body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
.loading-spinner {