From 41092962467a7f8c83baef904e57949438b3c31b Mon Sep 17 00:00:00 2001 From: Christian Nolte Date: Sun, 10 Dec 2017 23:15:40 +0100 Subject: [PATCH 1/9] Add collapse/expand. --- .../EditorWidgets/List/ListControl.js | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/components/EditorWidgets/List/ListControl.js b/src/components/EditorWidgets/List/ListControl.js index 1399697b4a79..2debce650c1f 100644 --- a/src/components/EditorWidgets/List/ListControl.js +++ b/src/components/EditorWidgets/List/ListControl.js @@ -23,12 +23,15 @@ function valueToString(value) { const SortableListItem = SortableElement(ListItem); -const TopBar = ({ onAdd, listLabel, collapsed, onCollapseToggle, itemsCount }) => ( +const TopBar = ({ onAdd, listLabel, collapsed, onCollapseToggle, onCollapseAllToggle, isAllCollapsed, itemsCount }) => (
- + {itemsCount} {listLabel}
+ @@ -70,6 +73,7 @@ export default class ListControl extends Component { collapsed: false, itemsCollapsed: List(), value: valueToString(props.value), + isAllCollapsed: false, }; this.valueType = null; } @@ -173,6 +177,23 @@ export default class ListControl extends Component { }); } + handleCollapseAllToggle = (e) => { + e.preventDefault(); + const { value } = this.props; + const { isAllCollapsed } = this.state; + const itemsCount = value ? value.size : 0; + let { itemsCollapsed } = this.state; + + for (let i = 0; i < itemsCount; i++) { + itemsCollapsed = itemsCollapsed.set(i, !isAllCollapsed); + } + + this.setState({ + itemsCollapsed, + isAllCollapsed: !isAllCollapsed, + }); + } + objectLabel(item) { const { field } = this.props; const multiFields = field.get('fields'); @@ -248,6 +269,8 @@ export default class ListControl extends Component { onAdd={this.handleAdd} listLabel={field.get('label').toLowerCase()} onCollapseToggle={this.handleCollapseToggle} + onCollapseAllToggle={this.handleCollapseAllToggle} + isAllCollapsed={this.state.isAllCollapsed} collapsed={collapsed} itemsCount={items.size} /> From 7ec561bad8ab5346fd2e153d4ccf5f81aa733d1a Mon Sep 17 00:00:00 2001 From: Christian Nolte Date: Sun, 10 Dec 2017 23:32:31 +0100 Subject: [PATCH 2/9] Hide button if collapsed --- src/components/EditorWidgets/List/ListControl.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/EditorWidgets/List/ListControl.js b/src/components/EditorWidgets/List/ListControl.js index 2debce650c1f..396dde91e3fe 100644 --- a/src/components/EditorWidgets/List/ListControl.js +++ b/src/components/EditorWidgets/List/ListControl.js @@ -29,9 +29,11 @@ const TopBar = ({ onAdd, listLabel, collapsed, onCollapseToggle, onCollapseAllTo {itemsCount} {listLabel}
+ {!collapsed ? + : null } From d32d9381d737e5decfb227678107fde5b881c1eb Mon Sep 17 00:00:00 2001 From: Christian Nolte Date: Sun, 10 Dec 2017 23:38:31 +0100 Subject: [PATCH 3/9] Rename property --- src/components/EditorWidgets/List/ListControl.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/EditorWidgets/List/ListControl.js b/src/components/EditorWidgets/List/ListControl.js index 396dde91e3fe..33b5d0c38756 100644 --- a/src/components/EditorWidgets/List/ListControl.js +++ b/src/components/EditorWidgets/List/ListControl.js @@ -23,7 +23,7 @@ function valueToString(value) { const SortableListItem = SortableElement(ListItem); -const TopBar = ({ onAdd, listLabel, collapsed, onCollapseToggle, onCollapseAllToggle, isAllCollapsed, itemsCount }) => ( +const TopBar = ({ onAdd, listLabel, collapsed, onCollapseToggle, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => (
@@ -31,7 +31,7 @@ const TopBar = ({ onAdd, listLabel, collapsed, onCollapseToggle, onCollapseAllTo
{!collapsed ? : null }
- {!collapsed ? + {!collapsed && itemsCount > 0 ? @@ -137,7 +137,10 @@ export default class ListControl extends Component { e.preventDefault(); const { value, onChange } = this.props; const parsedValue = (this.valueType === valueTypes.SINGLE) ? null : Map(); - this.setState({ collapsed: false }); + this.setState({ + collapsed: false, + allItemsCollapsed: false, + }); onChange((value || List()).push(parsedValue)); }; @@ -162,8 +165,13 @@ export default class ListControl extends Component { handleRemove = (index, event) => { event.preventDefault(); + const { itemsCollapsed } = this.state; const { value, metadata, onChange, forID } = this.props; const parsedMetadata = metadata && { [forID]: metadata.removeIn(value.get(index).valueSeq()) }; + + this.setState({ + itemsCollapsed: itemsCollapsed.delete(index), + }); onChange(value.remove(index), parsedMetadata); } @@ -173,9 +181,15 @@ export default class ListControl extends Component { handleItemCollapseToggle = (index, event) => { event.preventDefault(); - const { itemsCollapsed } = this.state; + const { value } = this.props; + let { itemsCollapsed } = this.state; + + itemsCollapsed = itemsCollapsed.set(index, !itemsCollapsed.get(index, false)); + const allCollapsed = itemsCollapsed.every((collabsed, i) => collabsed); + this.setState({ - itemsCollapsed: itemsCollapsed.set(index, !itemsCollapsed.get(index, false)), + itemsCollapsed, + allItemsCollapsed: itemsCollapsed.size === value.size && allCollapsed, }); } From 3e8653393550600c6146f3c2303714b15046f84f Mon Sep 17 00:00:00 2001 From: Christian Nolte Date: Tue, 12 Dec 2017 09:02:07 +0100 Subject: [PATCH 5/9] Renam collapsed to listCollapsed. --- .../EditorWidgets/List/ListControl.js | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/EditorWidgets/List/ListControl.js b/src/components/EditorWidgets/List/ListControl.js index 2381a6a28c4a..c6a7786e98c3 100644 --- a/src/components/EditorWidgets/List/ListControl.js +++ b/src/components/EditorWidgets/List/ListControl.js @@ -23,13 +23,13 @@ function valueToString(value) { const SortableListItem = SortableElement(ListItem); -const TopBar = ({ onAdd, listLabel, collapsed, onCollapseToggle, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => ( +const TopBar = ({ onAdd, listLabel, listCollapsed, onCollapseToggle, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => (
- + {itemsCount} {listLabel}
- {!collapsed && itemsCount > 0 ? + {!listCollapsed && itemsCount > 0 ? @@ -72,7 +72,7 @@ export default class ListControl extends Component { constructor(props) { super(props); this.state = { - collapsed: false, + listCollapsed: false, itemsCollapsed: List(), value: valueToString(props.value), allItemsCollapsed: false, @@ -138,7 +138,7 @@ export default class ListControl extends Component { const { value, onChange } = this.props; const parsedValue = (this.valueType === valueTypes.SINGLE) ? null : Map(); this.setState({ - collapsed: false, + listCollapsed: false, allItemsCollapsed: false, }); onChange((value || List()).push(parsedValue)); @@ -176,7 +176,7 @@ export default class ListControl extends Component { } handleCollapseToggle = () => { - this.setState({ collapsed: !this.state.collapsed }); + this.setState({ listCollapsed: !this.state.collapsed }); } handleItemCollapseToggle = (index, event) => { @@ -185,7 +185,7 @@ export default class ListControl extends Component { let { itemsCollapsed } = this.state; itemsCollapsed = itemsCollapsed.set(index, !itemsCollapsed.get(index, false)); - const allCollapsed = itemsCollapsed.every((collabsed, i) => collabsed); + const allCollapsed = itemsCollapsed.every((collapsed, i) => collapsed); this.setState({ itemsCollapsed, @@ -195,15 +195,15 @@ export default class ListControl extends Component { handleCollapseAllToggle = (e) => { e.preventDefault(); - const { value } = this.props; const { allItemsCollapsed } = this.state; + const { value } = this.props; const itemsCount = value ? value.size : 0; let { itemsCollapsed } = this.state; for (let i = 0; i < itemsCount; i++) { itemsCollapsed = itemsCollapsed.set(i, !allItemsCollapsed); } - + this.setState({ itemsCollapsed, allItemsCollapsed: !allItemsCollapsed, @@ -273,10 +273,10 @@ export default class ListControl extends Component { renderListControl() { const { value, forID, field, classNameWrapper } = this.props; - const { collapsed } = this.state; + const { listCollapsed } = this.state; const items = value || List(); const className = c(classNameWrapper, 'nc-listControl', { - 'nc-listControl-collapsed' : collapsed, + 'nc-listControl-collapsed' : listCollapsed, }); return ( @@ -287,11 +287,11 @@ export default class ListControl extends Component { onCollapseToggle={this.handleCollapseToggle} onCollapseAllToggle={this.handleCollapseAllToggle} allItemsCollapsed={this.state.allItemsCollapsed} - collapsed={collapsed} + listCollapsed={listCollapsed} itemsCount={items.size} /> { - collapsed ? null : + listCollapsed ? null : Date: Tue, 12 Dec 2017 10:14:05 +0100 Subject: [PATCH 6/9] Fix handleCollapseToggle. --- src/components/EditorWidgets/List/ListControl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EditorWidgets/List/ListControl.js b/src/components/EditorWidgets/List/ListControl.js index c6a7786e98c3..58de47c62344 100644 --- a/src/components/EditorWidgets/List/ListControl.js +++ b/src/components/EditorWidgets/List/ListControl.js @@ -176,7 +176,7 @@ export default class ListControl extends Component { } handleCollapseToggle = () => { - this.setState({ listCollapsed: !this.state.collapsed }); + this.setState({ listCollapsed: !this.state.listCollapsed }); } handleItemCollapseToggle = (index, event) => { From 8d9a4c78fb4e88ad386e7e41c7bf6950ac7c7bd6 Mon Sep 17 00:00:00 2001 From: Shawn Erquhart Date: Thu, 14 Dec 2017 17:04:48 -0800 Subject: [PATCH 7/9] add chevron-double icon --- src/components/EditorWidgets/List/List.css | 11 ++++++++--- src/components/EditorWidgets/List/ListControl.js | 14 +++++++------- .../EditorWidgets/Object/ObjectControl.js | 2 +- src/components/UI/Icon/icons.js | 5 ++++- src/components/UI/Icon/images/_index.js | 6 ++++-- src/components/UI/Icon/images/chevron-double.svg | 8 ++++++++ .../UI/Icon/images/{caret.svg => chevron.svg} | 0 src/components/UI/ListItemTopBar/ListItemTopBar.js | 2 +- 8 files changed, 33 insertions(+), 15 deletions(-) create mode 100644 src/components/UI/Icon/images/chevron-double.svg rename src/components/UI/Icon/images/{caret.svg => chevron.svg} (100%) diff --git a/src/components/EditorWidgets/List/List.css b/src/components/EditorWidgets/List/List.css index 441299cc5f70..6e5cbdd86365 100644 --- a/src/components/EditorWidgets/List/List.css +++ b/src/components/EditorWidgets/List/List.css @@ -38,11 +38,16 @@ align-items: center; font-size: 14px; font-weight: 500; - cursor: pointer; line-height: 1; +} - & .nc-icon { - padding-right: 8px; +.nc-listControl-listCollapseToggleButton{ + padding: 4px; + background-color: transparent; + color: inherit; + + &:last-of-type { + margin-right: 4px; } } diff --git a/src/components/EditorWidgets/List/ListControl.js b/src/components/EditorWidgets/List/ListControl.js index 58de47c62344..814e72d8cc30 100644 --- a/src/components/EditorWidgets/List/ListControl.js +++ b/src/components/EditorWidgets/List/ListControl.js @@ -25,15 +25,15 @@ const SortableListItem = SortableElement(ListItem); const TopBar = ({ onAdd, listLabel, listCollapsed, onCollapseToggle, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => (
-
- +
+ + {itemsCount} {listLabel}
- {!listCollapsed && itemsCount > 0 ? - - : null } diff --git a/src/components/EditorWidgets/Object/ObjectControl.js b/src/components/EditorWidgets/Object/ObjectControl.js index 4b46ba54232f..c7699376f0e4 100644 --- a/src/components/EditorWidgets/Object/ObjectControl.js +++ b/src/components/EditorWidgets/Object/ObjectControl.js @@ -10,7 +10,7 @@ import EditorControl from 'Editor/EditorControlPane/EditorControl'; const TopBar = ({ collapsed, onCollapseToggle }) =>
- + {itemsCount} {listLabel}
; diff --git a/src/components/UI/Icon/icons.js b/src/components/UI/Icon/icons.js index c43017ef4e14..6a71771f51f1 100644 --- a/src/components/UI/Icon/icons.js +++ b/src/components/UI/Icon/icons.js @@ -22,7 +22,10 @@ const config = { 'arrow': { direction: 'left', }, - 'caret': { + 'chevron': { + direction: 'down', + }, + 'chevron-double': { direction: 'down', } }; diff --git a/src/components/UI/Icon/images/_index.js b/src/components/UI/Icon/images/_index.js index 818656a41d6b..f974d8736b06 100644 --- a/src/components/UI/Icon/images/_index.js +++ b/src/components/UI/Icon/images/_index.js @@ -2,8 +2,9 @@ import iconAdd from './add.svg'; import iconAddWith from './add-with.svg'; import iconArrow from './arrow.svg'; import iconBold from './bold.svg'; -import iconCaret from './caret.svg'; import iconCheck from './check.svg'; +import iconChevron from './chevron.svg'; +import iconChevronDouble from './chevron-double.svg'; import iconCircle from './circle.svg'; import iconClose from './close.svg'; import iconCode from './code.svg'; @@ -43,8 +44,9 @@ const images = { 'add-with': iconAddWith, 'arrow': iconArrow, 'bold': iconBold, - 'caret': iconCaret, 'check': iconCheck, + 'chevron': iconChevron, + 'chevron-double': iconChevronDouble, 'circle': iconCircle, 'close': iconClose, 'code': iconCode, diff --git a/src/components/UI/Icon/images/chevron-double.svg b/src/components/UI/Icon/images/chevron-double.svg new file mode 100644 index 000000000000..4df690a02d29 --- /dev/null +++ b/src/components/UI/Icon/images/chevron-double.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/components/UI/Icon/images/caret.svg b/src/components/UI/Icon/images/chevron.svg similarity index 100% rename from src/components/UI/Icon/images/caret.svg rename to src/components/UI/Icon/images/chevron.svg diff --git a/src/components/UI/ListItemTopBar/ListItemTopBar.js b/src/components/UI/ListItemTopBar/ListItemTopBar.js index 297511a89514..5d7f3d4635db 100644 --- a/src/components/UI/ListItemTopBar/ListItemTopBar.js +++ b/src/components/UI/ListItemTopBar/ListItemTopBar.js @@ -15,7 +15,7 @@ export const ListItemTopBar = ({ collapsed, onCollapseToggle, onRemove, dragHand { onCollapseToggle ? : null } From 017b491d26847dc52acab4a52b996a988a507b9a Mon Sep 17 00:00:00 2001 From: Christian Nolte Date: Sat, 16 Dec 2017 12:23:25 +0100 Subject: [PATCH 8/9] Add expandItems & collapsed field. --- .../EditorWidgets/List/ListControl.js | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/EditorWidgets/List/ListControl.js b/src/components/EditorWidgets/List/ListControl.js index 814e72d8cc30..8a90ff2e91c7 100644 --- a/src/components/EditorWidgets/List/ListControl.js +++ b/src/components/EditorWidgets/List/ListControl.js @@ -57,7 +57,7 @@ export default class ListControl extends Component { ImmutablePropTypes.list, PropTypes.string, ]), - field: PropTypes.node, + field: PropTypes.object, forID: PropTypes.string, mediaPaths: ImmutablePropTypes.map.isRequired, getAsset: PropTypes.func.isRequired, @@ -71,12 +71,24 @@ export default class ListControl extends Component { constructor(props) { super(props); + const { field, value } = props; + const itemsCount = value ? value.size : 0; + const allItemsExpanded = field.get('expandItems') || false; + let itemsCollapsed = List(); + + if (!allItemsExpanded) { + for (let i = 0; i < itemsCount; i++) { + itemsCollapsed = itemsCollapsed.set(i, true); + } + } + this.state = { - listCollapsed: false, - itemsCollapsed: List(), + listCollapsed: field.get('collapsed') || false, + itemsCollapsed, + allItemsCollapsed: !allItemsExpanded, value: valueToString(props.value), - allItemsCollapsed: false, }; + this.valueType = null; } @@ -92,6 +104,7 @@ export default class ListControl extends Component { componentDidMount() { const { field } = this.props; + if (field.get('fields')) { this.valueType = valueTypes.MULTIPLE; } else if (field.get('field')) { From af3017198d8f2c76deca30a7fa1b52806d1a4c3d Mon Sep 17 00:00:00 2001 From: Shawn Erquhart Date: Thu, 21 Dec 2017 15:41:29 -0500 Subject: [PATCH 9/9] remove outer list collapse --- .../EditorWidgets/List/ListControl.js | 113 ++++++------------ 1 file changed, 35 insertions(+), 78 deletions(-) diff --git a/src/components/EditorWidgets/List/ListControl.js b/src/components/EditorWidgets/List/ListControl.js index 8a90ff2e91c7..e1b39f3f7c46 100644 --- a/src/components/EditorWidgets/List/ListControl.js +++ b/src/components/EditorWidgets/List/ListControl.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { List, Map, fromJS } from 'immutable'; +import { List, Map } from 'immutable'; import { partial } from 'lodash'; import c from 'classnames'; import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'; @@ -23,14 +23,11 @@ function valueToString(value) { const SortableListItem = SortableElement(ListItem); -const TopBar = ({ onAdd, listLabel, listCollapsed, onCollapseToggle, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => ( +const TopBar = ({ onAdd, listLabel, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => (
- {itemsCount} {listLabel}
@@ -53,10 +50,7 @@ export default class ListControl extends Component { static propTypes = { onChange: PropTypes.func.isRequired, onChangeObject: PropTypes.func.isRequired, - value: PropTypes.oneOfType([ - ImmutablePropTypes.list, - PropTypes.string, - ]), + value: ImmutablePropTypes.list, field: PropTypes.object, forID: PropTypes.string, mediaPaths: ImmutablePropTypes.map.isRequired, @@ -69,24 +63,19 @@ export default class ListControl extends Component { setInactiveStyle: PropTypes.func.isRequired, }; + static defaultProps = { + value: List(), + }; + constructor(props) { super(props); const { field, value } = props; - const itemsCount = value ? value.size : 0; - const allItemsExpanded = field.get('expandItems') || false; - let itemsCollapsed = List(); - - if (!allItemsExpanded) { - for (let i = 0; i < itemsCount; i++) { - itemsCollapsed = itemsCollapsed.set(i, true); - } - } + const allItemsCollapsed = field.get('collapsed') || true; + const itemsCollapsed = Array(value.size).fill(allItemsCollapsed); this.state = { - listCollapsed: field.get('collapsed') || false, - itemsCollapsed, - allItemsCollapsed: !allItemsExpanded, - value: valueToString(props.value), + itemsCollapsed: List(itemsCollapsed), + value: valueToString(value), }; this.valueType = null; @@ -150,10 +139,7 @@ export default class ListControl extends Component { e.preventDefault(); const { value, onChange } = this.props; const parsedValue = (this.valueType === valueTypes.SINGLE) ? null : Map(); - this.setState({ - listCollapsed: false, - allItemsCollapsed: false, - }); + this.setState({ itemsCollapsed: this.state.itemsCollapsed.push(false) }); onChange((value || List()).push(parsedValue)); }; @@ -181,46 +167,25 @@ export default class ListControl extends Component { const { itemsCollapsed } = this.state; const { value, metadata, onChange, forID } = this.props; const parsedMetadata = metadata && { [forID]: metadata.removeIn(value.get(index).valueSeq()) }; - - this.setState({ - itemsCollapsed: itemsCollapsed.delete(index), - }); - onChange(value.remove(index), parsedMetadata); - } - handleCollapseToggle = () => { - this.setState({ listCollapsed: !this.state.listCollapsed }); + this.setState({ itemsCollapsed: itemsCollapsed.delete(index) }); + + onChange(value.remove(index), parsedMetadata); } handleItemCollapseToggle = (index, event) => { event.preventDefault(); - const { value } = this.props; - let { itemsCollapsed } = this.state; - - itemsCollapsed = itemsCollapsed.set(index, !itemsCollapsed.get(index, false)); - const allCollapsed = itemsCollapsed.every((collapsed, i) => collapsed); - - this.setState({ - itemsCollapsed, - allItemsCollapsed: itemsCollapsed.size === value.size && allCollapsed, - }); + const { itemsCollapsed } = this.state; + const collapsed = itemsCollapsed.get(index); + this.setState({ itemsCollapsed: itemsCollapsed.set(index, !collapsed) }); } handleCollapseAllToggle = (e) => { e.preventDefault(); - const { allItemsCollapsed } = this.state; const { value } = this.props; - const itemsCount = value ? value.size : 0; - let { itemsCollapsed } = this.state; - - for (let i = 0; i < itemsCount; i++) { - itemsCollapsed = itemsCollapsed.set(i, !allItemsCollapsed); - } - - this.setState({ - itemsCollapsed, - allItemsCollapsed: !allItemsCollapsed, - }); + const { itemsCollapsed } = this.state; + const allItemsCollapsed = itemsCollapsed.every(val => val === true); + this.setState({ itemsCollapsed: List(Array(value.size).fill(!allItemsCollapsed)) }); } objectLabel(item) { @@ -234,6 +199,7 @@ export default class ListControl extends Component { onSortEnd = ({ oldIndex, newIndex }) => { const { value, onChange } = this.props; + const { itemsCollapsed } = this.state; // Update value const item = value.get(oldIndex); @@ -241,10 +207,9 @@ export default class ListControl extends Component { this.props.onChange(newValue); // Update collapsing - const { itemsCollapsed } = this.state; const collapsed = itemsCollapsed.get(oldIndex); - const newItemsCollapsed = itemsCollapsed.delete(oldIndex).insert(newIndex, collapsed); - this.setState({ itemsCollapsed: newItemsCollapsed }); + const updatedItemsCollapsed = itemsCollapsed.delete(oldIndex).insert(newIndex, collapsed); + this.setState({ itemsCollapsed: updatedItemsCollapsed }); }; renderItem = (item, index) => { @@ -286,33 +251,25 @@ export default class ListControl extends Component { renderListControl() { const { value, forID, field, classNameWrapper } = this.props; - const { listCollapsed } = this.state; + const { itemsCollapsed } = this.state; const items = value || List(); - const className = c(classNameWrapper, 'nc-listControl', { - 'nc-listControl-collapsed' : listCollapsed, - }); return ( -
+
val === true)} itemsCount={items.size} /> - { - listCollapsed ? null : - - } +
); }