feat(operators): operator browser page

ngsw-manifest.json

@@ -2,9 +2,14 @@
   "external": {
     "urls": [
       {"url": "https://fonts.googleapis.com/icon?family=Material+Icons"},
-      {"url": "https://fonts.googleapis.com/css?family=Roboto"},
+      {"url": "https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"},
       {"url": "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"},
-      {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"}
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/monokai_sublime.min.css"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/typescript.min.js"},
+      {"url": "http://reactivex.io/rxjs/img/combineAll.png"},
+      {"url": "http://reactivex.io/rxjs/img/combineLatest.png"}
     ]
   }
 }

package.json

@@ -27,6 +27,7 @@
     "@types/hammerjs": "2.0.35",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
+    "ngx-clipboard": "8.1.0",
     "rxjs": "5.4.2",
     "zone.js": "0.8.14"
   },

src/app/app.component.html

@@ -1,11 +1,11 @@
 <div class="app-fullpage">
-  <mat-toolbar color="accent" class="mat-elevation-z6">
+  <mat-toolbar color="accent" class="mat-elevation-z6 primary-toolbar">
     <button mat-icon-button (click)="sidenav.toggle()">
-    <mat-icon>
-      menu
-    </mat-icon>
-  </button>
-    <span class="title"> RxJS Docs </span>
+      <mat-icon>
+        menu
+      </mat-icon>
+    </button>
+    <span class="toolbar-title"> RxJS Docs </span>
   </mat-toolbar>
   <mat-sidenav-container>
     <mat-sidenav #sidenav>
@@ -17,7 +17,7 @@
         </a>
       </mat-nav-list>
     </mat-sidenav>
-    <div class="body-margin">
+    <div class="app-content">
       <router-outlet></router-outlet>
     </div>
   </mat-sidenav-container>

src/app/app.component.scss

@@ -1,3 +1,38 @@
-.title {
-  padding: 0 16px;
+.app-fullpage {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
 }
+
+mat-sidenav-container {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+mat-sidenav {
+  width: 200px;
+}
+
+.primary-toolbar {
+  z-index: 10;
+
+  .toolbar-title {
+    padding: 0 16px;
+  }
+}
+
+.app-content {
+  min-height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+
+
+

src/app/operators/_operator-theme.scss

@@ -0,0 +1,45 @@
+@import '~@angular/material/theming';
+
+$operator-border: #f3f3f3;
+$operator-active: #62757f;
+$link-color: #2196F3;
+
+@mixin operator-theme($theme) {
+  $primary: mat-color(map-get($theme, primary));
+  $accent: mat-color(map-get($theme, accent));
+  $operator-active-background: rgba($operator-active, .7);
+
+  .operator-list {
+    a {
+      border-bottom: 1px solid $operator-border;
+      &.active-operator {
+        background-color: $operator-border;
+        // color: white;
+        &:hover {
+          background-color: $operator-border;
+        }
+      }
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .section-list {
+    padding: 1px;
+    list-style-type: none;
+    margin-top: 0;
+
+    li {
+      padding-bottom: 5px;
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  app-operator a {
+    text-decoration: none;
+    color: $link-color;
+  }
+}

src/app/operators/components/additional-resources/additional-resources.component.html

@@ -0,0 +1,12 @@
+<h2> Additional Resources </h2>
+<ul class="section-list">
+  <li>
+    <a [href]="sourceUrl" target="_blank"> Source Code </a>
+  </li>
+  <li>
+    <a [href]="specsUrl" target="_blank"> Specs </a>
+  </li>
+  <li *ngFor="let resource of additionalResources">
+    <a [href]="resource.url" target="_blank"> {{ resource.description }} </a>
+  </li>
+</ul>

src/app/operators/components/additional-resources/additional-resources.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { OperatorReference } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-additional-resources',
+  templateUrl: './additional-resources.component.html',
+  styleUrls: ['./additional-resources.component.scss']
+})
+export class AdditionalResourcesComponent {
+  @Input() additionalResources: OperatorReference[];
+  @Input() sourceUrl: string;
+  @Input() specsUrl: string;
+}

src/app/operators/components/marble-diagram/marble-diagram.component.html

@@ -0,0 +1,3 @@
+<div class="marble-wrapper mat-elevation-z2">
+  <img class="marble-diagram" [src]="url" *ngIf="url"/>
+</div>

src/app/operators/components/marble-diagram/marble-diagram.component.scss

@@ -0,0 +1,14 @@
+@import '../../../../styles/media-helpers';
+
+.marble-wrapper {
+  background-color: white;
+  text-align: center;
+}
+
+.marble-diagram {
+  max-width: 640px;
+
+  @media #{$mat-sm-down} {
+    max-width: 100%;
+  }
+}

src/app/operators/components/marble-diagram/marble-diagram.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { OperatorParameters } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-marble-diagram',
+  templateUrl: './marble-diagram.component.html',
+  styleUrls: ['./marble-diagram.component.scss']
+})
+export class MarbleDiagramComponent {
+  @Input() url: string;
+}

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

@@ -0,0 +1,30 @@
+<h2> Examples </h2>
+<div
+  class="code-example"
+  *ngFor="let example of operatorExamples"
+  appHighlightJs>
+  <h3 [innerHTML]="example.name"></h3>
+  <div class="code-block mat-elevation-z2">
+    <button mat-icon-button [matMenuTriggerFor]="menu" class="menu-button">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <a
+        mat-menu-item
+        [href]="link.url"
+        target="_blank"
+        *ngFor="let link of example.externalLinks">
+        <mat-icon>open_in_new</mat-icon>
+        <span>{{link.platform}}</span>
+      </a>
+      <button
+        mat-menu-item
+        ngxClipboard
+        [cbContent]="example.code">
+        <mat-icon>content_copy</mat-icon>
+        <span>Copy To Clipboard</span>
+      </button>
+    </mat-menu>
+    <pre [innerHTML]="example.code"></pre>
+  </div>
+</div>

src/app/operators/components/operator-examples/operator-examples.component.scss

@@ -0,0 +1,9 @@
+.code-block {
+  position: relative;
+}
+
+.menu-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+}

src/app/operators/components/operator-examples/operator-examples.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { OperatorExample } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-operator-examples',
+  templateUrl: './operator-examples.component.html',
+  styleUrls: ['./operator-examples.component.scss']
+})
+export class OperatorExamplesComponent {
+  @Input() operatorExamples: OperatorExample[];
+}

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

@@ -0,0 +1,12 @@
+<div
+  class="extra-tip"
+  *ngFor="let tip of tips">
+  <mat-icon class="tip-info">info</mat-icon>
+  <h3 [innerHTML]="tip.text"></h3>
+</div>
+<div
+  class="extra-tip"
+  *ngFor="let warning of warnings">
+  <mat-icon class="tip-warning">warning</mat-icon>
+  <h3 [innerHTML]="warning.text"></h3>
+</div>

src/app/operators/components/operator-extras/operator-extras.component.scss

@@ -0,0 +1,13 @@
+h3 {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 10px;
+}
+
+.tip-warning {
+  color: rgb(244, 67, 54);
+}
+
+.tip-info {
+  color: rgb(33, 150, 243);
+}

src/app/operators/components/operator-extras/operator-extras.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { OperatorExtra } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-operator-extras',
+  templateUrl: './operator-extras.component.html',
+  styleUrls: ['./operator-extras.component.scss']
+})
+export class OperatorExtrasComponent {
+  @Input() operatorExtras: OperatorExtra[] = [];
+
+  get tips() {
+    return this.operatorExtras.filter(e => e.type === 'Tip');
+  }
+
+  get warnings() {
+    return this.operatorExtras.filter(e => e.type === 'Warning');
+  }
+}

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

@@ -0,0 +1,6 @@
+<mat-toolbar class="operator-name">
+  {{ operatorName }}
+</mat-toolbar>
+<mat-toolbar class="signature">
+  {{ operatorSignature }}
+</mat-toolbar>

src/app/operators/components/operator-header/operator-header.component.scss

@@ -0,0 +1,15 @@
+@import '../../operator-theme';
+
+.operator-name {
+  font-size:30px;
+}
+
+.signature {
+  margin-bottom: 24px;
+}
+
+mat-toolbar {
+  background: $operator-active !important;
+  color: rgba(255, 255, 255, 0.87);
+  font-weight: normal;
+}

src/app/operators/components/operator-header/operator-header.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-operator-header',
+  templateUrl: './operator-header.component.html',
+  styleUrls: ['./operator-header.component.scss']
+})
+export class OperatorHeaderComponent {
+  @Input() operatorName: string;
+  @Input() operatorSignature: string;
+}

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

@@ -0,0 +1,19 @@
+<h2> Parameters </h2>
+<table class="parameter-table mat-elevation-z2">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Attribute</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let parameter of operatorParameters">
+      <td> {{parameter.name}} </td>
+      <td> {{parameter.type}} </td>
+      <td> {{parameter.attribute}} </td>
+      <td> {{parameter.description}} </td>
+    </tr>
+  </tbody>
+</table>

src/app/operators/components/operator-parameters/operator-parameters.component.scss

@@ -0,0 +1,20 @@
+.parameter-table {
+  border-collapse: collapse;
+  border-radius: 2px;
+  border-spacing: 0;
+  margin: 0 0 32px 0;
+  width: 100%;
+
+  th {
+    // font-weight: 400;
+    max-width: 100px;
+    padding: 12px 18px;
+    text-align: left;
+  }
+
+  td {
+    font-weight: 400;
+    padding: 8px 16px;
+    border: 1px solid rgba(0,0,0,.03);
+  }
+}

src/app/operators/components/operator-parameters/operator-parameters.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { OperatorParameters } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-operator-parameters',
+  templateUrl: './operator-parameters.component.html',
+  styleUrls: ['./operator-parameters.component.scss']
+})
+export class OperatorParametersComponent {
+  @Input() operatorParameters: OperatorParameters[];
+}