diff --git a/client/src/components/contextualMenuItems.js b/client/src/components/contextualMenuItems.js index 0c9a2e4c..c2ce57e2 100644 --- 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 index d598a1c5..f3801367 100644 --- a/client/src/components/overlays/FeatureCallout.js +++ b/client/src/components/overlays/FeatureCallout.js @@ -35,7 +35,9 @@ class FeatureCallout extends FeatureComponent({doUpdate: true}) { 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 index db5bd853..ae9b1f09 100644 --- 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}/>}