filling in info and styling updates

Author: btroncone

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

@@ -9,19 +9,60 @@ <h3 class="short-description" [innerHTML]="shortDescription"></h3>
   <div class="marble-wrapper mat-elevation-z2">
     <img class="marble-diagram" [src]="marbleUrl" *ngIf="marbleUrl"/>
   </div>
+  <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 parameters">
+        <td> {{parameter.name}} </td>
+        <td> {{parameter.type}} </td>
+        <td> {{parameter.attribute}} </td>
+        <td> {{parameter.description}} </td>
+      </tr>
+    </tbody>
+  </table>
   <h2 class="examples-header"> Examples </h2>
   <div
     class="code-example"
     *ngFor="let example of examples"
     appHighlightJs>
     <h3 [innerHTML]="example.name"></h3>
-    <pre [innerHTML]="example.code" class="mat-elevation-z2"></pre>
+    <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">
+          {{link.platform}}
+        </a>
+      </mat-menu>
+      <pre [innerHTML]="example.code"></pre>
+    </div>
   </div>
   <h2 class="related-operators"> Related Operators </h2>
-  <ul class="related-list">
+  <ul class="section-list">
     <li *ngFor="let related of relatedOperators">
       <a [href]="'/operators#' + related"> {{ related }} </a>
     </li>
   </ul>
-  <h2> Additional References </h2>
+  <h2> Additional Resources </h2>
+  <ul class="section-list">
+    <li>
+      <a [href]="sourceUrl" target="_blank"> Source Code </a>
+    </li>
+    <li *ngFor="let resource of additionalResources">
+      <a [href]="resource.url" target="_blank"> {{ resource.name }} </a>
+    </li>
+  </ul>
 </section>

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

@@ -1,13 +1,17 @@
 @import '../../../../styles/media-helpers';
 
+h2 {
+  margin: 16px 0 16px;
+}
+
 .main-operator-container {
   padding: 5px;
   display: flex;
   flex-direction: column;
   padding: 0 16px;
 }
 
-.related-list {
+.section-list {
   padding: 1px;
   list-style-type: none;
   margin-top: 0;
@@ -24,10 +28,6 @@
   margin: 16px 0 32px;
 }
 
-.related-operators {
-  margin-top: 16px;
-}
-
 .examples-header {
   margin: 32px 0 16px;
 }
@@ -44,3 +44,34 @@
     max-width: 100%;
   }
 }
+
+.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);
+  }
+}
+
+.code-block {
+  position: relative;
+}
+
+.menu-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+}

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

@@ -22,7 +22,15 @@ export class OperatorComponent {
   }
 
   get shortDescription() {
-    return this.operator.shortDescription;
+    return this.operator.shortDescription && this.operator.shortDescription.description;
+  }
+
+  get longDescription() {
+    return this.operator.longDescription && this.operator.shortDescription.description;
+  }
+
+  get parameters() {
+    return this.operator.parameters || [];
   }
 
   get examples() {
@@ -32,4 +40,12 @@ export class OperatorComponent {
   get relatedOperators() {
     return this.operator.relatedOperators || [];
   }
+
+  get sourceCode() {
+    return `https://github.com/ReactiveX/rxjs/blob/master/src/operators/${this.operatorName}.ts`;
+  }
+
+  get additionalResources() {
+    return this.operator.additionalResources || [];
+  }
 }

src/app/operators/operators.module.ts

@@ -7,7 +7,9 @@ import {
   MatToolbarModule,
   MatExpansionModule,
   MatCardModule,
-  MatInputModule
+  MatInputModule,
+  MatMenuModule,
+  MatButtonModule
 } from '@angular/material';
 import { RouterModule } from '@angular/router';
 
@@ -41,7 +43,9 @@ const OPERATOR_ROUTES = [
     MatListModule,
     MatToolbarModule,
     MatCardModule,
-    MatInputModule
+    MatInputModule,
+    MatMenuModule,
+    MatButtonModule
   ]
 })
 export class OperatorsModule { }

src/operator-docs/combination/combineAll.ts

@@ -4,23 +4,40 @@ export const combineAll: OperatorDoc = {
   'name': 'combineAll',
   'operatorType': 'combination',
   'signature': 'public combineAll(project: function): Observable',
+  'parameters': [
+    {
+      'name': 'project',
+      'type': 'function',
+      'attribute': 'optional',
+      'description': 'An optional function to map the most recent values from each inner Observable into a new result. Takes each of the most recent values from each collected inner Observable as arguments, in order.'
+    }
+  ],
   'marbleUrl': 'http://reactivex.io/rxjs/img/combineAll.png',
-  'shortDescription': 'Flattens an Observable-of-Observables by applying <a href="/operators#combineLatest" class="markdown-code">combineLatest</a> when the Observable-of-Observables completes.',
+  'shortDescription': {
+    'description': 'Flattens an Observable-of-Observables by applying <a href="/operators#combineLatest" class="markdown-code">combineLatest</a> when the Observable-of-Observables completes.'
+  },
+  'longDescription': {
+    'description': ''
+  },
   'examples': [
     {
-      name: 'Map two click events to a finite interval Observable, then apply <span class="markdown-code">combineAll</span>',
-      code: `
+      'name': 'Map two click events to a finite interval Observable, then apply <span class="markdown-code">combineAll</span>',
+      'code': `
         const clicks = Rx.Observable.fromEvent(document, 'click');
         const higherOrder = clicks.map(ev =>
           Rx.Observable.interval(Math.random()*2000).take(3)
         ).take(2);
         const result = higherOrder.combineAll();
         result.subscribe(x => console.log(x));
       `,
-      externalLinks: [
-        { platform: 'JSBin', url: 'test'}
+      'externalLinks': [
+        { 'platform': 'JSBin', 'url': 'test'},
+        { 'platform': 'JSFiddle', 'url': 'test'}
       ]
     }
   ],
-  'relatedOperators': [ 'combineLatest', 'mergeAll' ]
+  'relatedOperators': [ 'combineLatest', 'mergeAll' ],
+  'additionalResources': [
+    { 'description': 'combineAll Tests', 'url': 'http://reactivex.io/rxjs/test-file/spec-js/operators/combineAll-spec.js.html#lineNumber7' }
+  ]
 };

src/operator-docs/operator.model.ts

@@ -18,20 +18,39 @@ export interface ExternalLink {
   url: string;
 }
 
+export interface OperatorParameters {
+  name: string;
+  type: string;
+  attribute: string;
+  description: string;
+}
+
 export interface OperatorExample {
   name: string;
   code: string;
   externalLinks: ExternalLink[];
 }
 
+export interface OperatorExtra {
+  type: 'Tip' | 'Warning';
+  text: string;
+}
+
 export interface OperatorDoc {
   readonly name?: string;
   readonly operatorType?: OperatorType;
   readonly signature?: string;
   readonly marbleUrl?: string;
-  readonly shortDescription?: string;
-  readonly longDescription?: string;
+  readonly parameters?: OperatorParameters[];
+  readonly shortDescription?: {
+    description: string;
+    extras?: OperatorExtra[]
+  };
+  readonly longDescription?: {
+    description: string;
+    extras?: OperatorExtra[]
+  };
   readonly examples?: OperatorExample[];
-  readonly additionalReferences?: OperatorReference[];
+  readonly additionalResources?: OperatorReference[];
   readonly relatedOperators?: string[];
 }