Better styling for object controls
This commit is contained in:
@ -1,54 +1,6 @@
|
||||
.control {
|
||||
color: #7c8382;
|
||||
.root {
|
||||
position: relative;
|
||||
padding: 20px 0;
|
||||
|
||||
& input,
|
||||
& textarea,
|
||||
& select {
|
||||
font-family: monospace;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
background: 0 0;
|
||||
font-size: 18px;
|
||||
color: #7c8382;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
display: block;
|
||||
color: #AAB0AF;
|
||||
font-size: 12px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.widget {
|
||||
border-bottom: 1px solid #e8eae8;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 42px;
|
||||
bottom: -7px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #f2f5f4;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
z-index: 1;
|
||||
border-right: 1px solid #e8eae8;
|
||||
border-bottom: 1px solid #e8eae8;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e8eae8;
|
||||
}
|
||||
|
@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { ScrollSyncPane } from '../ScrollSync';
|
||||
import registry from '../../lib/registry';
|
||||
import Collection from '../../valueObjects/Collection';
|
||||
import { resolveWidget } from '../Widgets';
|
||||
import Preview from './Preview';
|
||||
import styles from './PreviewPane.css';
|
||||
@ -26,7 +27,9 @@ export default class PreviewPane extends React.Component {
|
||||
};
|
||||
|
||||
renderPreview() {
|
||||
const component = registry.getPreviewTemplate(this.props.collection.get('name')) || Preview;
|
||||
const { entry, collection } = this.props;
|
||||
const collectionModel = new Collection(collection);
|
||||
const component = registry.getPreviewTemplate(collectionModel.templateName(entry.get('slug'))) || Preview;
|
||||
const previewProps = {
|
||||
...this.props,
|
||||
widgetFor: this.widgetFor,
|
||||
|
6
src/components/Widgets/ObjectControl.css
Normal file
6
src/components/Widgets/ObjectControl.css
Normal file
@ -0,0 +1,6 @@
|
||||
.root {
|
||||
position: relative;
|
||||
border: 1px solid #e8eae8;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
}
|
@ -1,7 +1,8 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Map } from 'immutable';
|
||||
import { resolveWidget } from '../Widgets';
|
||||
import styles from '../ControlPanel/ControlPane.css';
|
||||
import controlStyles from '../ControlPanel/ControlPane.css';
|
||||
import styles from './ObjectControl.css';
|
||||
|
||||
export default class ObjectControl extends Component {
|
||||
static propTypes = {
|
||||
@ -17,9 +18,9 @@ export default class ObjectControl extends Component {
|
||||
const widget = resolveWidget(field.get('widget') || 'string');
|
||||
const fieldValue = value && value.get(field.get('name'));
|
||||
|
||||
return (
|
||||
<div className={styles.control} key={field.get('name')}>
|
||||
<label className={styles.label}>{field.get('label')}</label>
|
||||
return (<div className={controlStyles.widget}>
|
||||
<div className={controlStyles.control} key={field.get('name')}>
|
||||
<label className={controlStyles.label}>{field.get('label')}</label>
|
||||
{
|
||||
React.createElement(widget.control, {
|
||||
field,
|
||||
@ -33,7 +34,7 @@ export default class ObjectControl extends Component {
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
</div>);
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -44,7 +45,7 @@ export default class ObjectControl extends Component {
|
||||
return <h3>No fields defined for this widget</h3>;
|
||||
}
|
||||
|
||||
return (<div>
|
||||
return (<div className={styles.root}>
|
||||
{field.get('fields').map(field => this.controlFor(field))}
|
||||
</div>);
|
||||
}
|
||||
|
Reference in New Issue
Block a user