Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-01-31 01:54:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

discriminator ui update

Browse Source
This commit is contained in:
Roman Hotsiy 2016-03-17 20:30:50 +02:00
parent a87ba13806
commit c954142861
3 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,13 @@
</div> </div>
</div> </div>
<div class="param-description" innerHtml="{{prop.description | marked}}"></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 class="discriminator-info" *ngIf="prop.isDiscriminator">
This field value determines the exact schema:
<ul>
<li *ngFor="#derived of data.derived"
(click)="selectDerived(derived)" [ngClass]="{active: derived.active}"> {{derived.name}} </li>
</ul>
</div>
</td> </td>
</tr> </tr>
<tr class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer"> <tr class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer">
@ -32,12 +38,10 @@
</template> </template>
<tr *ngIf="data.derived.length" class="param-wrap discriminator-wrap"> <tr *ngIf="data.derived.length" class="param-wrap discriminator-wrap">
<td colspan="2"> <td colspan="2">
<tabs> <div class="derived-schema" *ngFor="#derived of data.derived" [ngClass]="{active: derived.active}">
<tab *ngFor="#derived of data.derived" tabTitle="{{derived.name}}">
<json-schema pointer="{{derived.$ref}}" [final]="derived.final" class="discriminator-part"> <json-schema pointer="{{derived.$ref}}" [final]="derived.final" class="discriminator-part">
</json-schema> </json-schema>
</tab> </div>
</tabs>
</td> </td>
</tr> </tr>
</table> </table>

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

@ -21,6 +21,14 @@ export default class JsonSchema extends BaseComponent {
this.final = false; this.final = false;
} }
selectDerived(subClass) {
if (subClass.active) return;
this.data.derived.forEach((subSchema) => {
subSchema.active = false;
});
subClass.active = true;
}
prepareModel() { prepareModel() {
this.data = {}; this.data = {};
this.data.properties = []; this.data.properties = [];
@ -43,6 +51,7 @@ export default class JsonSchema extends BaseComponent {
let normPtr = schema._pointer || this.pointer; let normPtr = schema._pointer || this.pointer;
let derived = this.schemaMgr.findDerivedDefinitions( normPtr ); let derived = this.schemaMgr.findDerivedDefinitions( normPtr );
if (!this.final && derived.length) { if (!this.final && derived.length) {
derived[0].active = true;
this.data.derived = derived; this.data.derived = derived;
this.data.discriminator = schema.discriminator; this.data.discriminator = schema.discriminator;
} }

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

@ -12,6 +12,13 @@ $array-marker-line-height: 1.5;
padding: 0 10px; padding: 0 10px;
} }
.derived-schema {
display: none;
}
.derived-schema.active {
display: block;
}
json-schema.nested-schema { json-schema.nested-schema {
background-color: $side-menu-active-bg-color; background-color: $side-menu-active-bg-color;
padding: 10px 20px; padding: 10px 20px;
@ -114,15 +121,14 @@ json-schema.nested-schema {
padding: 0; padding: 0;
} }
:host tabs { ul {
text-align: left;
margin: 0;
padding: 0;
display: block; display: block;
} }
:host ul { li {
text-align: center;
}
:host tabs li {
margin: 0.2em 0.3em 0.2em 0; margin: 0.2em 0.3em 0.2em 0;
font-family: $headers-font, $headers-font-family; font-family: $headers-font, $headers-font-family;
font-size: .929em; font-size: .929em;
@ -132,6 +138,8 @@ json-schema.nested-schema {
padding: 2px 8px 4px 8px; padding: 2px 8px 4px 8px;
border-radius: $border-radius; border-radius: $border-radius;
background-color: rgba($black, 0.3); background-color: rgba($black, 0.3);
display: inline-block;
cursor: pointer;
&:last-of-type { &:last-of-type {
margin-right: 0; margin-right: 0;