diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts index 1716b3793d..4b5ed719b0 100644 --- a/src/common-elements/fields.ts +++ b/src/common-elements/fields.ts @@ -18,7 +18,10 @@ export const TypePrefix = styled(FieldLabel)` `; export const TypeName = styled(FieldLabel)` - color: ${props => transparentizeHex(props.theme.colors.text, 0.4)}; + color: ${props => transparentizeHex(props.theme.colors.text, 0.8)}; +`; +export const TypeTitle = styled(FieldLabel)` + color: ${props => transparentizeHex(props.theme.colors.text, 0.5)}; `; export const TypeFormat = TypeName; @@ -29,7 +32,7 @@ export const RequiredLabel = styled(FieldLabel)` font-weight: bold; `; -export const CircularLabel = styled(FieldLabel)` +export const RecursiveLabel = styled(FieldLabel)` color: #dd9900; font-size: 13px; `; diff --git a/src/components/Fields/FieldDetails.tsx b/src/components/Fields/FieldDetails.tsx index 7e4c35f62b..135bab8c13 100644 --- a/src/components/Fields/FieldDetails.tsx +++ b/src/components/Fields/FieldDetails.tsx @@ -6,12 +6,13 @@ import { EnumValues } from './EnumValues'; import { FieldDetail } from './FieldDetail'; import { ConstraintsView } from './FieldContstraints'; import { - CircularLabel, + RecursiveLabel, NullableLabel, PatternLabel, RequiredLabel, TypeFormat, TypeName, + TypeTitle, TypePrefix, } from '../../common-elements/fields'; @@ -34,11 +35,12 @@ export class FieldDetails extends React.PureComponent { {schema.format}> )} + {schema.title && ({schema.title}) } {schema.nullable && Nullable } {schema.pattern && {schema.pattern}} {required && Required } - {schema.isCircular && Circular } + {schema.isCircular && Recursive } {deprecated && (
diff --git a/src/components/Schema/Schema.tsx b/src/components/Schema/Schema.tsx index 09a12655bc..2b7128220f 100644 --- a/src/components/Schema/Schema.tsx +++ b/src/components/Schema/Schema.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import { FieldDetails } from '../Fields/FieldDetails'; -import { TypeName, CircularLabel } from '../../common-elements/fields'; +import { RecursiveLabel, TypeName, TypeTitle } from '../../common-elements/fields'; import { SchemaModel } from '../../services/models'; @@ -28,7 +28,8 @@ export class Schema extends React.Component> { return (
{schema.displayType} - Circular + {schema.title && {schema.title} } + Recursive
); } diff --git a/src/services/models/Schema.ts b/src/services/models/Schema.ts index 2d8f67b9de..140979f5b0 100644 --- a/src/services/models/Schema.ts +++ b/src/services/models/Schema.ts @@ -100,7 +100,7 @@ export class SchemaModel { this.pattern = schema.pattern; this.constraints = humanizeConstraints(schema); - this.displayType = this.title === '' ? this.type : `${this.title} (${this.type})`; + this.displayType = this.type; this.isPrimitive = isPrimitiveType(schema); this.default = schema.default; this.readOnly = !!schema.readOnly;