Better styling for object controls

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",

src/components/ControlPanel/ControlPane.css

@@ -1,54 +1,6 @@
-.control {
+.root {
-  color: #7c8382;
   position: relative;
-  padding: 20px 0;
+  margin-bottom: 20px;
-
+  padding: 20px;
-  & input,
+  border: 1px solid #e8eae8;
-  & 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;
-  }
 }

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,

src/components/Widgets/ObjectControl.css

@@ -0,0 +1,6 @@
+.root {
+  position: relative;
+  border: 1px solid #e8eae8;
+  margin-bottom: 20px;
+  padding: 20px;
+}

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 (<div className={controlStyles.widget}>
-      <div className={styles.control} key={field.get('name')}>
+      <div className={controlStyles.control} key={field.get('name')}>
-        <label className={styles.label}>{field.get('label')}</label>
+        <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>);
   }

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);
+  }
 }