Merge pull request #34 from btroncone/operator-section

feat(operators): operator browser page

Author: ladyleet

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

@@ -33,6 +33,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

@@ -12,14 +12,14 @@
   <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" 
+        <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="body-margin">
+    <main class="app-content">
       <router-outlet></router-outlet>
     </main>
   </mat-sidenav-container>

src/app/app.component.scss

@@ -2,3 +2,38 @@
   padding: 0 16px;
   font-weight: 600;
 }
+
+.app-fullpage {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  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;
+}
+
+
+
+

src/app/operators/_operator-theme.scss

@@ -0,0 +1,55 @@
+@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);
+
+  rx-marbles > div {
+    text-align: center;
+    min-width: 840px;
+
+    circle {
+      // temp fix: current broken on marble component
+      filter: none !important;
+    }
+  }
+
+  app-operator a {
+    text-decoration: none;
+    color: $link-color;
+  }
+
+  .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;
+      }
+    }
+  }
+}

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.scss

@@ -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/additional-resources/additional-resources.component.ts

@@ -0,0 +1,9 @@
+<div
+  *ngIf="!useInteractiveMarbles"
+  class="marble-wrapper mat-elevation-z2">
+  <img class="marble-diagram" [src]="url" *ngIf="url"/>
+</div>
+<rx-marbles
+  *ngIf="useInteractiveMarbles"
+  [attr.key]="operatorName">
+</rx-marbles>

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

@@ -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%;
+  }
+}