Redoc search styling

lib/components/Redoc/redoc.html

@@ -8,8 +8,10 @@
     <div class="background-actual"> </div>
   </div>
   <div class="menu-content" sticky-sidebar [scrollParent]="options.$scrollParent" [scrollYOffset]="options.scrollYOffset">
-      <api-logo> </api-logo>
-      <redoc-search> </redoc-search>
+      <div class="menu-header">
+        <api-logo> </api-logo>
+        <redoc-search> </redoc-search>
+      </div>
       <side-menu> </side-menu>
   </div>
   <div class="api-content">

lib/components/Redoc/redoc.scss

@@ -40,12 +40,17 @@
 
 .menu-content {
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+side-menu {
+  overflow-y: auto;
 }
 
 [sticky-sidebar] {
   width: $side-bar-width;
   background-color: $side-bar-bg-color;
-  overflow-y: auto;
   overflow-x: hidden;
   transform: translateZ(0);
   z-index: 75;

lib/components/Search/redoc-search.html

@@ -1,6 +1,10 @@
-<input #search (keyup)="update(search.value)" placeholder="Search">
-<ul class="search-results">
-  <li class="result" *ngFor="let item of items" (click)="clickSearch(item)">
-    {{item?.menuItem?.name}}
+<div class="search-input-wrap">
+  <input #search (keyup)="update(search.value)" placeholder="Search">
+</div>
+<ul class="search-results" [hidden]="!items.length">
+  <li class="result" *ngFor="let item of items"
+    ngClass="menu-item-depth-{{item.menuItem.depth}} {{item.menuItem.ready ? '' : 'disabled'}}"
+    (click)="clickSearch(item)">
+    {{item.menuItem.name}}
   <li>
 </ul>

lib/components/Search/redoc-search.scss

@@ -1,22 +1,61 @@
+@import '../../shared/styles/variables';
+
 :host {
   display: block;
-  padding: 20px;
-  background: silver;
+  margin: 10px 0;
+}
+
+.search-input-wrap {
+  padding: 0 20px;
 }
 
 input {
   width: 100%;
   box-sizing: border-box;
   padding: 5px;
+
+  border: 0;
+  border-bottom: 1px solid darken($side-bar-bg-color, 10%);
+  font-weight: bold;
+
+  font-size: 13px;
+  color: $text-color;
+  background-color: transparent;
+  outline: none;
 }
 
 .search-results {
   margin: 10px 0 0;
-  padding: 0;
   list-style: none;
+  padding: 10px 0;
+  background-color: darken($side-bar-bg-color, 5%);
+  max-height: 100px;
+  overflow-y: auto;
+  border-bottom: 1px solid darken($side-bar-bg-color, 10%);
+  border-top: 1px solid darken($side-bar-bg-color, 10%);
+
+  min-height: 150px;
+  max-height: 250px;
 
   > li {
     display: block;
     cursor: pointer;
+    font-family: Montserrat, sans-serif;
+    font-size: 13px;
+    padding: 5px 20px;
+
+    &:hover {
+      background-color: darken($side-bar-bg-color, 10%);
+    }
+  }
+
+  li.menu-item-depth-1 {
+    color: #0033a0;
+    text-transform: uppercase;
+  }
+
+  > li.disabled {
+    cursor: default;
+    color: lighten($text-color, 60%);
   }
 }

lib/components/Search/redoc-search.ts

@@ -1,6 +1,6 @@
 'use strict';
-import { Component, ChangeDetectionStrategy, OnInit, HostBinding } from '@angular/core';
-import { Marker, SearchService, MenuService } from '../../services/';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, HostBinding } from '@angular/core';
+import { Marker, SearchService, MenuService, MenuItem } from '../../services/';
 
 @Component({
   selector: 'redoc-search',
@@ -10,9 +10,16 @@ import { Marker, SearchService, MenuService } from '../../services/';
 })
 export class RedocSearch implements OnInit {
   logo:any = {};
-  items: any[] = [];
+  items: { menuItem: MenuItem, pointers: string[] }[] = [];
 
-  constructor(private marker: Marker, public search: SearchService, public menu: MenuService) {
+  _subscription;
+
+  constructor(
+    cdr: ChangeDetectorRef,
+    private marker: Marker,
+    public search: SearchService,
+    public menu: MenuService) {
+    this._subscription = menu.changed.subscribe(() => cdr.detectChanges());
   }
 
   init() {
@@ -25,6 +32,11 @@ export class RedocSearch implements OnInit {
       menuItem: this.menu.getItemById(id),
       pointers: searchRes[id].map(el => el.pointer)
     }));
+    this.items.sort((a, b) => {
+      if (a.menuItem.depth > b.menuItem.depth) return 1;
+      else if (a.menuItem.depth < b.menuItem.depth) return -1;
+      else return 0;
+    });
     this.marker.mark(val);
   }
 
@@ -40,4 +52,8 @@ export class RedocSearch implements OnInit {
   ngOnInit() {
     this.init();
   }
+
+  destroy() {
+    this._subscription.unsubscribe();
+  }
 }

lib/components/SideMenu/side-menu.html

@@ -1,12 +1,10 @@
 <div #mobile class="mobile-nav" (click)="toggleMobileNav()">
-  <span class="menu-header"> API Reference: </span>
   <span class="selected-item-info">
     <span class="selected-tag"> {{activeCatCaption}} </span>
     <span class="selected-endpoint">{{activeItemCaption}}</span>
   </span>
 </div>
 <div #desktop id="resources-nav">
-  <h5 class="menu-header"> API reference </h5>
   <ul class="menu-root">
     <side-menu-items [items]="menuItems" (activate)="activateAndScroll($event)"></side-menu-items>
   </ul>

lib/components/SideMenu/side-menu.scss

@@ -11,13 +11,6 @@ ul.menu-root {
   padding: 0;
 }
 
-.menu-header {
-  text-transform: uppercase;
-  color: $headers-color;
-  padding: 0 $side-menu-item-hpadding;
-  margin: 10px 0;
-}
-
 .mobile-nav {
   display: none;
   height: 3em;
@@ -39,15 +32,6 @@ ul.menu-root {
     float: right;
     vertical-align: middle;
   }
-
-  .menu-header {
-    padding: 0 10px 0 20px;
-    font-size: 0.95em;
-
-    @media (max-width: $mobile-menu-compact-breakpoint) {
-      display: none;
-    }
-  }
 }
 
 @media (max-width: $side-menu-mobile-breakpoint) {
@@ -61,10 +45,6 @@ ul.menu-root {
     transition: all 0.3s ease;
   }
 
-  #resources-nav .menu-header {
-    display: none;
-  }
-
   .menu-subitems {
     height: auto;
   }

lib/components/base.ts

@@ -60,7 +60,7 @@ export abstract class BaseSearchableComponent extends BaseComponent implements O
   subscribeForSearch() {
     this.searchSubscription = this.app.searchContainingPointers.subscribe(ptrs => {
       for (let i = 0; i < ptrs.length; ++i) {
-        this.ensureSearchIsShown(ptrs[i]);
+        if (ptrs[i]) this.ensureSearchIsShown(ptrs[i]);
       }
     });
   }

lib/services/app-state.service.ts

@@ -11,7 +11,7 @@ export class AppStateService {
   loading = new Subject<boolean>();
   initialized = new BehaviorSubject<any>(false);
 
-  searchContainingPointers = new BehaviorSubject<string[]>([]);
+  searchContainingPointers = new BehaviorSubject<string|null[]>([]);
 
   startLoading() {
     this.loading.next(true);

lib/services/menu.service.ts

@@ -34,7 +34,7 @@ export interface MenuItem {
   active?: boolean;
   ready?: boolean;
 
-  level?: number;
+  depth?: number;
   flatIdx?: number;
 
   metadata?: any;

lib/services/search.service.ts

@@ -2,6 +2,14 @@ import { Injectable } from '@angular/core';
 import { AppStateService } from './app-state.service';
 import { SchemaNormalizer } from './schema-normalizer.service';
 import { JsonPointer, groupBy, SpecManager, StringMap, snapshot } from '../utils/';
+import * as slugify from 'slugify';
+
+import {
+  Spec as SwaggerSpec,
+  Operation as SwaggerOperation,
+  Schema as SwaggerSchema,
+  BodyParameter
+} from '@types/swagger-schema-official';
 
 import * as lunr from 'lunr';
 
@@ -12,6 +20,10 @@ interface IndexElement {
   pointer: string;
 }
 
+interface SwaggerSchemaExt extends SwaggerSchema {
+  _pointer?: string;
+}
+
 const index = lunr(function () {
   //this.field('menuId', {boost: 0});
   this.field('title', {boost: 1.5});
@@ -28,12 +40,13 @@ export class SearchService {
     this.normalizer = new SchemaNormalizer(spec);
   }
 
-  ensureSearchVisible(containingPointers: string[]) {
+  ensureSearchVisible(containingPointers: string|null[]) {
     this.app.searchContainingPointers.next(containingPointers);
   }
 
   indexAll() {
     this.indexPaths(this.spec.schema);
+    this.indexTags(this.spec.schema);
   }
 
   search(q):StringMap<IndexElement[]> {
@@ -53,7 +66,21 @@ export class SearchService {
     store[element.pointer] = element;
   }
 
-  indexPaths(swagger:any) {
+  indexTags(swagger:SwaggerSpec) {
+    let tags = swagger.tags;
+    for (let tag of tags) {
+      if (tag['x-traitTag']) continue;
+      let id = `tag/${slugify(tag.name)}`;
+      this.index({
+        menuId: id,
+        title: tag.name,
+        body: tag.description,
+        pointer: id
+      });
+    }
+  }
+
+  indexPaths(swagger:SwaggerSpec) {
     const paths = swagger.paths;
     const basePtr = '#/paths';
     Object.keys(paths).forEach(path => {
@@ -66,7 +93,7 @@ export class SearchService {
     });
   }
 
-  indexOperation(operation:any, operationPointer:string) {
+  indexOperation(operation:SwaggerOperation, operationPointer:string) {
     this.index({
       pointer: operationPointer,
       menuId: operationPointer,
@@ -77,7 +104,7 @@ export class SearchService {
     this.indexOperationParameters(operation, operationPointer);
   }
 
-  indexOperationParameters(operation: any, operationPointer: string) {
+  indexOperationParameters(operation: SwaggerOperation, operationPointer: string) {
     const parameters = operation.parameters;
     if (!parameters) return;
     for (let i=0; i<parameters.length; ++i) {
@@ -92,12 +119,13 @@ export class SearchService {
 
       if (param.in === 'body') {
         this.normalizer.reset();
-        this.indexSchema(param.schema, '', JsonPointer.join(paramPointer, ['schema']), operationPointer);
+        this.indexSchema((<BodyParameter>param).schema,
+          '', JsonPointer.join(paramPointer, ['schema']), operationPointer);
       }
     }
   }
 
-  indexOperationResponses(operation:any, operationPtr:string) {
+  indexOperationResponses(operation:SwaggerOperation, operationPtr:string) {
     const responses = operation.responses;
     if (!responses) return;
     Object.keys(responses).forEach(code => {
@@ -117,7 +145,8 @@ export class SearchService {
     });
   }
 
-  indexSchema(_schema:any, name: string, absolutePointer: string, menuPointer: string, parent?: string) {
+  indexSchema(_schema:SwaggerSchemaExt, name: string, absolutePointer: string,
+    menuPointer: string, parent?: string) {
     if (!_schema) return;
     let schema = _schema;
     let title = name;