diff --git a/packages/neos-ui/src/Containers/RightSideBar/Inspector/PropertyGroup/index.js b/packages/neos-ui/src/Containers/RightSideBar/Inspector/PropertyGroup/index.js index ed642bbeb0..9c13f95e4a 100644 --- a/packages/neos-ui/src/Containers/RightSideBar/Inspector/PropertyGroup/index.js +++ b/packages/neos-ui/src/Containers/RightSideBar/Inspector/PropertyGroup/index.js @@ -22,6 +22,7 @@ export default class PropertyGroup extends PureComponent { renderSecondaryInspector: PropTypes.func.isRequired, node: PropTypes.object.isRequired, + handlePanelToggle: PropTypes.func.isRequired, commit: PropTypes.func.isRequired }; @@ -30,13 +31,13 @@ export default class PropertyGroup extends PureComponent { }; render() { - const {properties, views, label, icon, collapsed, renderSecondaryInspector, node, commit} = this.props; + const {properties, views, label, icon, collapsed, handlePanelToggle, renderSecondaryInspector, node, commit} = this.props; const headerTheme = { panel__headline: style.propertyGroupLabel // eslint-disable-line camelcase }; const propertyGroup = properties => ( - + {icon && } diff --git a/packages/neos-ui/src/Containers/RightSideBar/Inspector/TabPanel/index.js b/packages/neos-ui/src/Containers/RightSideBar/Inspector/TabPanel/index.js index 4393e5eb83..a6186cd25c 100644 --- a/packages/neos-ui/src/Containers/RightSideBar/Inspector/TabPanel/index.js +++ b/packages/neos-ui/src/Containers/RightSideBar/Inspector/TabPanel/index.js @@ -24,7 +24,7 @@ export default class TabPanel extends PureComponent { }; render() { - const {groups, renderSecondaryInspector, node, commit} = this.props; + const {handlePanelToggle, toggledPanels, groups, renderSecondaryInspector, node, commit} = this.props; if (!groups) { return (
...
); @@ -36,10 +36,12 @@ export default class TabPanel extends PureComponent { { groups.filter(g => ($get('properties', g) && $get('properties', g).filter(this.isPropertyEnabled).count()) || ($get('views', g) && $get('views', g).count())).map(group => ( handlePanelToggle([$get('id', group)])} key={$get('id', group)} label={$get('label', group)} icon={$get('icon', group)} - collapsed={$get('collapsed', group)} + // overlay default collapsed state over current state + collapsed={$get($get('id', group), toggledPanels) != $get('collapsed', group)} // eslint-disable-line eqeqeq properties={$get('properties', group).filter(this.isPropertyEnabled)} views={$get('views', group)} renderSecondaryInspector={renderSecondaryInspector} diff --git a/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js b/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js index fce862230b..2d243f8412 100644 --- a/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js +++ b/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js @@ -69,7 +69,8 @@ export default class Inspector extends PureComponent { }; state = { - secondaryInspectorComponent: null + secondaryInspectorComponent: null, + toggledPanels: Immutable.fromJS({}) }; constructor(props) { @@ -197,6 +198,12 @@ export default class Inspector extends PureComponent { return (
); } + handlePanelToggle = path => { + const value = $get(path, this.state.toggledPanels); + const newState = $set(path, !value, this.state.toggledPanels); + this.setState({toggledPanels: newState}); + }; + render() { const { focusedNode, @@ -252,10 +259,14 @@ export default class Inspector extends PureComponent { key={$get('id', tab)} icon={$get('icon', tab)} groups={$get('groups', tab)} + toggledPanels={$get($get('id', tab), this.state.toggledPanels)} tooltip={i18nRegistry.translate($get('label', tab))} renderSecondaryInspector={this.renderSecondaryInspector} node={focusedNode} commit={commit} + handlePanelToggle={path => { + this.handlePanelToggle([$get('id', tab), ...path]); + }} />); }) }