diff --git a/src/components/ControlPane.js b/src/components/ControlPane.js deleted file mode 100644 index fc39041e..00000000 --- a/src/components/ControlPane.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { PropTypes } from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { resolveWidget } from './Widgets'; - -export default class ControlPane extends React.Component { - controlFor(field) { - const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props; - const widget = resolveWidget(field.get('widget')); - return
- - {React.createElement(widget.control, { - field: field, - value: entry.getIn(['data', field.get('name')]), - onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)), - onAddMedia: onAddMedia, - onRemoveMedia: onRemoveMedia, - getMedia: getMedia - })} -
; - } - - render() { - const { collection } = this.props; - if (!collection) { return null; } - return
- {collection.get('fields').map((field) =>
{this.controlFor(field)}
)} -
; - } -} - -ControlPane.propTypes = { - collection: ImmutablePropTypes.map.isRequired, - entry: ImmutablePropTypes.map.isRequired, - getMedia: PropTypes.func.isRequired, - onAddMedia: PropTypes.func.isRequired, - onChange: PropTypes.func.isRequired, - onRemoveMedia: PropTypes.func.isRequired, -}; diff --git a/src/components/ControlPanel/ControlPane.css b/src/components/ControlPanel/ControlPane.css new file mode 100644 index 00000000..328ddf27 --- /dev/null +++ b/src/components/ControlPanel/ControlPane.css @@ -0,0 +1,53 @@ +.control { + color: #7c8382; + 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 { + 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; + } +} diff --git a/src/components/ControlPanel/ControlPane.js b/src/components/ControlPanel/ControlPane.js new file mode 100644 index 00000000..fed6425f --- /dev/null +++ b/src/components/ControlPanel/ControlPane.js @@ -0,0 +1,56 @@ +import React, { PropTypes } from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { resolveWidget } from '../Widgets'; +import styles from './ControlPane.css'; + +export default class ControlPane extends React.Component { + controlFor(field) { + const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props; + const widget = resolveWidget(field.get('widget')); + return ( +
+ + {React.createElement(widget.control, { + field: field, + value: entry.getIn(['data', field.get('name')]), + onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)), + onAddMedia: onAddMedia, + onRemoveMedia: onRemoveMedia, + getMedia: getMedia + })} +
+ ); + } + + render() { + const { collection } = this.props; + if (!collection) { + return null; + } + return ( +
+ { + collection + .get('fields') + .map(field => +
+ {this.controlFor(field)} +
+ ) + } +
+ ); + } +} + +ControlPane.propTypes = { + collection: ImmutablePropTypes.map.isRequired, + entry: ImmutablePropTypes.map.isRequired, + getMedia: PropTypes.func.isRequired, + onAddMedia: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, + onRemoveMedia: PropTypes.func.isRequired, +}; diff --git a/src/components/EntryEditor.js b/src/components/EntryEditor.js index 2bd872ea..d3a07f2a 100644 --- a/src/components/EntryEditor.js +++ b/src/components/EntryEditor.js @@ -1,6 +1,6 @@ import React, { PropTypes } from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import ControlPane from './ControlPane'; +import ControlPane from './ControlPanel/ControlPane'; import PreviewPane from './PreviewPane'; import styles from './EntryEditor.css'; diff --git a/src/components/Widgets/MarkdownControlElements/RawEditor/index.css b/src/components/Widgets/MarkdownControlElements/RawEditor/index.css new file mode 100644 index 00000000..eca2a8d4 --- /dev/null +++ b/src/components/Widgets/MarkdownControlElements/RawEditor/index.css @@ -0,0 +1,13 @@ +.root { + 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; +} diff --git a/src/components/Widgets/MarkdownControlElements/RawEditor/index.js b/src/components/Widgets/MarkdownControlElements/RawEditor/index.js index c9e640c0..0670e1fe 100644 --- a/src/components/Widgets/MarkdownControlElements/RawEditor/index.js +++ b/src/components/Widgets/MarkdownControlElements/RawEditor/index.js @@ -3,6 +3,7 @@ import { Editor, Plain, Mark } from 'slate'; import Prism from 'prismjs'; import PluginDropImages from 'slate-drop-or-paste-images'; import marks from './prismMarkdown'; +import styles from './index.css'; Prism.languages.markdown = Prism.languages.extend('markup', {}); Prism.languages.insertBefore('markdown', 'prolog', marks); @@ -114,12 +115,13 @@ class RawEditor extends React.Component { render() { return ( ); } diff --git a/src/index.css b/src/index.css index 296bdf5a..69aac2cf 100644 --- a/src/index.css +++ b/src/index.css @@ -36,59 +36,6 @@ h1 { font-size: 25px; } -:global { - & .cms-widget { - border-bottom: 1px solid #e8eae8; - position: relative; - } - & .cms-widget: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; - } - & .cms-widget:last-child { - border-bottom: none; - } - & .cms-widget:last-child:after { - display: none; - } - & .cms-control { - color: #7c8382; - position: relative; - padding: 20px 0; - & label { - color: #AAB0AF; - font-size: 12px; - margin-bottom: 18px; - } - & input, - & textarea, - & select, - & .cms-editor-raw { - 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; - } - } -} - :global { & .rdt { position: relative;