mirror of
https://github.com/Redocly/redoc.git
synced 2025-02-07 05:20:32 +03:00
Restyle JSONSchema component
This commit is contained in:
Roman Hotsiy
parent
8828043eb3
commit
bfa10bca83
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}">
|
||||
<div *ngFor="#prop of data.properties" class="param-wrap">
|
||||
<div class="param" [ngClass]="{'discriminator': prop.isDiscriminator}">
|
||||
<div class="param-name">
|
||||
<table *ngIf="!isTrivial" class="params-wrap" [ngClass]="{'params-array': isArray}">
|
||||
<template ngFor [ngForOf]="data.properties" #prop="$implicit">
|
||||
<tr class="param" [ngClass]="{'discriminator': prop.isDiscriminator, 'complex': prop._pointer}">
|
||||
<td class="param-name">
|
||||
<span class="param-name-content">{{prop._name}}</span>
|
||||
</div>
|
||||
<div class="param-info">
|
||||
</td>
|
||||
<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>
|
||||
</div>
|
||||
<div class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer">
|
||||
<json-schema pointer="{{prop._pointer}}" [isArray]='prop._isArray'>
|
||||
</json-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">
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer">
|
||||
<td colspan="2">
|
||||
<json-schema pointer="{{prop._pointer}}" [isArray]='prop._isArray' class="nested-schema">
|
||||
</json-schema>
|
||||
</tab>
|
||||
</tabs>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user