styling + quick link updates

Author: btroncone

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

@@ -3,28 +3,25 @@ <h2> Examples </h2>
   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>
+    <div class="example-header">
+      <div class="header-title" [innerHTML]="example.name"></div>
       <button
-        mat-menu-item
+        mat-icon-button
         ngxClipboard
-        [cbContent]="example.code">
+        [cbContent]="example.code"
+        matTooltip="Copy">
         <mat-icon>content_copy</mat-icon>
-        <span>Copy To Clipboard</span>
       </button>
-    </mat-menu>
+      <a
+        *ngIf="example.externalLink"
+        mat-icon-button
+        [href]="example.externalLink.url"
+        target="_blank"
+        [matTooltip]="example.externalLink.platform">
+        <mat-icon>open_in_new</mat-icon>
+      </a>
+    </div>
     <pre [innerHTML]="example.code"></pre>
   </div>
 </div>

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

@@ -1,9 +1,34 @@
 .code-block {
   position: relative;
+
+  pre {
+    margin-top: 0;
+    padding-top: 0;
+  }
 }
 
 .menu-button {
   position: absolute;
   right: 0;
   top: 0;
 }
+
+.example-options {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.example-header {
+  align-content: center;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 8px 18px;
+  color: rgba(0, 0, 0, 0.692);
+  background: #fafafa;
+
+  .header-title {
+    flex: 1 1 auto;
+  }
+}

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

@@ -6,15 +6,18 @@
   width: 100%;
 
   th {
-    // font-weight: 400;
+    background-color: #fafafa;
     max-width: 100px;
     padding: 12px 18px;
     text-align: left;
+    color: rgba(0, 0, 0, 0.692);
+    font-weight: normal;
   }
 
   td {
     font-weight: 400;
     padding: 8px 16px;
     border: 1px solid rgba(0,0,0,.03);
+    background-color: white;
   }
 }

src/app/operators/operators.module.ts

@@ -9,7 +9,8 @@ import {
   MatCardModule,
   MatInputModule,
   MatMenuModule,
-  MatButtonModule
+  MatButtonModule,
+  MatTooltipModule
 } from '@angular/material';
 import { ClipboardModule } from 'ngx-clipboard';
 
@@ -62,7 +63,8 @@ const OPERATOR_ROUTES = [
     MatCardModule,
     MatInputModule,
     MatMenuModule,
-    MatButtonModule
+    MatButtonModule,
+    MatTooltipModule
   ]
 })
 export class OperatorsModule { }

src/operator-docs/combination/combineAll.ts

@@ -55,10 +55,7 @@ export const combineAll: OperatorDoc = {
         const result = higherOrder.combineAll();
         result.subscribe(x => console.log(x));
       `,
-      'externalLinks': [
-        { 'platform': 'JSBin', 'url': 'jsbin.com'},
-        { 'platform': 'JSFiddle', 'url': 'https://jsfiddle.net/sba9k56v/'}
-      ]
+      'externalLink': { 'platform': 'JSBin', 'url': 'http://jsbin.com/peparawuvo/1/edit?js,console,output'}
     }
   ],
   'relatedOperators': [ 'combineLatest', 'mergeAll' ],

src/operator-docs/combination/combineLatest.ts

@@ -54,10 +54,7 @@ export const combineLatest: OperatorDoc = {
         */
         bmi.subscribe(x => console.log('BMI is ' + x));
       `,
-      'externalLinks': [
-        { 'platform': 'JSBin', 'url': 'jsbin.com'},
-        { 'platform': 'JSFiddle', 'url': 'https://jsfiddle.net/sba9k56v/'}
-      ]
+      'externalLink': { 'platform': 'JSBin', 'url': 'http://jsbin.com/pivowunedu/1/edit?js,console'}
     }
   ],
   'relatedOperators': [ 'combineAll', 'merge', 'withLatestFrom' ],

src/operator-docs/operator.model.ts

@@ -28,7 +28,7 @@ export interface OperatorParameters {
 export interface OperatorExample {
   name: string;
   code: string;
-  externalLinks: ExternalLink[];
+  externalLink: ExternalLink;
 }
 
 export interface OperatorExtra {