diff --git a/lib/components/JsonSchema/json-schema-common.scss b/lib/components/JsonSchema/json-schema-common.scss index 9ea192b7..001557b9 100644 --- a/lib/components/JsonSchema/json-schema-common.scss +++ b/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; -} - -.param { - display: flex; - display: -ms-flexbox; + width: 75%; } .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 { - position: static; +.param:last-of-type > .param-name { + 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; diff --git a/lib/components/JsonSchema/json-schema.html b/lib/components/JsonSchema/json-schema.html index 14cf99ca..c43fe903 100644 --- a/lib/components/JsonSchema/json-schema.html +++ b/lib/components/JsonSchema/json-schema.html @@ -2,13 +2,13 @@ {{_displayType}} -
-
-
-
+ + + + + +
+ + + + + + +
diff --git a/lib/components/JsonSchema/json-schema.js b/lib/components/JsonSchema/json-schema.js index b8d0dbb1..ce42f923 100644 --- a/lib/components/JsonSchema/json-schema.js +++ b/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'; - } } diff --git a/lib/components/JsonSchema/json-schema.scss b/lib/components/JsonSchema/json-schema.scss index a52680a2..295a2585 100644 --- a/lib/components/JsonSchema/json-schema.scss +++ b/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; - } -}