diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index c66fdb2fa..1574014fd 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' +}) => ( ( 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}) => ( ( MenuItemTooltip.propTypes = { children: PropTypes.node, + className: PropTypes.string, id: PropTypes.string }; @@ -115,23 +122,33 @@ const MenuBar = props => ( New - - Save now - - - Save as a copy - - {(renderFileInput, loadProject) => ( - - Upload from your computer - {renderFileInput()} - - )} - {saveProject => ( - - Download to your computer - - )} + + + Save now + + + Save as a copy + + + + {(renderFileInput, loadProject, loadProps) => ( + + Upload from your computer + {renderFileInput()} + + )} + {(saveProject, saveProps) => ( + + Download to your computer + + )} +
diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css index 9940e9611..c9fae4930 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 6bea78c83..5268efb88 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}) => ( + { + children.map(addDividerClassToFirstChild) + } +); + +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 fae36861e..d13319018 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 6458de5ba..cb840ac33 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); } }