From 34d68e372ff1dd00cbb720b3ad7587a241dbb66e Mon Sep 17 00:00:00 2001 From: Andrew Anderson Date: Thu, 26 Oct 2017 23:38:47 -0400 Subject: [PATCH 1/4] refactor(Components): change to app.module and lazy loaded modules to use shared module --- package.json | 1 + src/app/app.component.html | 26 ++------ src/app/app.component.scss | 20 ------ src/app/app.component.spec.ts | 35 +++++------ src/app/app.component.ts | 39 ++---------- src/app/app.module.ts | 30 ++++----- src/app/companies/companies.module.ts | 13 ++-- src/app/operators/operators.module.ts | 71 ++++++++-------------- src/app/rxjs/rxjs.module.ts | 13 ++-- src/app/shared.module.ts | 50 +++++++++++++++ src/app/team/team.module.ts | 13 ++-- src/app/toolbar/toolbar.component.html | 23 +++++++ src/app/toolbar/toolbar.component.scss | 18 ++++++ src/app/toolbar/toolbar.component.spec.ts | 30 +++++++++ src/app/toolbar/toolbar.component.ts | 41 +++++++++++++ src/app/toolbar/toolbar.module.ts | 11 ++++ src/assets/img/GitHub-Mark-Light-64px.png | Bin 0 -> 2330 bytes 17 files changed, 257 insertions(+), 177 deletions(-) create mode 100644 src/app/shared.module.ts create mode 100644 src/app/toolbar/toolbar.component.html create mode 100644 src/app/toolbar/toolbar.component.scss create mode 100644 src/app/toolbar/toolbar.component.spec.ts create mode 100644 src/app/toolbar/toolbar.component.ts create mode 100644 src/app/toolbar/toolbar.module.ts create mode 100644 src/assets/img/GitHub-Mark-Light-64px.png diff --git a/package.json b/package.json index d94a2861..ed61b5a2 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@angular/common": "4.4.4", "@angular/compiler": "4.4.4", "@angular/core": "4.4.4", + "@angular/flex-layout": "2.0.0-beta.9", "@angular/forms": "4.4.4", "@angular/http": "4.4.4", "@angular/material": "2.0.0-beta.12", diff --git a/src/app/app.component.html b/src/app/app.component.html index 976f6af0..40aa9b27 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,26 +1,8 @@
- - - RxJS Docs - +
- - - - - {{menu.title}} - - - -
- -
- +
+ +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 68062da3..8793f047 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,8 +1,3 @@ -.title { - padding: 0 16px; - font-weight: 600; -} - .app-fullpage { position: absolute; top: 0; @@ -11,29 +6,14 @@ right: 0; display: flex; flex-direction: column; - header { z-index: 10; } } -mat-sidenav-container { - flex: 1 1 auto; - width: 100%; - height: 100%; -} - -mat-sidenav { - width: 200px; -} - .app-content { min-height: 100%; overflow: auto; display: flex; flex-direction: column; } - - - - diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index f004ca25..457a24e6 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,28 +1,21 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatListModule } from '@angular/material'; -import { AppComponent } from './app.component'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; +import { RouterTestingModule } from "@angular/router/testing"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { ToolbarModule } from "./toolbar/toolbar.module"; -describe('AppComponent', () => { +describe("AppComponent", () => { let component: AppComponent; let fixture: ComponentFixture; - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - RouterTestingModule, - BrowserAnimationsModule, - MatToolbarModule, - MatSidenavModule, - MatIconModule, - MatButtonModule, - MatListModule - ], - declarations: [AppComponent] + beforeEach( + async(() => { + TestBed.configureTestingModule({ + imports: [RouterTestingModule, BrowserAnimationsModule, ToolbarModule], + declarations: [AppComponent] + }).compileComponents(); }) - .compileComponents(); - })); + ); beforeEach(() => { fixture = TestBed.createComponent(AppComponent); @@ -30,7 +23,7 @@ describe('AppComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it("should create", () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 028157fb..1a4c1bab 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,37 +1,8 @@ -import { Component } from '@angular/core'; - -interface Menu { - title: string; - link: string; - options: { exact: boolean }; -} +import { Component } from "@angular/core"; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.scss"] }) -export class AppComponent { - menus: Menu[] = [ - { - title: 'Home', - link: '/', - options: { exact: true } - }, - { - title: 'Operators', - link: '/operators', - options: { exact: false } - }, - { - title: 'Companies', - link: '/companies', - options: { exact: false } - }, - { - title: 'Team', - link: '/team', - options: { exact: false } - } - ]; -} +export class AppComponent {} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a1985e31..63e53634 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,27 +1,23 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { NgModule } from '@angular/core'; -import { MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatListModule } from '@angular/material'; -import { RouterModule, PreloadAllModules } from '@angular/router'; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { NgModule } from "@angular/core"; +import { RouterModule, PreloadAllModules } from "@angular/router"; -import { AppComponent } from './app.component'; -import { RXJS_DOC_ROUTES } from './app.routing'; +import { AppComponent } from "./app.component"; +import { RXJS_DOC_ROUTES } from "./app.routing"; +import { ToolbarModule } from "./toolbar/toolbar.module"; @NgModule({ - declarations: [ - AppComponent, - ], + declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, - RouterModule.forRoot(RXJS_DOC_ROUTES, { preloadingStrategy: PreloadAllModules }), - MatToolbarModule, - MatSidenavModule, - MatIconModule, - MatButtonModule, - MatListModule + ToolbarModule, + RouterModule.forRoot(RXJS_DOC_ROUTES, { + preloadingStrategy: PreloadAllModules + }) ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule {} diff --git a/src/app/companies/companies.module.ts b/src/app/companies/companies.module.ts index 6389143f..7ac39e08 100644 --- a/src/app/companies/companies.module.ts +++ b/src/app/companies/companies.module.ts @@ -1,10 +1,11 @@ -import { NgModule } from '@angular/core'; +import { NgModule } from "@angular/core"; -import { CompaniesComponent } from './companies.component'; -import { routing } from './companies.routing'; +import { CompaniesComponent } from "./companies.component"; +import { routing } from "./companies.routing"; +import { SharedModule } from "../shared.module"; @NgModule({ - imports: [routing], - declarations: [CompaniesComponent] + imports: [routing, SharedModule], + declarations: [CompaniesComponent] }) -export class CompaniesModule { } +export class CompaniesModule {} diff --git a/src/app/operators/operators.module.ts b/src/app/operators/operators.module.ts index e04f6a09..908fa12e 100644 --- a/src/app/operators/operators.module.ts +++ b/src/app/operators/operators.module.ts @@ -1,34 +1,26 @@ -import { NgModule, InjectionToken, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { LayoutModule } from '@angular/cdk/layout'; import { - MatSidenavModule, - MatIconModule, - MatListModule, - MatToolbarModule, - MatExpansionModule, - MatCardModule, - MatInputModule, - MatMenuModule, - MatButtonModule, - MatTooltipModule -} from '@angular/material'; -import { ClipboardModule } from 'ngx-clipboard'; -import { ALL_OPERATORS, OperatorDoc } from '../../operator-docs'; + NgModule, + InjectionToken, + CUSTOM_ELEMENTS_SCHEMA +} from "@angular/core"; +import { LayoutModule } from "@angular/cdk/layout"; +import { ClipboardModule } from "ngx-clipboard"; -import { OperatorsRoutingModule } from './operators.routing'; -import { OperatorsComponent, OPERATORS_TOKEN } from './operators.component'; -import { OperatorComponent } from './components/operator/operator.component'; -import { OperatorHeaderComponent } from './components/operator-header/operator-header.component'; -import { OperatorParametersComponent } from './components/operator-parameters/operator-parameters.component'; -import { OperatorExamplesComponent } from './components/operator-examples/operator-examples.component'; -import { RelatedOperatorsComponent } from './components/related-operators/related-operators.component'; -import { OperatorExtrasComponent } from './components/operator-extras/operator-extras.component'; -import { AdditionalResourcesComponent } from './components/additional-resources/additional-resources.component'; -import { MarbleDiagramComponent } from './components/marble-diagram/marble-diagram.component'; -import { WalkthroughComponent } from './components/walkthrough/walkthrough.component'; -import { HighlightJsDirective } from './directives/highlight-js.directive'; -import { SafeUrlPipe } from './pipes/safe-url.pipe'; +import { ALL_OPERATORS, OperatorDoc } from "../../operator-docs"; +import { OperatorsRoutingModule } from "./operators.routing"; +import { OperatorsComponent, OPERATORS_TOKEN } from "./operators.component"; +import { OperatorComponent } from "./components/operator/operator.component"; +import { OperatorHeaderComponent } from "./components/operator-header/operator-header.component"; +import { OperatorParametersComponent } from "./components/operator-parameters/operator-parameters.component"; +import { OperatorExamplesComponent } from "./components/operator-examples/operator-examples.component"; +import { RelatedOperatorsComponent } from "./components/related-operators/related-operators.component"; +import { OperatorExtrasComponent } from "./components/operator-extras/operator-extras.component"; +import { AdditionalResourcesComponent } from "./components/additional-resources/additional-resources.component"; +import { MarbleDiagramComponent } from "./components/marble-diagram/marble-diagram.component"; +import { WalkthroughComponent } from "./components/walkthrough/walkthrough.component"; +import { HighlightJsDirective } from "./directives/highlight-js.directive"; +import { SafeUrlPipe } from "./pipes/safe-url.pipe"; +import { SharedModule } from "../shared.module"; @NgModule({ declarations: [ @@ -46,23 +38,12 @@ import { SafeUrlPipe } from './pipes/safe-url.pipe'; SafeUrlPipe ], imports: [ - CommonModule, + SharedModule, OperatorsRoutingModule, ClipboardModule, - LayoutModule, - MatSidenavModule, - MatIconModule, - MatListModule, - MatToolbarModule, - MatCardModule, - MatInputModule, - MatMenuModule, - MatButtonModule, - MatTooltipModule + LayoutModule ], - providers: [ - { provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS } - ], - schemas: [ CUSTOM_ELEMENTS_SCHEMA ] + providers: [{ provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS }], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) -export class OperatorsModule { } +export class OperatorsModule {} diff --git a/src/app/rxjs/rxjs.module.ts b/src/app/rxjs/rxjs.module.ts index 53e1d345..0c93ac40 100644 --- a/src/app/rxjs/rxjs.module.ts +++ b/src/app/rxjs/rxjs.module.ts @@ -1,10 +1,11 @@ -import { NgModule } from '@angular/core'; +import { NgModule } from "@angular/core"; -import { RxjsComponent } from './rxjs.component'; -import { routing } from './rxjs.routing'; +import { RxjsComponent } from "./rxjs.component"; +import { routing } from "./rxjs.routing"; +import { SharedModule } from "../shared.module"; @NgModule({ - imports: [routing], - declarations: [RxjsComponent] + imports: [routing, SharedModule], + declarations: [RxjsComponent] }) -export class RxjsModule { } +export class RxjsModule {} diff --git a/src/app/shared.module.ts b/src/app/shared.module.ts new file mode 100644 index 00000000..c7cd8368 --- /dev/null +++ b/src/app/shared.module.ts @@ -0,0 +1,50 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { FlexLayoutModule } from "@angular/flex-layout"; +import { + MatToolbarModule, + MatSidenavModule, + MatIconModule, + MatButtonModule, + MatListModule, + MatExpansionModule, + MatCardModule, + MatInputModule, + MatMenuModule, + MatTooltipModule +} from "@angular/material"; + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + MatToolbarModule, + MatSidenavModule, + MatIconModule, + MatButtonModule, + MatListModule, + MatExpansionModule, + MatCardModule, + MatInputModule, + MatMenuModule, + MatTooltipModule, + FlexLayoutModule + ], + providers: [], + entryComponents: [], + exports: [ + CommonModule, + MatToolbarModule, + MatSidenavModule, + MatIconModule, + MatButtonModule, + MatListModule, + MatExpansionModule, + MatCardModule, + MatInputModule, + MatMenuModule, + MatTooltipModule, + FlexLayoutModule + ] +}) +export class SharedModule {} diff --git a/src/app/team/team.module.ts b/src/app/team/team.module.ts index 32836909..a2268215 100644 --- a/src/app/team/team.module.ts +++ b/src/app/team/team.module.ts @@ -1,10 +1,11 @@ -import { NgModule } from '@angular/core'; +import { NgModule } from "@angular/core"; -import { TeamComponent } from './team.component'; -import { routing } from './team.routing'; +import { TeamComponent } from "./team.component"; +import { routing } from "./team.routing"; +import { SharedModule } from "../shared.module"; @NgModule({ - imports: [routing], - declarations: [TeamComponent] + imports: [routing, SharedModule], + declarations: [TeamComponent] }) -export class TeamModule { } +export class TeamModule {} diff --git a/src/app/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html new file mode 100644 index 00000000..5ae5f735 --- /dev/null +++ b/src/app/toolbar/toolbar.component.html @@ -0,0 +1,23 @@ + + + RxJS Docs + + + + GitHub + + + + + + + + {{menu.title}} + + + + diff --git a/src/app/toolbar/toolbar.component.scss b/src/app/toolbar/toolbar.component.scss new file mode 100644 index 00000000..30a7b821 --- /dev/null +++ b/src/app/toolbar/toolbar.component.scss @@ -0,0 +1,18 @@ +img { + height: 26px; +} + +.title { + padding: 0 16px; + font-weight: 600; +} + +mat-sidenav-container { + flex: 1 1 auto; + width: 100%; + height: calc(100vh - 64px); +} + +mat-sidenav { + width: 200px; +} diff --git a/src/app/toolbar/toolbar.component.spec.ts b/src/app/toolbar/toolbar.component.spec.ts new file mode 100644 index 00000000..ac3ec666 --- /dev/null +++ b/src/app/toolbar/toolbar.component.spec.ts @@ -0,0 +1,30 @@ +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { RouterTestingModule } from "@angular/router/testing"; + +import { ToolbarComponent } from "./toolbar.component"; +import { SharedModule } from "../shared.module"; + +describe("ToolbarComponent", () => { + let component: ToolbarComponent; + let fixture: ComponentFixture; + + beforeEach( + async(() => { + TestBed.configureTestingModule({ + imports: [SharedModule, BrowserAnimationsModule, RouterTestingModule], + declarations: [ToolbarComponent] + }).compileComponents(); + }) + ); + + beforeEach(() => { + fixture = TestBed.createComponent(ToolbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/toolbar/toolbar.component.ts b/src/app/toolbar/toolbar.component.ts new file mode 100644 index 00000000..5043fd85 --- /dev/null +++ b/src/app/toolbar/toolbar.component.ts @@ -0,0 +1,41 @@ +import { Component, OnInit } from "@angular/core"; + +interface Menu { + title: string; + link: string; + options: { exact: boolean }; +} + +@Component({ + selector: "app-toolbar", + templateUrl: "./toolbar.component.html", + styleUrls: ["./toolbar.component.scss"] +}) +export class ToolbarComponent implements OnInit { + menus: Menu[] = [ + { + title: "Home", + link: "/", + options: { exact: true } + }, + { + title: "Operators", + link: "/operators", + options: { exact: false } + }, + { + title: "Companies", + link: "/companies", + options: { exact: false } + }, + { + title: "Team", + link: "/team", + options: { exact: false } + } + ]; + + constructor() {} + + ngOnInit() {} +} diff --git a/src/app/toolbar/toolbar.module.ts b/src/app/toolbar/toolbar.module.ts new file mode 100644 index 00000000..1b182747 --- /dev/null +++ b/src/app/toolbar/toolbar.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from "@angular/core"; +import { ToolbarComponent } from "./toolbar.component"; +import { SharedModule } from "../shared.module"; +import { RouterModule } from "@angular/router"; + +@NgModule({ + imports: [SharedModule, RouterModule], + declarations: [ToolbarComponent], + exports: [ToolbarComponent] +}) +export class ToolbarModule {} diff --git a/src/assets/img/GitHub-Mark-Light-64px.png b/src/assets/img/GitHub-Mark-Light-64px.png new file mode 100644 index 0000000000000000000000000000000000000000..73db1f61f3aa55fcaecbca896dbea067706bb7bd GIT binary patch literal 2330 zcmaJ@dpy&7A0KVQT+TU3iOLKmvh6n;HrL%O6)ohFIM()K!!EXAIjO}-B}W%^)GMS^ zbRj&Vi`ep%r%r`PE0rauRMJE)p`NWn=lP@Od|$8M_wsqY-=EL>bNS=9n;FC~MOYyq z5Qu5ON?Ne?^wWKYaP5AUm;6k7ER@nCq#?pMX&OrmLdYE9CJ-6GXT^iTAd9m(`4;E} zfy}Yzg+@pt0@sk(LOz-_L`>RbTB#+~b3MT|& z14UGj%UhW)21C+=LfPqwY$6Bc>x1-?k+cr@pp=D_@sk7+lFS?R)h|hV*O@UW6`Ai_H`049j)JozV)4d8r`BUo7M!zgCCD`;G!S0dV&q zp8LL%~Ba#6Eg$iKtZe$N47EeRXa5>+}e1_})f4LZ~7>us9|I_MOlXiY|*KdQX zeS8~zP@tW6v39VXfr*USwp~rS`=B$j`)nk?@}kq(ClF4d>YOz8hkr;=W~kkm zCW7a<(pcz5X#A0R<9Z{E*BfJ?`u2(tHC?l!+(h-PRUM^q=-1CbjbNI^81U7VyU;3( zT2f^?#ma%q8;EN&iz|Pk@=)pdaMq3d25mbDNrIP#bi|hqP`3*fT}kuvR+%ng#;F!o z!3#SBB2F;iNzfJ(L`*fNFT`NdGQiAH|Ej|Hc2f5bF>p2ufwkUZTFe}(dJ$`MX;C(0 z-V{r-E2m(c5BI}drL(~k6SEswne#fEUdvi&3FiZh%N)80&$C_2kh}Zs$!WSMT5)2L z->t!4_PuW(@0iMUf!tM3EXsxR=8aqQJS!tI77vxXD$Q$NZ1vCFp)TCJPPKgJ6$dq6 z6AvwIT>T_kTfhs9Ro&hblgcP`#)4Y!f6RfcKKz5}fFeLswhx__Ru z`f>qsFw=AMC$D2)!n`KC&FVyxLH=oq<|UuIL`hLk2jvOa!Qq_R3CqNXSp|NlZhBlh z@V0BxvHNAmtK__)^rv^SNw9j3M7}#zg*ToWtbKT~2{x#g2)k9TC|R>Dzhq!T-pA~R z>ZL3u2sdInHHePlU?n!;#-16SNWGJd=j+gQ4vI}N_YbJpa3kc$Q-$nCw8DusXXMl4 z*nJS|qzj=rNJpZI; z$vRbg>YS|lmxjj--{P0zyGBQ?yoS4%MX$EkOMqE$O+Pm%_1o-3WM-q=b4f2dQfTt> zOFR@zTq!4JBAQzKEZEFs#YOE+WUR@=e`!;~PCh-+ddeAuP%>I*Cd8Cb%!1YNZFKDIJTra-- zG#+}%TS;ZSZaqDK8^0CL=AU{B|LU>Hu0mU~}a9D5U= zlszxG=SokFC;8liaQHBlh z2BUO}iYG`REj!%$Xj-syeaVfwq3hF5*L>e!Jm^2?Jo?@}>G*`TrXZHmap&CnfJ4u^ zk68!bvsByruv+!zzl{#!R8}8y9^Ra-sENMbl68A9w_o}?z5eO*E&If08t#Rq+K#s{ zb}mq^_${jVjmeHhTXNWUoFMIe)lJ26`vXz zWvk~HR@whs?OF8cKV8YyEs1et|A`i*;GS`_+RH=ns17TKJg|lJv;Y(H<+2}hIXsat z5ANw;3-!HT?J@e?t>VkCV$sSaXTfoVh-!;h=kN@TPi^X~Dlo@yIP4fl2 z#pt2|1Jj>Ov$71^ei~h1H$uM|R6wY=ZG3Q99U>X|mV`BoS9`4vYw~J@(FazM_8hI9o-&aIo@yE| z6xi92RAt7!kM;6HVQV)mjXu!6Snn}L!YlYRm7CF)XL~-WsBd9Uk6GUDFm8S4@oR}s z!f_@&&0G2FHTy?nQd8F&@&}*SrC)xRgU!h6eepUXk}}=;?q@wX1aZ#AJc}avS@*XR MKo6o-Qerdz3wwRZj{pDw literal 0 HcmV?d00001 From 133d49485e1c62d048df17b2bd6900dfcf218a0c Mon Sep 17 00:00:00 2001 From: Andrew Anderson Date: Fri, 27 Oct 2017 20:52:37 -0400 Subject: [PATCH 2/4] refactor(ToolbarComponent): to resolve layout issue with sidenav --- src/app/app.component.html | 13 +++++++-- src/app/app.component.scss | 10 +++++++ src/app/app.component.spec.ts | 8 ++++- src/app/app.component.ts | 31 +++++++++++++++++++- src/app/app.module.ts | 3 ++ src/app/companies/companies.component.html | 4 +-- src/app/companies/companies.component.ts | 15 ++++------ src/app/companies/companies.module.ts | 1 + src/app/toolbar/toolbar.component.html | 12 +------- src/app/toolbar/toolbar.component.scss | 10 ------- src/app/toolbar/toolbar.component.ts | 34 ++++------------------ 11 files changed, 75 insertions(+), 66 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 40aa9b27..4dec9a2b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,8 +1,17 @@
- +
- + + + + + {{menu.title}} + + + + +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 8793f047..1eb78a8f 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -17,3 +17,13 @@ display: flex; flex-direction: column; } + +mat-sidenav-container { + flex: 1 1 auto; + width: 100%; + height: calc(100vh - 64px); +} + +mat-sidenav { + width: 200px; +} diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 457a24e6..9ef46b22 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -3,6 +3,7 @@ import { RouterTestingModule } from "@angular/router/testing"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { AppComponent } from "./app.component"; import { ToolbarModule } from "./toolbar/toolbar.module"; +import { MatSidenavModule } from "@angular/material"; describe("AppComponent", () => { let component: AppComponent; @@ -11,7 +12,12 @@ describe("AppComponent", () => { beforeEach( async(() => { TestBed.configureTestingModule({ - imports: [RouterTestingModule, BrowserAnimationsModule, ToolbarModule], + imports: [ + RouterTestingModule, + BrowserAnimationsModule, + ToolbarModule, + MatSidenavModule + ], declarations: [AppComponent] }).compileComponents(); }) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1a4c1bab..002b98cb 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,8 +1,37 @@ import { Component } from "@angular/core"; +interface Menu { + title: string; + link: string; + options: { exact: boolean }; +} + @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"] }) -export class AppComponent {} +export class AppComponent { + menus: Menu[] = [ + { + title: "Home", + link: "/", + options: { exact: true } + }, + { + title: "Operators", + link: "/operators", + options: { exact: false } + }, + { + title: "Companies", + link: "/companies", + options: { exact: false } + }, + { + title: "Team", + link: "/team", + options: { exact: false } + } + ]; +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 63e53634..96331b8b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,6 +6,7 @@ import { RouterModule, PreloadAllModules } from "@angular/router"; import { AppComponent } from "./app.component"; import { RXJS_DOC_ROUTES } from "./app.routing"; import { ToolbarModule } from "./toolbar/toolbar.module"; +import { MatSidenavModule, MatListModule } from "@angular/material"; @NgModule({ declarations: [AppComponent], @@ -13,6 +14,8 @@ import { ToolbarModule } from "./toolbar/toolbar.module"; BrowserModule, BrowserAnimationsModule, ToolbarModule, + MatListModule, + MatSidenavModule, RouterModule.forRoot(RXJS_DOC_ROUTES, { preloadingStrategy: PreloadAllModules }) diff --git a/src/app/companies/companies.component.html b/src/app/companies/companies.component.html index b2979fa5..8b137891 100644 --- a/src/app/companies/companies.component.html +++ b/src/app/companies/companies.component.html @@ -1,3 +1 @@ -

- companies works! -

+ diff --git a/src/app/companies/companies.component.ts b/src/app/companies/companies.component.ts index 53634219..0dbc9a29 100644 --- a/src/app/companies/companies.component.ts +++ b/src/app/companies/companies.component.ts @@ -1,15 +1,12 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit } from "@angular/core"; @Component({ - selector: 'app-companies', - templateUrl: './companies.component.html', - styleUrls: ['./companies.component.scss'] + selector: "app-companies", + templateUrl: "./companies.component.html", + styleUrls: ["./companies.component.scss"] }) export class CompaniesComponent implements OnInit { + constructor() {} - constructor() { } - - ngOnInit() { - } + ngOnInit() {} } - diff --git a/src/app/companies/companies.module.ts b/src/app/companies/companies.module.ts index 7ac39e08..aeece1fe 100644 --- a/src/app/companies/companies.module.ts +++ b/src/app/companies/companies.module.ts @@ -3,6 +3,7 @@ import { NgModule } from "@angular/core"; import { CompaniesComponent } from "./companies.component"; import { routing } from "./companies.routing"; import { SharedModule } from "../shared.module"; +import { environment } from "../../environments/environment"; @NgModule({ imports: [routing, SharedModule], diff --git a/src/app/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html index 5ae5f735..7ee35605 100644 --- a/src/app/toolbar/toolbar.component.html +++ b/src/app/toolbar/toolbar.component.html @@ -1,23 +1,13 @@ - RxJS Docs - GitHub - - - - - {{menu.title}} - - - - diff --git a/src/app/toolbar/toolbar.component.scss b/src/app/toolbar/toolbar.component.scss index 30a7b821..b57dce89 100644 --- a/src/app/toolbar/toolbar.component.scss +++ b/src/app/toolbar/toolbar.component.scss @@ -6,13 +6,3 @@ img { padding: 0 16px; font-weight: 600; } - -mat-sidenav-container { - flex: 1 1 auto; - width: 100%; - height: calc(100vh - 64px); -} - -mat-sidenav { - width: 200px; -} diff --git a/src/app/toolbar/toolbar.component.ts b/src/app/toolbar/toolbar.component.ts index 5043fd85..043c8199 100644 --- a/src/app/toolbar/toolbar.component.ts +++ b/src/app/toolbar/toolbar.component.ts @@ -1,10 +1,4 @@ -import { Component, OnInit } from "@angular/core"; - -interface Menu { - title: string; - link: string; - options: { exact: boolean }; -} +import { Component, OnInit, Output, EventEmitter } from "@angular/core"; @Component({ selector: "app-toolbar", @@ -12,28 +6,10 @@ interface Menu { styleUrls: ["./toolbar.component.scss"] }) export class ToolbarComponent implements OnInit { - menus: Menu[] = [ - { - title: "Home", - link: "/", - options: { exact: true } - }, - { - title: "Operators", - link: "/operators", - options: { exact: false } - }, - { - title: "Companies", - link: "/companies", - options: { exact: false } - }, - { - title: "Team", - link: "/team", - options: { exact: false } - } - ]; + @Output() navToggle = new EventEmitter(); + navOpen() { + this.navToggle.emit(true); + } constructor() {} From 84a451bafcb503cec4f1ad0ecee42fdfff70e2d8 Mon Sep 17 00:00:00 2001 From: Andrew Anderson Date: Fri, 27 Oct 2017 21:07:55 -0400 Subject: [PATCH 3/4] refactor(sharedModule): removed duplicate import of sidemodule --- src/app/shared.module.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/shared.module.ts b/src/app/shared.module.ts index c7cd8368..5bc0c8ad 100644 --- a/src/app/shared.module.ts +++ b/src/app/shared.module.ts @@ -3,7 +3,6 @@ import { CommonModule } from "@angular/common"; import { FlexLayoutModule } from "@angular/flex-layout"; import { MatToolbarModule, - MatSidenavModule, MatIconModule, MatButtonModule, MatListModule, @@ -19,7 +18,6 @@ import { imports: [ CommonModule, MatToolbarModule, - MatSidenavModule, MatIconModule, MatButtonModule, MatListModule, @@ -35,7 +33,6 @@ import { exports: [ CommonModule, MatToolbarModule, - MatSidenavModule, MatIconModule, MatButtonModule, MatListModule, From cf60a35cb83dff8c1f84a979709a4b364e645238 Mon Sep 17 00:00:00 2001 From: Andrew Anderson Date: Fri, 27 Oct 2017 22:13:42 -0400 Subject: [PATCH 4/4] fix(sidenav): resolved sidenav import issue --- src/app/shared.module.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/shared.module.ts b/src/app/shared.module.ts index 5bc0c8ad..f864e8c2 100644 --- a/src/app/shared.module.ts +++ b/src/app/shared.module.ts @@ -6,6 +6,7 @@ import { MatIconModule, MatButtonModule, MatListModule, + MatSidenavModule, MatExpansionModule, MatCardModule, MatInputModule, @@ -21,6 +22,7 @@ import { MatIconModule, MatButtonModule, MatListModule, + MatSidenavModule, MatExpansionModule, MatCardModule, MatInputModule, @@ -36,6 +38,7 @@ import { MatIconModule, MatButtonModule, MatListModule, + MatSidenavModule, MatExpansionModule, MatCardModule, MatInputModule,