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 /> ); }; 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..7aa8d869b62d 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 }) => -
-
- - {itemsCount} {listLabel} +const TopBar = ({ collapsed, onCollapseToggle }) => ( +
+
+
-
; - +
+); export default class ObjectControl extends Component { static propTypes = { @@ -32,6 +34,7 @@ export default class ObjectControl extends Component { field: PropTypes.object, forID: PropTypes.string, classNameWrapper: PropTypes.string.isRequired, + forList: PropTypes.bool, }; constructor(props) { @@ -85,15 +88,23 @@ export default class ObjectControl extends Component { ); } + handleCollapseToggle = () => { + this.setState({ collapsed: !this.state.collapsed }); + } + 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 (
- {multiFields.map((f, idx) => this.controlFor(f, idx))} -
); + return ( +
+ { forList ? null : } + { collapsed ? null : multiFields.map((f, idx) => this.controlFor(f, idx)) } +
+ ); } else if (singleField) { return this.controlFor(singleField); }