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..4dec9a2b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,26 +1,17 @@
- - - RxJS Docs - +
- - - - - {{menu.title}} - - - -
+
+ + + + + {{menu.title}} + + + -
- + +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 68062da3..1eb78a8f 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,22 +6,11 @@ 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; @@ -34,6 +18,12 @@ mat-sidenav { 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 f004ca25..9ef46b22 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,28 +1,27 @@ -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"; +import { MatSidenavModule } from "@angular/material"; -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, + MatSidenavModule + ], + declarations: [AppComponent] + }).compileComponents(); }) - .compileComponents(); - })); + ); beforeEach(() => { fixture = TestBed.createComponent(AppComponent); @@ -30,7 +29,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..002b98cb 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component } from "@angular/core"; interface Menu { title: string; @@ -7,30 +7,30 @@ interface Menu { } @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: '/', + title: "Home", + link: "/", options: { exact: true } }, { - title: 'Operators', - link: '/operators', + title: "Operators", + link: "/operators", options: { exact: false } }, { - title: 'Companies', - link: '/companies', + title: "Companies", + link: "/companies", options: { exact: false } }, { - title: 'Team', - link: '/team', + title: "Team", + link: "/team", options: { exact: false } } ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a1985e31..96331b8b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,27 +1,26 @@ -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"; +import { MatSidenavModule, MatListModule } from "@angular/material"; @NgModule({ - declarations: [ - AppComponent, - ], + declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, - RouterModule.forRoot(RXJS_DOC_ROUTES, { preloadingStrategy: PreloadAllModules }), - MatToolbarModule, + ToolbarModule, + MatListModule, MatSidenavModule, - MatIconModule, - MatButtonModule, - MatListModule + RouterModule.forRoot(RXJS_DOC_ROUTES, { + preloadingStrategy: PreloadAllModules + }) ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule {} 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 6389143f..aeece1fe 100644 --- a/src/app/companies/companies.module.ts +++ b/src/app/companies/companies.module.ts @@ -1,10 +1,12 @@ -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"; +import { environment } from "../../environments/environment"; @NgModule({ - imports: [routing], - declarations: [CompaniesComponent] + imports: [routing, SharedModule], + declarations: [CompaniesComponent] }) -export class CompaniesModule { } +export class CompaniesModule {} diff --git a/src/app/operators/components/operator-extras/operator-extras.component.scss b/src/app/operators/components/operator-extras/operator-extras.component.scss index b35dd9e2..100097d3 100644 --- a/src/app/operators/components/operator-extras/operator-extras.component.scss +++ b/src/app/operators/components/operator-extras/operator-extras.component.scss @@ -1,13 +1,17 @@ +.extra-tip { + display: flex; +} + h3 { - display: inline-block; - vertical-align: middle; - padding-left: 10px; + display: inline-block; + vertical-align: middle; + padding-left: 10px; } .tip-warning { - color: rgb(244, 67, 54); + color: rgb(244, 67, 54); } .tip-info { - color: rgb(33, 150, 243); + color: rgb(33, 150, 243); } diff --git a/src/app/operators/components/operator/operator.component.html b/src/app/operators/components/operator/operator.component.html index f0581f62..37609503 100644 --- a/src/app/operators/components/operator/operator.component.html +++ b/src/app/operators/components/operator/operator.component.html @@ -21,12 +21,18 @@

[operatorExamples]="examples" class="margin-bottom-16"> + [operatorParameters]="parameters" + *ngIf="parameters?.length"> + + diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts index 4f262760..453a59d8 100644 --- a/src/app/operators/components/operator/operator.component.ts +++ b/src/app/operators/components/operator/operator.component.ts @@ -1,24 +1,29 @@ -import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core'; -import { OperatorDoc } from '../../../../operator-docs/operator.model'; +import { + Component, + Input, + OnInit, + ChangeDetectionStrategy +} from "@angular/core"; +import { OperatorDoc } from "../../../../operator-docs/operator.model"; @Component({ - selector: 'app-operator', - templateUrl: './operator.component.html', - styleUrls: ['./operator.component.scss'], + selector: "app-operator", + templateUrl: "./operator.component.html", + styleUrls: ["./operator.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush }) export class OperatorComponent { @Input() operator: OperatorDoc; - private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/'; - private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators'; + private readonly baseSourceUrl = "https://github.com/ReactiveX/rxjs/blob/master/src/operators/"; + private readonly baseSpecUrl = "http://reactivex.io/rxjs/test-file/spec-js/operators"; get operatorName() { return this.operator.name; } get signature() { - return this.operator.signature || 'Signature Placeholder'; + return this.operator.signature || "Signature Placeholder"; } get marbleUrl() { @@ -30,17 +35,26 @@ export class OperatorComponent { } get shortDescription() { - return this.operator.shortDescription && this.operator.shortDescription.description; + return ( + this.operator.shortDescription && + this.operator.shortDescription.description + ); } get shortDescriptionExtras() { - return this.operator.shortDescription && this.operator.shortDescription.extras; + return ( + this.operator.shortDescription && this.operator.shortDescription.extras + ); } get walkthrough() { return this.operator.walkthrough && this.operator.walkthrough.description; } + get walkthroughExtras() { + return this.operator.walkthrough && this.operator.walkthrough.extras; + } + get parameters() { return this.operator.parameters || []; } 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..f864e8c2 --- /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, + MatIconModule, + MatButtonModule, + MatListModule, + MatSidenavModule, + MatExpansionModule, + MatCardModule, + MatInputModule, + MatMenuModule, + MatTooltipModule +} from "@angular/material"; + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + MatToolbarModule, + MatIconModule, + MatButtonModule, + MatListModule, + MatSidenavModule, + MatExpansionModule, + MatCardModule, + MatInputModule, + MatMenuModule, + MatTooltipModule, + FlexLayoutModule + ], + providers: [], + entryComponents: [], + exports: [ + CommonModule, + MatToolbarModule, + MatIconModule, + MatButtonModule, + MatListModule, + MatSidenavModule, + 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..7ee35605 --- /dev/null +++ b/src/app/toolbar/toolbar.component.html @@ -0,0 +1,13 @@ + + + RxJS Docs + + + GitHub + + + diff --git a/src/app/toolbar/toolbar.component.scss b/src/app/toolbar/toolbar.component.scss new file mode 100644 index 00000000..b57dce89 --- /dev/null +++ b/src/app/toolbar/toolbar.component.scss @@ -0,0 +1,8 @@ +img { + height: 26px; +} + +.title { + padding: 0 16px; + font-weight: 600; +} 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..043c8199 --- /dev/null +++ b/src/app/toolbar/toolbar.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit, Output, EventEmitter } from "@angular/core"; + +@Component({ + selector: "app-toolbar", + templateUrl: "./toolbar.component.html", + styleUrls: ["./toolbar.component.scss"] +}) +export class ToolbarComponent implements OnInit { + @Output() navToggle = new EventEmitter(); + navOpen() { + this.navToggle.emit(true); + } + + 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 00000000..73db1f61 Binary files /dev/null and b/src/assets/img/GitHub-Mark-Light-64px.png differ