From 86e3aed065785b4a1ecb91a751f465f8b867a885 Mon Sep 17 00:00:00 2001 From: Mathias Biilmann Christensen Date: Fri, 28 Oct 2016 10:21:13 +0200 Subject: [PATCH] Better styling for object controls --- example/index.html | 24 +++++++++ src/components/ControlPanel/ControlPane.css | 56 ++------------------- src/components/PreviewPane/PreviewPane.js | 5 +- src/components/Widgets/ObjectControl.css | 6 +++ src/components/Widgets/ObjectControl.js | 13 ++--- src/valueObjects/Collection.js | 12 +++++ 6 files changed, 57 insertions(+), 59 deletions(-) create mode 100644 src/components/Widgets/ObjectControl.css diff --git a/example/index.html b/example/index.html index 3edb2778..86e3541c 100644 --- a/example/index.html +++ b/example/index.html @@ -87,7 +87,31 @@ } }); + var GeneralPreview = createClass({ + render: function() { + var entry = this.props.entry; + var title = entry.getIn(['data', 'site_title']); + var posts = entry.getIn(['data', 'posts']); + var thumb = posts && posts.get('thumb'); + + return h('div', {}, + h('h1', {}, title), + h('dl', {}, + h('dt', {}, 'Posts on Frontpage'), + h('dd', {}, posts && posts.get('front_limit') || '0'), + + h('dt', {}, 'Default Author'), + h('dd', {}, posts && posts.get('author') || 'None'), + + h('dt', {}, 'Default Thumbnail'), + h('dd', {}, thumb && h('img', {src: this.props.getMedia(thumb).toString()})) + ) + ); + } + }); + CMS.registerPreviewTemplate("posts", PostPreview); + CMS.registerPreviewTemplate("general", GeneralPreview); CMS.registerPreviewStyle("/example.css"); CMS.registerEditorComponent({ id: "youtube", diff --git a/src/components/ControlPanel/ControlPane.css b/src/components/ControlPanel/ControlPane.css index 25973c88..1f614ecd 100644 --- a/src/components/ControlPanel/ControlPane.css +++ b/src/components/ControlPanel/ControlPane.css @@ -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; } diff --git a/src/components/PreviewPane/PreviewPane.js b/src/components/PreviewPane/PreviewPane.js index f3c99de2..1a297bef 100644 --- a/src/components/PreviewPane/PreviewPane.js +++ b/src/components/PreviewPane/PreviewPane.js @@ -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, diff --git a/src/components/Widgets/ObjectControl.css b/src/components/Widgets/ObjectControl.css new file mode 100644 index 00000000..f9c6a947 --- /dev/null +++ b/src/components/Widgets/ObjectControl.css @@ -0,0 +1,6 @@ +.root { + position: relative; + border: 1px solid #e8eae8; + margin-bottom: 20px; + padding: 20px; +} diff --git a/src/components/Widgets/ObjectControl.js b/src/components/Widgets/ObjectControl.js index d2dfaf37..953fc913 100644 --- a/src/components/Widgets/ObjectControl.js +++ b/src/components/Widgets/ObjectControl.js @@ -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 ( -
- + return (
+
+ { React.createElement(widget.control, { field, @@ -33,7 +34,7 @@ export default class ObjectControl extends Component { }) }
- ); +
); } render() { @@ -44,7 +45,7 @@ export default class ObjectControl extends Component { return

No fields defined for this widget

; } - return (
+ return (
{field.get('fields').map(field => this.controlFor(field))}
); } diff --git a/src/valueObjects/Collection.js b/src/valueObjects/Collection.js index 39f71025..a8b5c220 100644 --- a/src/valueObjects/Collection.js +++ b/src/valueObjects/Collection.js @@ -37,6 +37,10 @@ class FolderCollection { allowNewEntries() { return this.collection.get('create'); } + + templateName() { + return this.props.collection.get('name'); + } } class FilesCollection { @@ -71,6 +75,10 @@ class FilesCollection { allowNewEntries() { return false; } + + templateName(slug) { + return slug; + } } export default class Collection { @@ -106,4 +114,8 @@ export default class Collection { allowNewEntries() { return this.collection.allowNewEntries(); } + + templateName(slug) { + return this.collection.templateName(slug); + } }