fix(operators): added tips after operator description

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

src/app/app.component.html

@@ -1,26 +1,17 @@
 <div class="app-fullpage">
   <header>
-    <mat-toolbar color="accent" class="mat-elevation-z6">
-      <button mat-icon-button (click)="sidenav.toggle()" aria-label="menu">
-        <mat-icon>
-          menu
-        </mat-icon>
-      </button>
-      <span class="title"> RxJS Docs </span>
-    </mat-toolbar>
+    <app-toolbar (navToggle)="sidenav.toggle()"></app-toolbar>
   </header>
-  <mat-sidenav-container>
-    <mat-sidenav #sidenav role="navigation">
-      <mat-nav-list (click)="sidenav.toggle()">
-        <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active"
-          [routerLinkActiveOptions]="menu.options"
-          [routerLink]="menu.link">
-          {{menu.title}}
-        </a>
-      </mat-nav-list>
-    </mat-sidenav>
-    <main class="app-content">
+  <main class="app-content">
+    <mat-sidenav-container>
+      <mat-sidenav #sidenav role="navigation">
+        <mat-nav-list (click)="sidenav.toggle()">
+          <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
+            {{menu.title}}
+          </a>
+        </mat-nav-list>
+      </mat-sidenav>
       <router-outlet></router-outlet>
-    </main>
-  </mat-sidenav-container>
+    </mat-sidenav-container>
+  </main>
 </div>

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,24 @@
   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;
 }
 
+mat-sidenav-container {
+  flex: 1 1 auto;
+  width: 100%;
+  height: calc(100vh - 64px);
+}
 
-
-
+mat-sidenav {
+  width: 200px;
+}

src/app/app.component.spec.ts

@@ -1,36 +1,35 @@
-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<AppComponent>;
 
-  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);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it("should create", () => {
     expect(component).toBeTruthy();
   });
 });

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 }
     }
   ];

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 {}

src/app/companies/companies.component.html

@@ -1,3 +1 @@
-<p>
-  companies works!
-</p>
+

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() {}
 }
-

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 {}

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

src/app/operators/components/operator/operator.component.html

@@ -21,12 +21,18 @@ <h3 class="short-description" [innerHTML]="shortDescription"></h3>
     [operatorExamples]="examples" class="margin-bottom-16">
   </app-operator-examples>
   <app-operator-parameters
-    [operatorParameters]="parameters">
+    [operatorParameters]="parameters"
+    *ngIf="parameters?.length">
   </app-operator-parameters>
   <app-operator-walkthrough
     class="margin-bottom-16"
     [operatorWalkthrough]="walkthrough" >
   </app-operator-walkthrough>
+  <app-operator-extras
+    class="margin-bottom-16"
+    *ngIf="walkthroughExtras"
+    [operatorExtras]="walkthroughExtras">
+  </app-operator-extras>
   <app-related-operators
     [relatedOperators]="relatedOperators">
   </app-related-operators>

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 || [];
   }