operator formatting update

Author: btroncone

src/app/operator-docs/combination/combineAll.ts

@@ -0,0 +1,32 @@
+@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-active-background;
+        color: white;
+        &:hover {
+          background-color: $operator-active-background;
+        }
+      }
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  a {
+    text-decoration: none;
+    color: $link-color;
+  }
+}

src/app/operators/_operator-theme.scss

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

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

@@ -1,3 +1,5 @@
+@import '../../operator-theme';
+
 .operator-name {
   font-size:30px;
 }
@@ -7,6 +9,7 @@
 }
 
 mat-toolbar {
-  background: #62757f !important;
+  background: $operator-active !important;
+  color: rgba(255, 255, 255, 0.87);
   font-weight: normal;
 }

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

@@ -4,8 +4,21 @@
   [id]="operatorName"
   class="operator-header">
 </app-operator-header>
-<div class="main-operator-container">
-  <div class="short-description">
-    {{ shortDescription }}
+<section class="main-operator-container mat-typography">
+  <h3 class="short-description" [innerHTML]="shortDescription"></h3>
+  <h2> Examples </h2>
+  <div
+    class="code-example"
+    *ngFor="let example of examples"
+    appHighlightJs>
+    <h3> {{ example.name }} </h3>
+    <pre [innerHTML]="example.code"></pre>
   </div>
-</div>
+  <h2> Related Operators </h2>
+  <ul class="related-list">
+    <li *ngFor="let related of relatedOperators">
+      <a [href]="'/operators#' + related"> {{ related }} </a>
+    </li>
+  </ul>
+  <h2> Additional References </h2>
+</section>

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

@@ -1,8 +1,22 @@
-
 .main-operator-container {
   padding: 5px;
   height: 1000px;
   display: flex;
   flex-direction: column;
   padding: 0 16px;
 }
+
+.related-list {
+  padding: 1px;
+  list-style-type: none;
+  margin-top: 0;
+
+  li {
+    padding-bottom: 5px;
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+
+}

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { OperatorDoc } from '../../../operator-docs/operator.model';
+import { OperatorDoc } from '../../../../operator-docs/operator.model';
 
 @Component({
   selector: 'app-operator',
@@ -20,4 +20,12 @@ export class OperatorComponent {
   get shortDescription() {
     return this.operator.shortDescription;
   }
+
+  get examples() {
+    return this.operator.examples || [];
+  }
+
+  get relatedOperators() {
+    return this.operator.relatedOperators || [];
+  }
 }

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

@@ -14,12 +14,13 @@ export class HighlightJsDirective implements AfterViewChecked {
 
     constructor(
       private elementRef: ElementRef,
-      private zone: NgZone) {}
+      private zone: NgZone
+    ) {}
 
     ngAfterViewChecked() {
         if (!this._done) {
             if (this.elementRef.nativeElement.innerHTML && this.elementRef.nativeElement.querySelector) {
-                const snippets = this.elementRef.nativeElement.querySelectorAll('code');
+                const snippets = this.elementRef.nativeElement.querySelectorAll('pre');
                 this.zone.runOutsideAngular(() => {
                     for (const snippet of snippets) {
                         hljs.highlightBlock(snippet);

src/app/operators/directives/highlight-js.directive.ts

@@ -1,7 +1,7 @@
 <mat-sidenav-container
   class="operator-container"
   appOperatorScroll
-  (activeOperator)="updateUrl($event)">
+  (activeOperator)="activeOperator = $event">
   <mat-sidenav
     mode="side"
     [opened]="true"
@@ -13,7 +13,7 @@ <h3 mat-subheader class="category-subheader">{{ category }}</h3>
       <a mat-list-item
         *ngFor="let operator of groupedOperators[category]"
         [href]="'/operators#' + operator.name"
-        [class.active-operator]="(activeOperator$ | async) === operator.name">
+        [class.active-operator]="activeOperator === operator.name">
         {{ operator.name }}
       </a>
     </mat-nav-list>

src/app/operators/operators.component.html

@@ -1,5 +1,4 @@
 $subheader-color: #333;
-$operator-border: #f3f3f3;
 
 :host {
   flex: 1 1 auto;
@@ -18,19 +17,6 @@ $operator-border: #f3f3f3;
   background: $subheader-color;
 }
 
-.operator-list {
-  a {
-    border-bottom: 1px solid $operator-border;
-    &.active-operator {
-      background-color: #f3f3f3;
-      transition: background-color .3s ease-in-out;
-    }
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-}
-
 .operator-list-sidenav {
   width: 300px;
 }