diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html index 7954b234..72199f7a 100644 --- a/web/src/app/app.component.html +++ b/web/src/app/app.component.html @@ -1,9 +1,11 @@ - + + -
+ -
-
- +
+
+ +
-
\ No newline at end of file + \ No newline at end of file diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts index 64ec6c2f..8428accc 100644 --- a/web/src/app/app.module.ts +++ b/web/src/app/app.module.ts @@ -19,6 +19,7 @@ import { MdCheckboxModule, MdGridListModule, MdProgressSpinnerModule, + MdSidenavModule, } from '@angular/material'; @@ -29,11 +30,13 @@ import { SettingsComponent } from './pages/settings/settings.component'; import { DashboardComponent } from './pages/dashboard/dashboard.component'; import { NavbarComponent } from './shared/navbar/navbar.component'; +import { SidebarComponent } from './shared/sidebar/sidebar.component'; import { ExchangeCurrencyTickerComponent } from './shared/exchange-currency-ticker/exchange-currency-ticker.component'; import { AllEnabledCurrencyTickersComponent } from './shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component'; //services import { WebsocketService } from './services/websocket/websocket.service'; import { WebsocketHandlerService } from './services/websocket-handler/websocket-handler.service'; +import { SidebarService } from './services/sidebar/sidebar.service'; import { ElectronService } from './providers/electron.service'; //Routing import { AppRoutingModule } from './app-routing.module'; @@ -50,7 +53,8 @@ import * as Rx from 'rxjs/Rx'; SettingsComponent, DashboardComponent, ExchangeCurrencyTickerComponent, - AllEnabledCurrencyTickersComponent + AllEnabledCurrencyTickersComponent, + SidebarComponent ], imports: [ BrowserModule, @@ -68,8 +72,9 @@ import * as Rx from 'rxjs/Rx'; MdCheckboxModule, MdGridListModule, MdProgressSpinnerModule, + MdSidenavModule, ], - providers: [ElectronService,WebsocketService,WebsocketHandlerService], + providers: [ElectronService,WebsocketService,WebsocketHandlerService, SidebarService], bootstrap: [AppComponent] }) export class AppModule { diff --git a/web/src/app/pages/settings/settings.component.scss b/web/src/app/pages/settings/settings.component.scss index 7a3c9dd6..98c47c43 100644 --- a/web/src/app/pages/settings/settings.component.scss +++ b/web/src/app/pages/settings/settings.component.scss @@ -15,6 +15,6 @@ .md-fab { margin: 0; position: fixed; - bottom: 5%; - right: 2%; + right: 20px; + bottom: 10px; } \ No newline at end of file diff --git a/web/src/app/services/sidebar/sidebar.service.spec.ts b/web/src/app/services/sidebar/sidebar.service.spec.ts new file mode 100644 index 00000000..7f6df76c --- /dev/null +++ b/web/src/app/services/sidebar/sidebar.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { SidebarService } from './sidebar.service'; + +describe('SidebarService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [SidebarService] + }); + }); + + it('should be created', inject([SidebarService], (service: SidebarService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/web/src/app/services/sidebar/sidebar.service.ts b/web/src/app/services/sidebar/sidebar.service.ts new file mode 100644 index 00000000..cd18c6e2 --- /dev/null +++ b/web/src/app/services/sidebar/sidebar.service.ts @@ -0,0 +1,45 @@ +import { Injectable } from '@angular/core'; +import { MdSidenav, MdDrawerToggleResult } from '@angular/material'; + +@Injectable() +export class SidebarService { + private sidenav: MdSidenav; + + /** + * Setter for sidenav. + * + * @param {MdSidenav} sidenav + */ + public setSidenav(sidenav: MdSidenav) { + this.sidenav = sidenav; + } + + /** + * Open this sidenav, and return a Promise that will resolve when it's fully opened (or get rejected if it didn't). + * + * @returns Promise + */ + public open(): Promise { + return this.sidenav.open(); + } + + /** + * Close this sidenav, and return a Promise that will resolve when it's fully closed (or get rejected if it didn't). + * + * @returns Promise + */ + public close(): Promise { + return this.sidenav.close(); + } + + /** + * Toggle this sidenav. This is equivalent to calling open() when it's already opened, or close() when it's closed. + * + * @param {boolean} isOpen Whether the sidenav should be open. + * + * @returns {Promise} + */ + public toggle(isOpen?: boolean): Promise { + return this.sidenav.toggle(isOpen); + } +} \ No newline at end of file diff --git a/web/src/app/shared/navbar/navbar.component.html b/web/src/app/shared/navbar/navbar.component.html index c9a9d1f4..aba2e051 100644 --- a/web/src/app/shared/navbar/navbar.component.html +++ b/web/src/app/shared/navbar/navbar.component.html @@ -1,16 +1,11 @@ \ No newline at end of file diff --git a/web/src/app/shared/sidebar/sidebar.component.html b/web/src/app/shared/sidebar/sidebar.component.html new file mode 100644 index 00000000..4b635ac8 --- /dev/null +++ b/web/src/app/shared/sidebar/sidebar.component.html @@ -0,0 +1,8 @@ + + +
+ The +
+ \ No newline at end of file diff --git a/web/src/app/shared/sidebar/sidebar.component.scss b/web/src/app/shared/sidebar/sidebar.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/web/src/app/shared/sidebar/sidebar.component.spec.ts b/web/src/app/shared/sidebar/sidebar.component.spec.ts new file mode 100644 index 00000000..e49c1a50 --- /dev/null +++ b/web/src/app/shared/sidebar/sidebar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SidebarComponent } from './sidebar.component'; + +describe('SidebarComponent', () => { + let component: SidebarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SidebarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/shared/sidebar/sidebar.component.ts b/web/src/app/shared/sidebar/sidebar.component.ts new file mode 100644 index 00000000..93814c28 --- /dev/null +++ b/web/src/app/shared/sidebar/sidebar.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { MdSidenav } from '@angular/material'; +import { SidebarService } from './../../services/sidebar/sidebar.service'; + +@Component({ + selector: 'app-sidebar', + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.scss'] +}) +export class SidebarComponent implements OnInit { + @ViewChild('sidenav') public sidenav: MdSidenav; + sidebarService: SidebarService + constructor() { } + + ngOnInit() { + this.sidebarService.setSidenav(this.sidenav); + } + }