Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-09-21 19:28:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix nested schemas styling (fixes #32)

Browse Source
This commit is contained in:
Roman Hotsiy 2016-04-07 20:59:59 +03:00
parent 6be67940f5
commit 06e9dd3a0f
3 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/components/JsonSchema/json-schema.html
View File

@ -9,7 +9,7 @@
</div> </div>
</span> </span>
<table *ngIf="!schema.isTrivial" class="params-wrap" [ngClass]="{'params-array': schema._isArray}"> <table *ngIf="!schema.isTrivial" class="params-wrap" [ngClass]="{'params-array': schema._isArray}">
<caption> {{_displayType}} </caption> <!-- <caption> {{_displayType}} </caption> -->
<template ngFor [ngForOf]="schema.properties" #prop="$implicit" #last="last"> <template ngFor [ngForOf]="schema.properties" #prop="$implicit" #last="last">
<tr class="param" [ngClass]="{'last': last, 'discriminator': prop.isDiscriminator, 'complex': prop._pointer}"> <tr class="param" [ngClass]="{'last': last, 'discriminator': prop.isDiscriminator, 'complex': prop._pointer}">
<td class="param-name"> <td class="param-name">
@ -38,7 +38,8 @@
</tr> </tr>
<tr class="param-schema" [ngClass]="{'param-array': prop._isArray, 'last': last}" *ngIf="prop._pointer"> <tr class="param-schema" [ngClass]="{'param-array': prop._isArray, 'last': last}" *ngIf="prop._pointer">
<td colspan="2"> <td colspan="2">
<json-schema pointer="{{prop._pointer}}" [isArray]='prop._isArray' class="nested-schema"> <json-schema pointer="{{prop._pointer}}" [isArray]='prop._isArray'
class="nested-schema" [nestOdd]="!nestOdd" [attr.nesteven]="!nestOdd">
</json-schema> </json-schema>
</td> </td>
</tr> </tr>

4
lib/components/JsonSchema/json-schema.js
View File

@ -11,7 +11,7 @@ import JsonPointer from '../../utils/JsonPointer';
templateUrl: './lib/components/JsonSchema/json-schema.html', templateUrl: './lib/components/JsonSchema/json-schema.html',
styleUrls: ['./lib/components/JsonSchema/json-schema.css'], styleUrls: ['./lib/components/JsonSchema/json-schema.css'],
directives: [JsonSchema, Tabs, Tab], directives: [JsonSchema, Tabs, Tab],
inputs: ['isArray', 'final'] inputs: ['isArray', 'final', 'nestOdd']
}) })
@Reflect.metadata('parameters', [[SchemaManager], [ElementRef]]) @Reflect.metadata('parameters', [[SchemaManager], [ElementRef]])
export default class JsonSchema extends BaseComponent { export default class JsonSchema extends BaseComponent {
@ -161,7 +161,7 @@ const injectors = {
simpleType: { simpleType: {
check: (propertySchema) => { check: (propertySchema) => {
if (propertySchema.type === 'object') { if (propertySchema.type === 'object') {
return !propertySchema.properties; return !propertySchema.properties || !Object.keys(propertySchema.properties).length;
} }
return (propertySchema.type !== 'array') && propertySchema.type; return (propertySchema.type !== 'array') && propertySchema.type;
}, },

19
lib/components/JsonSchema/json-schema.scss
View File

@ -20,7 +20,7 @@ $array-marker-line-height: 1.5;
} }
json-schema.nested-schema { json-schema.nested-schema {
background-color: $side-menu-active-bg-color; background-color: white;
padding: 10px 20px; padding: 10px 20px;
position: relative; position: relative;
border-radius: $border-radius; border-radius: $border-radius;
@ -35,7 +35,7 @@ json-schema.nested-schema {
border-color: transparent; border-color: transparent;
border-width: 10px 15px 0; border-width: 10px 15px 0;
margin-left: -7.5px; margin-left: -7.5px;
border-top-color: white; border-top-color: $side-menu-active-bg-color;
} }
&:before { &:before {
left: 10%; left: 10%;
@ -46,7 +46,20 @@ json-schema.nested-schema {
} }
.param:first-of-type > .param-name:before, .param:last-of-type > .param-name:after { .param:first-of-type > .param-name:before, .param:last-of-type > .param-name:after {
border-color: #f1f1f1; border-color: white;
}
}
json-schema[nesteven="true"] {
background-color: $side-menu-active-bg-color;
border-radius: $border-radius;
&:before, &:after {
border-top-color: white;
}
> .params-wrap > .param:first-of-type > .param-name:before, > .params-wrap > .param:last-of-type > .param-name:after {
border-color: $side-menu-active-bg-color;
} }
} }