diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index c66fdb2fa62c9b1900e951b3fb24a23bff4beff2..1574014fde7b939066826c9e0ec3990d646a9d7e 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -10,7 +10,7 @@ import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx'; import LanguageSelector from '../../containers/language-selector.jsx'; import LoadButton from '../../containers/load-button.jsx'; import Menu from '../../containers/menu.jsx'; -import {MenuItem} from '../menu/menu.jsx'; +import {MenuItem, MenuSection} from '../menu/menu.jsx'; import SaveButton from '../../containers/save-button.jsx'; import {openFeedbackForm} from '../../reducers/modals'; @@ -25,9 +25,14 @@ import communityIcon from './icon--see-community.svg'; import dropdownCaret from '../language-selector/dropdown-caret.svg'; import scratchLogo from './scratch-logo.svg'; -const MenuBarItemTooltip = ({id, place = 'bottom', children}) => ( +const MenuBarItemTooltip = ({ + children, + className, + id, + place = 'bottom' +}) => ( <ComingSoonTooltip - className={styles.comingSoon} + className={classNames(styles.comingSoon, className)} place={place} tooltipClassName={styles.comingSoonTooltip} tooltipId={id} @@ -38,13 +43,14 @@ const MenuBarItemTooltip = ({id, place = 'bottom', children}) => ( MenuBarItemTooltip.propTypes = { children: PropTypes.node, + className: PropTypes.string, id: PropTypes.string, place: PropTypes.oneOf(['top', 'bottom', 'left', 'right']) }; -const MenuItemTooltip = ({id, children}) => ( +const MenuItemTooltip = ({id, children, className}) => ( <ComingSoonTooltip - className={styles.comingSoon} + className={classNames(styles.comingSoon, className)} place="right" tooltipClassName={styles.comingSoonTooltip} tooltipId={id} @@ -55,6 +61,7 @@ const MenuItemTooltip = ({id, children}) => ( MenuItemTooltip.propTypes = { children: PropTypes.node, + className: PropTypes.string, id: PropTypes.string }; @@ -115,23 +122,33 @@ const MenuBar = props => ( <MenuItemTooltip id="new"> <MenuItem>New</MenuItem> </MenuItemTooltip> - <MenuItemTooltip id="save"> - <MenuItem>Save now</MenuItem> - </MenuItemTooltip> - <MenuItemTooltip id="copy"> - <MenuItem>Save as a copy</MenuItem> - </MenuItemTooltip> - <LoadButton>{(renderFileInput, loadProject) => ( - <MenuItem onClick={loadProject}> - Upload from your computer - {renderFileInput()} - </MenuItem> - )}</LoadButton> - <SaveButton>{saveProject => ( - <MenuItem onClick={saveProject}> - Download to your computer - </MenuItem> - )}</SaveButton> + <MenuSection> + <MenuItemTooltip id="save"> + <MenuItem>Save now</MenuItem> + </MenuItemTooltip> + <MenuItemTooltip id="copy"> + <MenuItem>Save as a copy</MenuItem> + </MenuItemTooltip> + </MenuSection> + <MenuSection> + <LoadButton>{(renderFileInput, loadProject, loadProps) => ( + <MenuItem + onClick={loadProject} + {...loadProps} + > + Upload from your computer + {renderFileInput()} + </MenuItem> + )}</LoadButton> + <SaveButton>{(saveProject, saveProps) => ( + <MenuItem + onClick={saveProject} + {...saveProps} + > + Download to your computer + </MenuItem> + )}</SaveButton> + </MenuSection> </MenuBarMenu> </div> <div className={classNames(styles.menuBarItem)}> diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css index 9940e9611072c8c871e86a2589ec9a1608b35883..c9fae4930b6aeb4c9c028ec72372ed8872768642 100644 --- a/src/components/menu/menu.css +++ b/src/components/menu/menu.css @@ -33,8 +33,7 @@ background-color: $ui-black-transparent; } -.divider { - margin-top: 10px; +.menu-section { border-top: 1px solid $ui-black-transparent; } diff --git a/src/components/menu/menu.jsx b/src/components/menu/menu.jsx index 6bea78c830e3c6748e122f2830d9a1601f1ffbc7..5268efb88eb1ac4ed7bc831c95eb712dde2ef79c 100644 --- a/src/components/menu/menu.jsx +++ b/src/components/menu/menu.jsx @@ -59,7 +59,27 @@ MenuItem.propTypes = { onClick: PropTypes.func }; +const addDividerClassToFirstChild = (child, id) => ( + React.cloneElement(child, { + className: classNames(child.className, { + [styles.menuSection]: id === 0 + }), + key: id + }) +); + +const MenuSection = ({children}) => ( + <React.Fragment>{ + children.map(addDividerClassToFirstChild) + }</React.Fragment> +); + +MenuSection.propTypes = { + children: PropTypes.node +}; + export { MenuComponent as default, - MenuItem + MenuItem, + MenuSection }; diff --git a/src/containers/load-button.jsx b/src/containers/load-button.jsx index fae36861e4a74d7493c59a0c536cbc8a652bba59..d1331901875b45eda4b0633ec7617393756366be 100644 --- a/src/containers/load-button.jsx +++ b/src/containers/load-button.jsx @@ -61,7 +61,16 @@ class LoadButton extends React.Component { } render () { if (this.state.loadingError) throw new Error(`Failed to load project: ${this.state.errorMessage}`); - return this.props.children(this.renderFileInput, this.handleClick); + const { + /* eslint-disable no-unused-vars */ + children, + closeLoadingState, + openLoadingState, + vm, + /* eslint-enable no-unused-vars */ + ...props + } = this.props; + return this.props.children(this.renderFileInput, this.handleClick, props); } } diff --git a/src/containers/save-button.jsx b/src/containers/save-button.jsx index 6458de5ba9529174a73443295b696f936f5976d4..cb840ac33c765e3d52161b010d832a947a847bea 100644 --- a/src/containers/save-button.jsx +++ b/src/containers/save-button.jsx @@ -30,7 +30,14 @@ class SaveButton extends React.Component { }); } render () { - return this.props.children(this.saveProject); + const { + /* eslint-disable no-unused-vars */ + children, + vm, + /* eslint-enable no-unused-vars */ + ...props + } = this.props; + return this.props.children(this.saveProject, props); } }