diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 7122aff64..507f35c58 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -14,7 +14,14 @@ import {MenuItem, MenuSection} from '../menu/menu.jsx'; import SaveButton from '../../containers/save-button.jsx'; import {openFeedbackForm} from '../../reducers/modals'; -import {openFileMenu, closeFileMenu, MENU_FILE} from '../../reducers/menus'; +import { + openFileMenu, + closeFileMenu, + fileMenuOpen, + openEditMenu, + closeEditMenu, + editMenuOpen +} from '../../reducers/menus'; import styles from './menu-bar.css'; @@ -151,10 +158,29 @@ const MenuBar = props => ( - -
Edit
-
-
+
+
Edit
+ + + Undo + + + Redo + + + + Turbo mode + + +
@@ -249,26 +275,26 @@ const MenuBar = props => ( ); MenuBar.propTypes = { + editMenuOpen: PropTypes.bool, fileMenuOpen: PropTypes.bool, + onClickEdit: PropTypes.func, onClickFile: PropTypes.func, onGiveFeedback: PropTypes.func.isRequired, + onRequestCloseEdit: PropTypes.func, onRequestCloseFile: PropTypes.func }; const mapStateToProps = state => ({ - fileMenuOpen: state.menus[MENU_FILE] + fileMenuOpen: fileMenuOpen(state), + editMenuOpen: editMenuOpen(state) }); const mapDispatchToProps = dispatch => ({ - onGiveFeedback: () => { - dispatch(openFeedbackForm()); - }, - onClickFile: () => { - dispatch(openFileMenu()); - }, - onRequestCloseFile: () => { - dispatch(closeFileMenu()); - } + onGiveFeedback: () => dispatch(openFeedbackForm()), + onClickFile: () => dispatch(openFileMenu()), + onRequestCloseFile: () => dispatch(closeFileMenu()), + onClickEdit: () => dispatch(openEditMenu()), + onRequestCloseEdit: () => dispatch(closeEditMenu()) }); export default connect( diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css index 98e1d8d5e..0219815ee 100644 --- a/src/components/menu/menu.css +++ b/src/components/menu/menu.css @@ -7,6 +7,7 @@ background-color: $motion-primary; padding: 0; margin: 0; + min-width: 186px; max-width: 260px; overflow: visible; color: $ui-white; diff --git a/src/components/menu/menu.jsx b/src/components/menu/menu.jsx index 5268efb88..543b998c8 100644 --- a/src/components/menu/menu.jsx +++ b/src/components/menu/menu.jsx @@ -70,7 +70,7 @@ const addDividerClassToFirstChild = (child, id) => ( const MenuSection = ({children}) => ( { - children.map(addDividerClassToFirstChild) + React.Children.map(children, addDividerClassToFirstChild) } ); diff --git a/src/reducers/menus.js b/src/reducers/menus.js index d506d9064..aac3fb852 100644 --- a/src/reducers/menus.js +++ b/src/reducers/menus.js @@ -2,10 +2,12 @@ const OPEN_MENU = 'scratch-gui/menus/OPEN_MENU'; const CLOSE_MENU = 'scratch-gui/menus/CLOSE_MENU'; const MENU_FILE = 'fileMenu'; +const MENU_EDIT = 'editMenu'; const initialState = { - [MENU_FILE]: false + [MENU_FILE]: false, + [MENU_EDIT]: false }; const reducer = function (state, action) { @@ -23,28 +25,27 @@ const reducer = function (state, action) { return state; } }; -const openMenu = function (menu) { - return { - type: OPEN_MENU, - menu: menu - }; -}; -const closeMenu = function (menu) { - return { - type: CLOSE_MENU, - menu: menu - }; -}; -const openFileMenu = function () { - return openMenu(MENU_FILE); -}; -const closeFileMenu = function () { - return closeMenu(MENU_FILE); -}; +const openMenu = menu => ({ + type: OPEN_MENU, + menu: menu +}); +const closeMenu = menu => ({ + type: CLOSE_MENU, + menu: menu +}); +const openFileMenu = () => openMenu(MENU_FILE); +const closeFileMenu = () => closeMenu(MENU_FILE); +const fileMenuOpen = state => state.menus[MENU_FILE]; +const openEditMenu = () => openMenu(MENU_EDIT); +const closeEditMenu = () => closeMenu(MENU_EDIT); +const editMenuOpen = state => state.menus[MENU_EDIT]; export { reducer as default, openFileMenu, closeFileMenu, - MENU_FILE + openEditMenu, + closeEditMenu, + fileMenuOpen, + editMenuOpen };