Merge branch 'master' into releases

lib/components/JsonSchema/json-schema-common.scss

@@ -49,6 +49,12 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 
 .param-range {
   color: rgba($primary-color, .7);
+  position: relative;
+  top: 1px;
+  padding: 0 4px;
+  border-radius: $border-radius;
+  background-color: rgba($primary-color, .1);
+  margin-left: 6px;
 }
 
 .param-description {
@@ -114,7 +120,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   border-top: $line-border;
   width: $bullet-margin;
   left: 0;
-  top: ($param-name-height/2) + $cell-padding + 1px;
+  top: ($param-name-height/2) + $cell-padding + 1;
 }
 
  .param:first-of-type > .param-name:before {
@@ -124,7 +130,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   left: -$lines-width;
   top: 0;
   border-left: $line-border-erase;
-  height: ($param-name-height/2) + $cell-padding;
+  height: ($param-name-height/2) + $cell-padding + 1;
 }
 
 .param:last-of-type > .param-name {
@@ -136,7 +142,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
     position: absolute;
     left: -$lines-width - 1px;
     border-left: $line-border-erase;
-    top: ($param-name-height/2) + $cell-padding + $lines-width;
+    top: ($param-name-height/2) + $cell-padding + $lines-width + 1;
     background-color: white;
     bottom: 0;
   }

lib/components/JsonSchema/json-schema.html

@@ -20,7 +20,13 @@
           </div>
         </div>
         <div class="param-description" innerHtml="{{prop.description | marked}}"></div>
-        <div class="discriminator-info" *ngIf="prop.isDiscriminator"> This field value determines the exact schema: </div>
+        <div class="discriminator-info" *ngIf="prop.isDiscriminator">
+          This field value determines the exact schema:
+          <ul>
+            <li *ngFor="#derived of data.derived"
+            (click)="selectDerived(derived)" [ngClass]="{active: derived.active}"> {{derived.name}} </li>
+          </ul>
+        </div>
       </td>
     </tr>
     <tr class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer">
@@ -32,12 +38,10 @@
   </template>
   <tr *ngIf="data.derived.length" class="param-wrap discriminator-wrap">
     <td colspan="2">
-      <tabs>
+      <div class="derived-schema" *ngFor="#derived of data.derived" [ngClass]="{active: derived.active}">
-        <tab *ngFor="#derived of data.derived" tabTitle="{{derived.name}}">
+        <json-schema pointer="{{derived.$ref}}" [final]="derived.final" class="discriminator-part">
-          <json-schema pointer="{{derived.$ref}}" [final]="derived.final" class="discriminator-part">
+        </json-schema>
-          </json-schema>
+      </div>
-        </tab>
-      </tabs>
     </td>
   </tr>
 </table>

lib/components/JsonSchema/json-schema.js

@@ -21,6 +21,14 @@ export default class JsonSchema extends BaseComponent {
     this.final = false;
   }
 
+  selectDerived(subClass) {
+    if (subClass.active) return;
+    this.data.derived.forEach((subSchema) => {
+      subSchema.active = false;
+    });
+    subClass.active = true;
+  }
+
   prepareModel() {
     this.data = {};
     this.data.properties = [];
@@ -43,6 +51,7 @@ export default class JsonSchema extends BaseComponent {
     let normPtr = schema._pointer || this.pointer;
     let derived = this.schemaMgr.findDerivedDefinitions( normPtr );
     if (!this.final && derived.length) {
+      derived[0].active = true;
       this.data.derived = derived;
       this.data.discriminator = schema.discriminator;
     }

lib/components/JsonSchema/json-schema.scss

@@ -12,6 +12,13 @@ $array-marker-line-height: 1.5;
   padding: 0 10px;
 }
 
+.derived-schema {
+  display: none;
+}
+.derived-schema.active {
+  display: block;
+}
+
 json-schema.nested-schema {
   background-color: $side-menu-active-bg-color;
   padding: 10px 20px;
@@ -106,7 +113,8 @@ json-schema.nested-schema {
 }
 
 .discriminator-info {
-  font-weight: bold;
+  font-weight: $regular;
+  margin-bottom: 10px;
 }
 
 .discriminator-wrap > td {
@@ -114,28 +122,31 @@ json-schema.nested-schema {
   padding: 0;
 }
 
-:host tabs {
+ul {
+  text-align: left;
+  margin: 0;
+  padding: 0;
   display: block;
 }
 
-:host ul {
+li {
-    text-align: center;
+  margin: 0.5em 0.3em 0.2em 0;
-}
+  font-family: $headers-font, $headers-font-family;
-
+  font-size: .929em;
-:host tabs li {
+  line-height: .929em;
-  margin: 0.2em 0.5em 0.2em 0;
-  font-size: 14px;
   border: 0;
   color: white;
-  padding: 0 15px;
+  padding: 2px 8px 4px 8px;
-  border-radius: 10px;
+  border-radius: $border-radius;
-  background-color: #8A9094;
+  background-color: rgba($black, 0.3);
+  display: inline-block;
+  cursor: pointer;
 
   &:last-of-type {
-    margin: 0;
+    margin-right: 0;
   }
 
   &.active {
-    background-color: $headers-color;
+    background-color: $primary-color;
   }
 }

lib/components/RequestSamples/request-samples.scss

@@ -19,7 +19,7 @@ header {
     line-height: 1.25;
     color: $sample-panel-headers-color;
 
-    &.hover {
+    &:hover {
         background-color: rgba(white, .1);
         color: #ffffff;
     }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "redoc",
   "description": "Swagger-generated API Reference Documentation",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "repository": {
     "type": "git",
     "url": "git://github.com/Rebilly/ReDoc"