Maor UI polish for editing with live preview

This commit is contained in:
Mathias Biilmann Christensen
2016-09-12 11:14:21 +02:00
parent fcd0ce718a
commit 8221c9c170
17 changed files with 242 additions and 109 deletions

View File

@ -23,7 +23,7 @@ export default class ControlPane extends React.Component {
const { collection } = this.props;
if (!collection) { return null; }
return <div>
{collection.get('fields').map((field) => <div key={field.get('name')}>{this.controlFor(field)}</div>)}
{collection.get('fields').map((field) => <div key={field.get('name')} className="cms-widget">{this.controlFor(field)}</div>)}
</div>;
}
}

View File

@ -1,9 +1,24 @@
.entryEditor {
display: flex;
flex-direction: column;
height: 100%;
}
.container {
display: flex
display: flex;
height: 100%;
}
.footer {
background: #fff;
height: 45px;
border-top: 1px solid #e8eae8;
padding: 10px 20px;
}
.controlPane {
width: 50%;
padding: 0 10px;
max-height: 100%;
overflow: auto;
padding: 0 20px;
border-right: 1px solid #e8eae8;
}
.previewPane {
width: 50%;

View File

@ -4,27 +4,57 @@ import ControlPane from './ControlPane';
import PreviewPane from './PreviewPane';
import styles from './EntryEditor.css';
export default function EntryEditor({ collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist }) {
return <div>
<h1>Entry in {collection.get('label')}</h1>
<h2>{entry && entry.get('title')}</h2>
<div className={styles.container}>
<div className={styles.controlPane}>
<ControlPane
collection={collection}
entry={entry}
getMedia={getMedia}
onChange={onChange}
onAddMedia={onAddMedia}
onRemoveMedia={onRemoveMedia}
/>
export default class EntryEditor extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleResize = this.handleResize.bind(this);
}
componentDidMount() {
this.calculateHeight();
window.addEventListener('resize', this.handleResize, false);
}
componengWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
handleResize() {
this.calculateHeight();
}
calculateHeight() {
const height = window.innerHeight - 54;
console.log('setting height to %s', height);
this.setState({height});
}
render() {
const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
const {height} = this.state;
return <div className={styles.entryEditor} style={{height}}>
<div className={styles.container}>
<div className={styles.controlPane}>
<ControlPane
collection={collection}
entry={entry}
getMedia={getMedia}
onChange={onChange}
onAddMedia={onAddMedia}
onRemoveMedia={onRemoveMedia}
/>
</div>
<div className={styles.previewPane}>
<PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
</div>
</div>
<div className={styles.previewPane}>
<PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
<div className={styles.footer}>
<button onClick={onPersist}>Save</button>
</div>
</div>
<button onClick={onPersist}>Save</button>
</div>;
</div>;
}
}
EntryEditor.propTypes = {

View File

@ -3,6 +3,8 @@ import UnknownControl from './Widgets/UnknownControl';
import UnknownPreview from './Widgets/UnknownPreview';
import StringControl from './Widgets/StringControl';
import StringPreview from './Widgets/StringPreview';
import TextControl from './Widgets/TextControl';
import TextPreview from './Widgets/TextPreview';
import MarkdownControl from './Widgets/MarkdownControl';
import MarkdownPreview from './Widgets/MarkdownPreview';
import ImageControl from './Widgets/ImageControl';
@ -11,6 +13,7 @@ import DateTimeControl from './Widgets/DateTimeControl';
import DateTimePreview from './Widgets/DateTimePreview';
registry.registerWidget('string', StringControl, StringPreview);
registry.registerWidget('text', TextControl, TextPreview);
registry.registerWidget('markdown', MarkdownControl, MarkdownPreview);
registry.registerWidget('image', ImageControl, ImagePreview);
registry.registerWidget('datetime', DateTimeControl, DateTimePreview);

View File

@ -18,5 +18,5 @@ export default class DateTimeControl extends React.Component {
DateTimeControl.propTypes = {
onChange: PropTypes.func.isRequired,
value: PropTypes.node,
value: PropTypes.object,
};

View File

@ -1,4 +1,5 @@
import React, { PropTypes } from 'react';
import registry from '../../lib/registry';
import RawEditor from './MarkdownControlElements/RawEditor';
import VisualEditor from './MarkdownControlElements/VisualEditor';
import { processEditorPlugins } from './richText';
@ -13,7 +14,8 @@ class MarkdownControl extends React.Component {
}
componentWillMount() {
processEditorPlugins(this.context.plugins.editor);
this.useRawEditor();
processEditorPlugins(registry.getEditorComponents());
}
useVisualEditor() {
@ -28,8 +30,8 @@ class MarkdownControl extends React.Component {
const { editor, onChange, onAddMedia, getMedia, value } = this.props;
if (editor.get('useVisualMode')) {
return (
<div>
<button onClick={this.useRawEditor}>Switch to Raw Editor</button>
<div className='cms-editor-visual'>
{null && <button onClick={this.useRawEditor}>Switch to Raw Editor</button>}
<VisualEditor
onChange={onChange}
onAddMedia={onAddMedia}
@ -41,8 +43,8 @@ class MarkdownControl extends React.Component {
);
} else {
return (
<div>
<button onClick={this.useVisualEditor}>Switch to Visual Editor</button>
<div className='cms-editor-raw'>
{null && <button onClick={this.useVisualEditor}>Switch to Visual Editor</button>}
<RawEditor
onChange={onChange}
onAddMedia={onAddMedia}

View File

@ -0,0 +1,51 @@
import { Component, PropTypes, Children } from 'react';
import { List, Record } from 'immutable';
import _ from 'lodash';
const plugins = { editor: List() };
const catchesNothing = /.^/;
const EditorComponent = Record({
id: null,
label: 'unnamed component',
icon: 'exclamation-triangle',
fields: [],
pattern: catchesNothing,
fromBlock: function(match) { return {}; },
toBlock: function(attributes) { return 'Plugin'; },
toPreview: function(attributes) { return 'Plugin'; }
});
class Plugin extends Component {
getChildContext() {
return { plugins: plugins };
}
render() {
return Children.only(this.props.children);
}
}
Plugin.propTypes = {
children: PropTypes.element.isRequired
};
Plugin.childContextTypes = {
plugins: PropTypes.object
};
export function newEditorPlugin(config) {
const configObj = new EditorComponent({
id: config.id || config.label.replace(/[^A-Z0-9]+/ig, '_'),
label: config.label,
icon: config.icon,
fields: config.fields,
pattern: config.pattern,
fromBlock: _.isFunction(config.fromBlock) ? config.fromBlock.bind(null) : null,
toBlock: _.isFunction(config.toBlock) ? config.toBlock.bind(null) : null,
toPreview: _.isFunction(config.toPreview) ? config.toPreview.bind(null) : config.toBlock.bind(null)
});
return configObj;
}

View File

@ -0,0 +1,37 @@
import React, { PropTypes } from 'react';
export default class StringControl extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleRef = this.handleRef.bind(this);
}
componentDidMount() {
this.updateHeight();
}
handleChange(e) {
this.props.onChange(e.target.value);
this.updateHeight();
}
updateHeight() {
if (this.element.scrollHeight > this.element.clientHeight) {
this.element.style.height = this.element.scrollHeight + 'px';
}
}
handleRef(ref) {
this.element = ref;
}
render() {
return <textarea ref={this.handleRef} value={this.props.value || ''} onChange={this.handleChange}/>;
}
}
StringControl.propTypes = {
onChange: PropTypes.func.isRequired,
value: PropTypes.node,
};

View File

@ -0,0 +1,4 @@
import StringPreview from './StringPreview';
export default class TextPreview extends StringPreview {
}

View File

@ -48,8 +48,6 @@ function processEditorPlugins(plugins) {
<div className="plugin_fields" contentEditable={false}>
{ plugin.fields.map(field => `${field.label}: “${node.data.get(field.name)}`) }
</div>
</div>
);
};