added copy + operator styling updates

Author: btroncone

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/operators/_operator-theme.scss

@@ -38,7 +38,7 @@ $link-color: #2196F3;
     }
   }
 
-  a {
+  app-operator a {
     text-decoration: none;
     color: $link-color;
   }

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

@@ -3,7 +3,10 @@ <h2> Additional Resources </h2>
   <li>
     <a [href]="sourceUrl" target="_blank"> Source Code </a>
   </li>
+  <li>
+    <a [href]="specUrl" target="_blank"> Specs </a>
+  </li>
   <li *ngFor="let resource of additionalResources">
-    <a [href]="resource.url" target="_blank"> {{ resource.name }} </a>
+    <a [href]="resource.url" target="_blank"> {{ resource.description }} </a>
   </li>
-</ul>
+</ul>

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

@@ -16,6 +16,12 @@ <h3 [innerHTML]="example.name"></h3>
         *ngFor="let link of example.externalLinks">
         {{link.platform}}
       </a>
+      <span
+        mat-menu-item
+        ngxClipboard
+        [cbContent]="example.code">
+        Copy To Clipboard
+      </span>
     </mat-menu>
     <pre [innerHTML]="example.code"></pre>
   </div>

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/operator.component.html

@@ -6,11 +6,28 @@
 </app-operator-header>
 <section class="main-operator-container mat-typography">
   <h3 class="short-description" [innerHTML]="shortDescription"></h3>
-  <app-marble-diagram [url]="marbleUrl" class="margin-bottom-32"></app-marble-diagram>
-  <app-operator-examples [operatorExamples]="examples" class="margin-bottom-16"></app-operator-examples>
-  <app-operator-parameters [operatorParameters]="parameters"></app-operator-parameters>
-  <app-operator-walkthrough [operatorWalkthrough]="walkthrough" class="margin-bottom-16"></app-operator-walkthrough>
-  <app-related-operators [relatedOperators]="relatedOperators"></app-related-operators>
+  <app-operator-extras
+    class="margin-bottom-16"
+    *ngIf="shortDescriptionExtras"
+    [operatorExtras]="shortDescriptionExtras">
+  </app-operator-extras>
+  <app-marble-diagram
+    class="margin-bottom-32"
+    [url]="marbleUrl" >
+  </app-marble-diagram>
+  <app-operator-examples
+    [operatorExamples]="examples" class="margin-bottom-16">
+  </app-operator-examples>
+  <app-operator-parameters
+    [operatorParameters]="parameters">
+  </app-operator-parameters>
+  <app-operator-walkthrough
+    class="margin-bottom-16"
+    [operatorWalkthrough]="walkthrough" >
+  </app-operator-walkthrough>
+  <app-related-operators
+    [relatedOperators]="relatedOperators">
+  </app-related-operators>
   <app-additional-resources
     [additionalResources]="additionalResources"
     [sourceUrl]="sourceUrl">

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

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   padding: 0 16px;
-  margin-bottom: 16px;
+  margin-bottom: 32px;
 }
 
 .short-description {

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

@@ -11,6 +11,7 @@ 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';
 
   get operatorName() {
     return this.operator.name;
@@ -28,6 +29,10 @@ export class OperatorComponent {
     return this.operator.shortDescription && this.operator.shortDescription.description;
   }
 
+  get shortDescriptionExtras() {
+    return this.operator.shortDescription && this.operator.shortDescription.extras;
+  }
+
   get walkthrough() {
     return this.operator.walkthrough && this.operator.walkthrough.description;
   }
@@ -48,6 +53,10 @@ export class OperatorComponent {
     return `${this.baseSourceUrl}/${this.operatorName}.ts`;
   }
 
+  get specUrl() {
+    return `${this.baseSpecUrl}/${this.operatorName}-spec.js.html`;
+  }
+
   get additionalResources() {
     return this.operator.additionalResources || [];
   }