From f11636340331a169d6ec1e897c2e53ebbb0503dd Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Thu, 12 Apr 2018 15:13:43 -0400
Subject: [PATCH] Add dividers
It's a cleaner API IMO but ended up being a messy implementation...
---
src/components/menu-bar/menu-bar.jsx | 61 ++++++++++++++++++----------
src/components/menu/menu.css | 3 +-
src/components/menu/menu.jsx | 22 +++++++++-
src/containers/load-button.jsx | 11 ++++-
src/containers/save-button.jsx | 9 +++-
5 files changed, 79 insertions(+), 27 deletions(-)
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'
+}) => (
<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 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}) => (
+ <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 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);
}
}
--
GitLab