Added collapse to feature callout

ekuiter · Aug 27, 2018 · 7315291 · 7315291
1 parent 9c9ebb7
commit 7315291
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 17 deletions.
diff --git a/client/src/components/contextualMenuItems.js b/client/src/components/contextualMenuItems.js
@@ -89,6 +89,7 @@ const contextualMenuItems = {
                 key: 'remove',
                 text: i18n.t('featureDiagram.commands.feature.remove'),
                 iconProps: {iconName: 'Remove'},
+                iconOnly: true,
                 onClick: () => actions.server.feature.remove(featureName).then(onClick)
             }),
             details: (featureName, onShowOverlay) => ({
@@ -110,16 +111,23 @@ const contextualMenuItems = {
                 iconProps: {iconName: 'TextDocument'},
                 onClick: () => onShowOverlay(overlayTypes.featureSetDescriptionDialog, {featureName})
             }),
-            collapseExpand: (feature, onCollapseFeature, onExpandFeature) => ({
+            collapseExpand: (feature, onCollapseFeature, onExpandFeature, onClick) => ({
                 key: 'collapseExpand',
                 text: i18n.t('featureDiagram.commands.feature.collapseExpand')(feature.isCollapsed),
                 iconProps: {iconName: feature.isCollapsed ? 'ExploreContent' : 'CollapseContent'},
+                iconOnly: true,
                 disabled: !feature.hasActualChildren,
-                onClick: () => feature.isCollapsed ? onExpandFeature(feature.name) : onCollapseFeature(feature.name)
+                onClick: () => {
+                    if (feature.isCollapsed)
+                        onExpandFeature(feature.name);
+                    else
+                        onCollapseFeature(feature.name);
+                    onClick();
+                }
             }),
-            properties: feature => {
-                const toggleAbstract = () => actions.server.feature.properties.setAbstract(feature.name, !feature.isAbstract),
-                    toggleMandatory = () => actions.server.feature.properties.setMandatory(feature.name, !feature.isMandatory),
+            properties: (feature, onClick) => {
+                const toggleAbstract = () => actions.server.feature.properties.setAbstract(feature.name, !feature.isAbstract).then(onClick),
+                    toggleMandatory = () => actions.server.feature.properties.setMandatory(feature.name, !feature.isMandatory).then(onClick),
                     mandatoryDisabled = !feature.node.parent || feature.node.parent.feature().isGroup,
                     groupDisabled = !feature.node.children || feature.node.children.length <= 1;
                 return ({
@@ -146,7 +154,7 @@ const contextualMenuItems = {
                             text: i18n.t('featureDiagram.commands.feature.hidden'),
                             canCheck: true,
                             isChecked: feature.isHidden,
-                            onClick: () => actions.server.feature.properties.setHidden(feature.name, !feature.isHidden)
+                            onClick: () => actions.server.feature.properties.setHidden(feature.name, !feature.isHidden).then(onClick)
                         }, {
                             key: 'divider2', itemType: ContextualMenuItemType.Divider
                         }, {
@@ -171,21 +179,21 @@ const contextualMenuItems = {
                             disabled: groupDisabled,
                             canCheck: true,
                             isChecked: feature.isAnd,
-                            onClick: () => actions.server.feature.properties.setAnd(feature.name)
+                            onClick: () => actions.server.feature.properties.setAnd(feature.name).then(onClick)
                         }, {
                             key: 'or',
                             text: i18n.t('featureDiagram.commands.feature.or'),
                             disabled: groupDisabled,
                             canCheck: true,
                             isChecked: feature.isOr,
-                            onClick: () => actions.server.feature.properties.setOr(feature.name)
+                            onClick: () => actions.server.feature.properties.setOr(feature.name).then(onClick)
                         }, {
                             key: 'alternative',
                             text: i18n.t('featureDiagram.commands.feature.alternative'),
                             disabled: groupDisabled,
                             canCheck: true,
                             isChecked: feature.isAlternative,
-                            onClick: () => actions.server.feature.properties.setAlternative(feature.name)
+                            onClick: () => actions.server.feature.properties.setAlternative(feature.name).then(onClick)
                         }]
                     }
                 });

diff --git a/client/src/components/overlays/FeatureCallout.js b/client/src/components/overlays/FeatureCallout.js
@@ -35,7 +35,9 @@ class FeatureCallout extends FeatureComponent({doUpdate: true}) {
                     <CommandBar
                         items={[
                             contextualMenuItems.featureDiagram.feature.new(feature.name, onDismiss),
-                            contextualMenuItems.featureDiagram.feature.remove(feature.name, onDismiss)
+                            contextualMenuItems.featureDiagram.feature.remove(feature.name, onDismiss),
+                            contextualMenuItems.featureDiagram.feature.collapseExpand(
+                                feature, this.props.onCollapseFeature, this.props.onExpandFeature, onDismiss),
                         ]}
                         farItems={[
                             contextualMenuItems.featureDiagram.feature.details(feature.name, this.props.onShowOverlay)
@@ -53,6 +55,8 @@ FeatureCallout.propTypes = {
     isOpen: PropTypes.bool.isRequired,
     featureDiagramLayout: LayoutType.isRequired,
     onShowOverlay: PropTypes.func.isRequired,
+    onCollapseFeature: PropTypes.func.isRequired,
+    onExpandFeature: PropTypes.func.isRequired,
     settings: SettingsType.isRequired
 };
 

diff --git a/client/src/components/overlays/FeatureContextualMenu.js b/client/src/components/overlays/FeatureContextualMenu.js
@@ -41,11 +41,11 @@ class FeatureContextualMenu extends FeatureComponent({doUpdate: true}) {
                         contextualMenuItems.featureDiagram.feature.new(feature.name, onDismiss),
                         contextualMenuItems.featureDiagram.feature.remove(feature.name, onDismiss),
                         contextualMenuItems.featureDiagram.feature.collapseExpand(
-                            feature, this.props.onCollapseFeature, this.props.onExpandFeature),
+                            feature, this.props.onCollapseFeature, this.props.onExpandFeature, onDismiss),
                         {key: 'divider1', itemType: ContextualMenuItemType.Divider},
                         contextualMenuItems.featureDiagram.feature.rename(feature.name, this.props.onShowOverlay),
                         contextualMenuItems.featureDiagram.feature.setDescription(feature.name, this.props.onShowOverlay),
-                        contextualMenuItems.featureDiagram.feature.properties(feature),
+                        contextualMenuItems.featureDiagram.feature.properties(feature, onDismiss),
                         {key: 'divider3', itemType: ContextualMenuItemType.Divider},
                         contextualMenuItems.featureDiagram.feature.details(feature.name, this.props.onShowOverlay)
                     ]

diff --git a/client/src/components/overlays/FeaturePanel.js b/client/src/components/overlays/FeaturePanel.js
@@ -6,7 +6,6 @@ import contextualMenuItems from '../contextualMenuItems';
 import PropTypes from 'prop-types';
 import {FeatureModelType} from '../../server/FeatureModel';
 import FeatureComponent from './FeatureComponent';
-import {ContextualMenuItemType} from '../../../node_modules/office-ui-fabric-react/lib/ContextualMenu';
 
 const buttonStyles = {root: {backgroundColor: 'transparent'}},
     transparentItems = items => items;
@@ -18,12 +17,13 @@ class FeaturePanel extends FeatureComponent({onDismissProp: 'onDismissed'}) {
                 contextualMenuItems.featureDiagram.feature.new(this.props.featureName, this.props.onDismissed),
                 contextualMenuItems.featureDiagram.feature.remove(this.props.featureName, this.props.onDismissed),
                 contextualMenuItems.featureDiagram.feature.collapseExpand(
-                    this.feature, this.props.onCollapseFeature, this.props.onExpandFeature),
-                {key: 'divider', itemType: ContextualMenuItemType.Divider},
+                    this.feature, this.props.onCollapseFeature, this.props.onExpandFeature, this.props.onDismissed)
+            ])}
+            overflowItems={[
                 contextualMenuItems.featureDiagram.feature.rename(this.props.featureName, this.props.onShowOverlay),
                 contextualMenuItems.featureDiagram.feature.setDescription(this.props.featureName, this.props.onShowOverlay),
-                contextualMenuItems.featureDiagram.feature.properties(this.feature)
-            ])}
+                contextualMenuItems.featureDiagram.feature.properties(this.feature, this.props.onDismissed)
+            ]}
             overflowButtonProps={{styles: buttonStyles}}
             styles={{root: {margin: '0 -40px', padding: '0 35px'}}}/>
     );

diff --git a/client/src/containers/overlays/OverlayContainer.js b/client/src/containers/overlays/OverlayContainer.js
@@ -55,6 +55,8 @@ const OverlayContainer = props => (
             featureDiagramLayout={props.featureDiagramLayout}
             settings={props.settings}
             onShowOverlay={props.onShowOverlay}
+            onCollapseFeature={props.onCollapseFeature}
+            onExpandFeature={props.onExpandFeature}
             featureModel={props.featureModel}
             {...props.overlayProps}/>}