feat(api): add table-of-contents to api page (#291)

Author: amcdnl

material.angular.io/src/app/pages/component-viewer/_component-viewer-theme.scss

@@ -14,6 +14,9 @@
     .mat-tab-label:focus {
       color: mat-color($foreground, text);
     }
+  }
 
+  .docs-api-h3 {
+    border-bottom: 1px solid mat-color($foreground, divider);
   }
 }

material.angular.io/src/app/pages/component-viewer/component-api.html

@@ -3,4 +3,8 @@
 </span>
 <doc-viewer
   documentUrl="/assets/documents/api/{{componentViewer.componentDocItem.id}}.html"
-  class="docs-component-view-text-content"></doc-viewer>
+  class="docs-component-view-text-content docs-component-api"
+  (contentLoaded)="toc.updateScrollPosition()"></doc-viewer>
+<table-of-contents #toc 
+    headerSelectors=".docs-api-h3,.docs-api-h4" 
+    container=".mat-drawer-content"></table-of-contents>

material.angular.io/src/app/pages/component-viewer/component-api.scss

@@ -1,17 +1,37 @@
 .docs-api-class-name {
-  margin-top: 24px;
+  margin-top: 28px;
   margin-bottom: 0;
-  display: inline-block;
+  display: block;
+  font-weight: bold;
+  font-size: 20px;
+  background: none;
+  
+  code {
+    background: none;
+  }
 }
 
 .docs-api-h3 {
-  margin-bottom: 0;
+  font-weight: 300;
+  font-size: 24px;
+  line-height: 32px;
+  margin: 40px 0 20px;
+  padding-bottom: 3px;
 }
 
+.docs-api-method-name-cell,
+.docs-api-method-header,
+.docs-api-method-description-cell,
+.docs-api-property-description,
 .docs-api-class-export-label,
 .docs-api-directive-selectors,
+.docs-api-class-description,
+.docs-api-class-export-name {
+  font-size: 15px;
+}
+
 .docs-api-class-description {
-  font-size: 14px;
+  line-height: 24px;
 }
 
 .docs-api-class-deprecated-marker {

material.angular.io/src/app/pages/component-viewer/component-viewer.scss

@@ -40,11 +40,12 @@ app-component-viewer {
 
 .docs-component-view-text-content {
   flex-grow: 1;
+  width: 100%;
 }
 
+.docs-component-api,
 .docs-component-overview {
   width: 80%;
-  margin-right: 20px;
 
   @media (max-width: $small-breakpoint-width) {
     width: 100%;

material.angular.io/src/app/shared/doc-viewer/doc-viewer.ts

@@ -85,12 +85,8 @@ export class DocViewer implements OnDestroy {
 
     Array.prototype.slice.call(exampleElements).forEach((element: Element) => {
       let example = element.getAttribute(componentName);
-
-      let exampleContainer = document.createElement('div');
-      element.appendChild(exampleContainer);
-
       let portalHost = new DomPortalHost(
-          exampleContainer, this._componentFactoryResolver, this._appRef, this._injector);
+          element, this._componentFactoryResolver, this._appRef, this._injector);
       let examplePortal = new ComponentPortal(componentClass, this._viewContainerRef);
       let exampleViewer = portalHost.attach(examplePortal);
       exampleViewer.instance.example = example;

material.angular.io/src/app/shared/table-of-contents/table-of-contents.scss

@@ -1,12 +1,15 @@
 :host {
   font-size: 13px;
-  width: 15%;
+  width: 19%;
   position: sticky;
   top: 0;
+  padding-left: 20px;
+  box-sizing: border-box;
 }
 
 .docs-toc-container {
   padding: 5px 0 10px 12px;
+  width: 100%;
 }
 
 .docs-toc-heading {
@@ -22,6 +25,9 @@ a {
   position: relative;
   text-decoration: none;
   display: block;
+  text-overflow: ellipsis;
+  width: 100%;
+  overflow: hidden;
 }
 
 .docs-level-h4 {

material.angular.io/src/styles/_api-theme.scss

@@ -8,7 +8,6 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
-  $exportBackgroundOpacity: if($is-dark-theme, 0.06, 0.03);
 
   .docs-api-method-name-cell {
     color: mat-color($primary, 800);
@@ -34,6 +33,6 @@
   .docs-api-module-import,
   .docs-api-class-selector-name,
   .docs-api-class-export-name {
-    background: rgba(mat-color($foreground, secondary-text), $exportBackgroundOpacity);
+    background: rgba(mat-color($foreground, secondary-text), 0.06);
   }
 }

material.angular.io/src/styles/_api.scss

@@ -61,9 +61,9 @@
   font-size: 12px;
 }
 
-.docs-api-class-name,
 .docs-api-module-import,
 .docs-api-class-selector-name,
 .docs-api-class-export-name {
+  font-family: 'Roboto Mono', monospace;
   padding: 3px;
 }

material.angular.io/src/styles/_markdown.scss

@@ -64,23 +64,19 @@ pre {
 }
 
 .docs-header-link {
-  // deduct -30px so the anchor icon will be positioned outside
-  // the content and pad it 30px so the header will set inline
-  // with the content displayed, absolute position will make
-  // it where you can't hover the header
-  padding-left: 30px;
-  margin-left: -30px;
-  position: relative;
+  a {
+    text-decoration: none;
+    // deduct -30px so the anchor icon will be positioned outside the content
+    margin-left: -30px;
+    display: inline-block;
+    vertical-align: middle;
+  }
 
   .material-icons {
-    display: none;
+    visibility: hidden;
   }
 
-  &:hover {
-    .material-icons {
-      display: block;
-      position: absolute;
-      left: 0;
-    }
+  &:hover .material-icons {
+    visibility: visible;
   }
 }

material.angular.io/src/styles/_tables-theme.scss

@@ -8,7 +8,8 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
-
+  $tableBorderOpacity: if($is-dark-theme, 0.08, 0.03);
+  
   .docs-api table,
   .docs-markdown-table {
     color: mat-color($foreground, text);
@@ -21,6 +22,6 @@
 
   .docs-api td,
   .docs-markdown-td {
-    border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
+    border: 1px solid rgba(mat-color($foreground, secondary-text), $tableBorderOpacity);
   }
 }