Restyle JSONSchema component

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

@@ -11,6 +11,7 @@ $param-name-height: 20px;
 
 $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 
+/*
 .param-schema {
   padding-left: $sub-schema-offset - $lines-width;
   border-left: $line-border;
@@ -18,21 +19,10 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 
 .param-wrap {
   position: relative;
-}
+}*/
-
-.param-schema:before {
-  content: "";
-  position: absolute;
-  left: $sub-schema-offset;
-  top: ($param-name-height/2) + $cell-padding;
-  bottom: 0;
-  border-left: $line-border;
-}
 
 .param-name {
-  flex-grow: 0;
+
-  -ms-flex-grow: 0;
-  display: inline-block;
   font-size: 0.929em;
   padding: $cell-padding 0 $cell-padding 0;
   font-weight: $regular;
@@ -41,6 +31,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   border-left: $line-border;
   white-space: nowrap;
   position: relative;
+  vertical-align: top;
 }
 
 .param-name-content {
@@ -49,18 +40,10 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 }
 
 .param-info {
-  //width: 100%;
-  flex-grow: 1;
-  -ms-flex-grow: 1;
   padding: $cell-padding 0;
   box-sizing: border-box;
   border-bottom: 1px solid #ccc;
-  display: inline-block;
+  width: 75%;
-}
-
-.param {
-  display: flex;
-  display: -ms-flexbox;
 }
 
 .param-required {
@@ -108,6 +91,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 /* tree */
 
 // Bullet
+
 .param-name > span:before {
   content: "";
   display: inline-block;
@@ -127,7 +111,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   top: ($param-name-height/2) + $cell-padding;
 }
 
-.param-wrap:first-of-type > .param > .param-name:before {
+ .param:first-of-type > .param-name:before {
   content: "";
   display: block;
   position: absolute;
@@ -137,14 +121,14 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   height: ($param-name-height/2) + $cell-padding;
 }
 
-.param-wrap:last-of-type > .param > .param-name {
+.param:last-of-type > .param-name {
-  position: static;
+  position: relative;
 
   &:after {
     content: "";
     display: block;
     position: absolute;
-    left: -$lines-width;
+    left: -$lines-width - 1px;
     border-left: $line-border-erase;
     top: ($param-name-height/2) + $cell-padding + $lines-width;
     background-color: white;

lib/components/JsonSchema/json-schema.html

@@ -2,13 +2,13 @@
   <span class="param-type param-type-trivial {{type}}"
   [ngClass]="{'with-hint': _displayTypeHint}" title="{{_displayTypeHint}}">{{_displayType}}</span>
 </span>
-<div *ngIf="!isTrivial" class="params-wrap" [ngClass]="{'params-array': isArray}">
+<table *ngIf="!isTrivial" class="params-wrap" [ngClass]="{'params-array': isArray}">
-  <div *ngFor="#prop of data.properties" class="param-wrap">
+  <template ngFor [ngForOf]="data.properties" #prop="$implicit">
-    <div class="param" [ngClass]="{'discriminator': prop.isDiscriminator}">
+    <tr class="param" [ngClass]="{'discriminator': prop.isDiscriminator, 'complex': prop._pointer}">
-      <div class="param-name">
+      <td class="param-name">
         <span class="param-name-content">{{prop._name}}</span>
-      </div>
+      </td>
-      <div class="param-info">
+      <td class="param-info">
         <div>
           <span class="param-type {{prop.type}}" [ngClass]="{'with-hint': prop._displayTypeHint}"
           title="{{prop._displayTypeHint}}"> {{prop._displayType}} {{prop._displayFormat}}</span>
@@ -19,19 +19,23 @@
         </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>
+      </td>
-    </div>
+    </tr>
-    <div class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer">
+    <tr class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer">
-      <json-schema pointer="{{prop._pointer}}" [isArray]='prop._isArray'>
+      <td colspan="2">
-      </json-schema>
+        <json-schema pointer="{{prop._pointer}}" [isArray]='prop._isArray' class="nested-schema">
-    </div>
-  </div>
-  <div *ngIf="data.derived.length" class="param-wrap">
-    <tabs>
-      <tab *ngFor="#derived of data.derived" tabTitle="{{derived.name}}">
-        <json-schema pointer="{{derived.$ref}}" [final]="derived.final">
         </json-schema>
-      </tab>
+      </td>
-    </tabs>
+    </tr>
-  </div>
+  </template>
-</div>
+  <tr *ngIf="data.derived.length" class="param-wrap discriminator-wrap">
+    <td colspan="2">
+      <tabs>
+        <tab *ngFor="#derived of data.derived" tabTitle="{{derived.name}}">
+          <json-schema pointer="{{derived.$ref}}" [final]="derived.final" class="discriminator-part">
+          </json-schema>
+        </tab>
+      </tabs>
+    </td>
+  </tr>
+</table>

lib/components/JsonSchema/json-schema.js

@@ -128,30 +128,4 @@ export default class JsonSchema extends BaseComponent {
 
     return propData;
   }
-
-  ngAfterViewInit() {
-    // adjust widht only on parent level
-    let $el = this.$element.parentElement;
-    while($el && $el.tagName !== 'JSON-SCHEMA' && $el.tagName !== 'REDOC') {
-      $el = $el.parentElement;
-    }
-    if ($el && $el.tagName === 'REDOC' ) {
-      this.adjustNameColumnWidth();
-    }
-  }
-
-  adjustNameColumnWidth() {
-    // TODO handle internal schemes differently
-
-    let names = [].slice.call(this.$element.querySelectorAll('.param-name-content'));
-    let widths = names.map(el => el.offsetWidth);
-    let maxWidth = Math.max(...widths);
-    if (!maxWidth) return;
-    names.forEach(el => {
-      el.parentNode.style.minWidth = maxWidth + 'px';
-    });
-
-    let discrValues = this.$element.querySelector('tabs ul');
-    if (discrValues) discrValues.style.paddingLeft = maxWidth + 'px';
-  }
 }

lib/components/JsonSchema/json-schema.scss

@@ -7,6 +7,50 @@ $array-marker-line-height: 1.5;
   display: block;
 }
 
+.param-schema > td {
+  border-left: $line-border;
+  padding: 0 10px;
+}
+
+json-schema.nested-schema {
+  background-color: #F1F1F1;
+  padding: 10px 20px;
+  position: relative;
+
+  &:before, &:after {
+    content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 0;
+    border-style: solid;
+    border-color: transparent;
+    border-width: 10px 15px 0;
+    margin-left: -7.5px;
+    border-top-color: white;
+  }
+  &:before {
+    left: 10%;
+  }
+
+  &:after {
+    right: 10%;
+  }
+
+  .param:first-of-type > .param-name:before, .param:last-of-type > .param-name:after {
+    border-color: #f1f1f1;
+  }
+}
+
+.param.complex > .param-info {
+  border-bottom: 0;
+}
+
+.params-wrap {
+  border-collapse: collapse;
+  width: 100%;
+}
+
 .params-wrap.params-array:before, .params-wrap.params-array:after {
   display: block;
   font-weight: $base-font-weight;
@@ -50,19 +94,31 @@ $array-marker-line-height: 1.5;
 }
 
 .param.discriminator {
-  > div {
+  > .param-info {
     padding-bottom: 0;
     border-bottom: 0;
   }
+
+  > .param-name:after {
+    display: none;
+  }
 }
 
 .discriminator-info {
   font-weight: bold;
 }
 
+.discriminator-wrap > td {
+  border-left: $line-border;
+  padding: 0;
+}
+
 :host tabs {
   display: block;
-  border-left: 1px solid $tree-lines-color;
+}
+
+:host ul {
+    text-align: center;
 }
 
 :host tabs li {
@@ -82,10 +138,3 @@ $array-marker-line-height: 1.5;
     background-color: $headers-color;
   }
 }
-
-tabs .params-wrap > .param-wrap:first-of-type .param-name {
-  border-left: 0;
-  &:before {
-    display: none;
-  }
-}