1
1
mirror of https://github.com/Redocly/redoc.git synced 2025-02-27 23:52:46 +03:00

move required label to the left column

This commit is contained in:
Roman Hotsiy 2018-01-10 13:01:20 +02:00
parent bfee3ed269
commit 9d0f2a9273
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
3 changed files with 11 additions and 9 deletions
src
common-elements
components/Fields

View File

@ -4,7 +4,6 @@ import { transparentizeHex } from '../utils/styled';
export const ClickablePropertyNameCell = PropertyNameCell.extend`
cursor: pointer;
font-weight: bold;
`;
export const FieldLabel = styled.span`
@ -26,10 +25,13 @@ export const TypeTitle = styled(FieldLabel)`
export const TypeFormat = TypeName;
export const RequiredLabel = styled(FieldLabel)`
export const RequiredLabel = styled(FieldLabel.withComponent('div'))`
color: #e53935;
font-size: 13px;
font-weight: bold;
font-size: 11px;
font-weight: normal;
margin-left: 20px;
line-height: 1;
font-weight: normal;
`;
export const RecursiveLabel = styled(FieldLabel)`

View File

@ -1,7 +1,7 @@
import { FieldDetails } from './FieldDetails';
import * as React from 'react';
import { ClickablePropertyNameCell } from '../../common-elements/fields';
import { ClickablePropertyNameCell, RequiredLabel } from '../../common-elements/fields';
import {
PropertyBullet,
@ -27,7 +27,7 @@ export interface FieldProps {
export class Field extends React.PureComponent<FieldProps> {
render() {
const { className, field, isLast } = this.props;
const { name, expanded, deprecated } = field;
const { name, expanded, deprecated, required } = field;
const paramName = this.props.onClick ? (
<ClickablePropertyNameCell
@ -37,11 +37,13 @@ export class Field extends React.PureComponent<FieldProps> {
<PropertyBullet />
{name}
<ShelfIcon size={'1.2em'} direction={expanded ? 'down' : 'right'} />
{required && <RequiredLabel> required </RequiredLabel>}
</ClickablePropertyNameCell>
) : (
<PropertyNameCell className={deprecated ? 'deprecated' : undefined}>
<PropertyBullet />
{name}
{required && <RequiredLabel> required </RequiredLabel>}
</PropertyNameCell>
);
return (

View File

@ -9,7 +9,6 @@ import {
RecursiveLabel,
NullableLabel,
PatternLabel,
RequiredLabel,
TypeFormat,
TypeName,
TypeTitle,
@ -22,7 +21,7 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
render() {
const { showExamples, field, renderDiscriminatorSwitch } = this.props;
const { schema, description, required, example, deprecated } = field;
const { schema, description, example, deprecated } = field;
return (
<div>
@ -39,7 +38,6 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
<ConstraintsView constraints={schema.constraints} />
{schema.nullable && <NullableLabel> Nullable </NullableLabel>}
{schema.pattern && <PatternLabel>{schema.pattern}</PatternLabel>}
{required && <RequiredLabel> Required </RequiredLabel>}
{schema.isCircular && <RecursiveLabel> Recursive </RecursiveLabel>}
</div>
{deprecated && (