From a09c3dc610352da882bc8907f641b0c487f2163e Mon Sep 17 00:00:00 2001
From: Christian Nolte <hello@noltech.net>
Date: Fri, 15 Dec 2017 20:02:41 +0100
Subject: [PATCH 1/2] Add expand/collapse to object widget

---
 .../EditorWidgets/Object/Object.css           | 11 ++++++-
 .../EditorWidgets/Object/ObjectControl.js     | 29 ++++++++++++++-----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/EditorWidgets/Object/Object.css b/src/components/EditorWidgets/Object/Object.css
index 3adba5d27da7..dfae6943ca09 100644
--- a/src/components/EditorWidgets/Object/Object.css
+++ b/src/components/EditorWidgets/Object/Object.css
@@ -1,3 +1,12 @@
 .nc-objectControl-root {
-  padding: 14px;
+  padding: 0 14px;
+}
+
+.nc-objectControl-topBar {
+  align-items: center;
+  background-color: #dfdfe3;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 -14px;
+  padding: 13px;
 }
diff --git a/src/components/EditorWidgets/Object/ObjectControl.js b/src/components/EditorWidgets/Object/ObjectControl.js
index c7699376f0e4..7944eef29a9c 100644
--- a/src/components/EditorWidgets/Object/ObjectControl.js
+++ b/src/components/EditorWidgets/Object/ObjectControl.js
@@ -5,16 +5,18 @@ import { Map } from 'immutable';
 import { partial } from 'lodash';
 import c from 'classnames';
 import { resolveWidget } from 'Lib/registry';
+import { Icon } from 'UI';
 import EditorControl from 'Editor/EditorControlPane/EditorControl';
 
-const TopBar = ({ collapsed, onCollapseToggle }) =>
-  <div className="nc-listControl-topBar">
-    <div className="nc-listControl-listCollapseToggle" onClick={onCollapseToggle}>
-      <Icon type="chevron" direction={collapsed ? 'up' : 'down'} size="small"/>
-      {itemsCount} {listLabel}
+const TopBar = ({ collapsed, onCollapseToggle }) => (
+  <div className="nc-objectControl-topBar">
+    <div className="nc-objectControl-objectCollapseToggle">
+      <button className="nc-listControl-listCollapseToggleButton" onClick={onCollapseToggle}>
+        <Icon type="chevron" direction={collapsed ? 'up' : 'down'} size="small" />
+      </button>
     </div>
-  </div>;
-
+  </div>
+);
 
 export default class ObjectControl extends Component {
   static propTypes = {
@@ -85,14 +87,25 @@ export default class ObjectControl extends Component {
     );
   }
 
+  handleCollapseToggle = () => {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
   render() {
     const { field, forID, classNameWrapper } = this.props;
+    const { collapsed } = this.state;
     const multiFields = field.get('fields');
     const singleField = field.get('field');
 
     if (multiFields) {
       return (<div id={forID} className={c(classNameWrapper, 'nc-objectControl-root')}>
-        {multiFields.map((f, idx) => this.controlFor(f, idx))}
+        <TopBar 
+          collapsed={collapsed}
+          onCollapseToggle={this.handleCollapseToggle}
+        />
+        {collapsed ? null :
+          multiFields.map((f, idx) => this.controlFor(f, idx))
+        }
       </div>);
     } else if (singleField) {
       return this.controlFor(singleField);

From 9fa2e6492ffdcaa01109ea818be06debfe2ef331 Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@erquh.art>
Date: Sun, 24 Dec 2017 07:35:08 -0500
Subject: [PATCH 2/2] do not render object top bar for list items

---
 .../EditorWidgets/List/ListControl.js          |  1 +
 .../EditorWidgets/Object/ObjectControl.js      | 18 ++++++++----------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/EditorWidgets/List/ListControl.js b/src/components/EditorWidgets/List/ListControl.js
index a5aadc59c307..775a3c6d4891 100644
--- a/src/components/EditorWidgets/List/ListControl.js
+++ b/src/components/EditorWidgets/List/ListControl.js
@@ -245,6 +245,7 @@ export default class ListControl extends Component {
         onAddAsset={onAddAsset}
         onRemoveInsertedMedia={onRemoveInsertedMedia}
         classNameWrapper={`${classNameWrapper} nc-listControl-objectControl`}
+        forList
       />
     </SortableListItem>);
   };
diff --git a/src/components/EditorWidgets/Object/ObjectControl.js b/src/components/EditorWidgets/Object/ObjectControl.js
index 7944eef29a9c..7aa8d869b62d 100644
--- a/src/components/EditorWidgets/Object/ObjectControl.js
+++ b/src/components/EditorWidgets/Object/ObjectControl.js
@@ -34,6 +34,7 @@ export default class ObjectControl extends Component {
     field: PropTypes.object,
     forID: PropTypes.string,
     classNameWrapper: PropTypes.string.isRequired,
+    forList: PropTypes.bool,
   };
 
   constructor(props) {
@@ -92,21 +93,18 @@ export default class ObjectControl extends Component {
   }
 
   render() {
-    const { field, forID, classNameWrapper } = this.props;
+    const { field, forID, classNameWrapper, forList } = this.props;
     const { collapsed } = this.state;
     const multiFields = field.get('fields');
     const singleField = field.get('field');
 
     if (multiFields) {
-      return (<div id={forID} className={c(classNameWrapper, 'nc-objectControl-root')}>
-        <TopBar 
-          collapsed={collapsed}
-          onCollapseToggle={this.handleCollapseToggle}
-        />
-        {collapsed ? null :
-          multiFields.map((f, idx) => this.controlFor(f, idx))
-        }
-      </div>);
+      return (
+        <div id={forID} className={c(classNameWrapper, 'nc-objectControl-root')}>
+          { forList ? null : <TopBar collapsed={collapsed} onCollapseToggle={this.handleCollapseToggle} /> }
+          { collapsed ? null : multiFields.map((f, idx) => this.controlFor(f, idx)) }
+        </div>
+      );
     } else if (singleField) {
       return this.controlFor(singleField);
     }