Fix nested schemas styling (fixes #32)

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

View File

@ -9,7 +9,7 @@
</div>
</span>
<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">
<tr class="param" [ngClass]="{'last': last, 'discriminator': prop.isDiscriminator, 'complex': prop._pointer}">
<td class="param-name">
@ -38,7 +38,8 @@
</tr>
<tr class="param-schema" [ngClass]="{'param-array': prop._isArray, 'last': last}" *ngIf="prop._pointer">
<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>
</td>
</tr>

View File

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

View File

@ -20,7 +20,7 @@ $array-marker-line-height: 1.5;
}
json-schema.nested-schema {
background-color: $side-menu-active-bg-color;
background-color: white;
padding: 10px 20px;
position: relative;
border-radius: $border-radius;
@ -35,7 +35,7 @@ json-schema.nested-schema {
border-color: transparent;
border-width: 10px 15px 0;
margin-left: -7.5px;
border-top-color: white;
border-top-color: $side-menu-active-bg-color;
}
&:before {
left: 10%;
@ -46,7 +46,20 @@ json-schema.nested-schema {
}
.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;
}
}