diff --git a/js/components/MainWindow/ClutterBar.tsx b/js/components/MainWindow/ClutterBar.tsx index 36ad0be8..b812bb03 100644 --- a/js/components/MainWindow/ClutterBar.tsx +++ b/js/components/MainWindow/ClutterBar.tsx @@ -5,6 +5,8 @@ import classnames from "classnames"; import { SET_FOCUS, UNSET_FOCUS } from "../../actionTypes"; import { toggleDoubleSizeMode } from "../../actionCreators"; import { AppState, Dispatch } from "../../types"; +import OptionsContextMenu from "../OptionsContextMenu"; +import ContextMenuTarget from "../ContextMenuTarget"; interface StateProps { doubled: boolean; @@ -17,7 +19,9 @@ interface DispatchProps { const ClutterBar = (props: StateProps & DispatchProps) => (
-
+ }> + +
( @@ -55,6 +56,9 @@ const MainContextMenu = props => (

+ + + diff --git a/js/components/MainWindow/__snapshots__/index.test.js.snap b/js/components/MainWindow/__snapshots__/index.test.js.snap index 6900c107..340dafa2 100644 --- a/js/components/MainWindow/__snapshots__/index.test.js.snap +++ b/js/components/MainWindow/__snapshots__/index.test.js.snap @@ -65,9 +65,22 @@ exports[`MainWindow renders to snapshot 1`] = `
-
+
+
+
+
+
diff --git a/js/components/OptionsContextMenu.tsx b/js/components/OptionsContextMenu.tsx new file mode 100644 index 00000000..c21aa2cf --- /dev/null +++ b/js/components/OptionsContextMenu.tsx @@ -0,0 +1,85 @@ +import React from "react"; +import { connect } from "react-redux"; + +import { Hr, Node, Parent } from "./ContextMenu"; +import SkinsContextMenu from "./SkinsContextMenu"; +import { Dispatch, TimeMode, AppState } from "../types"; +import * as Actions from "../actionCreators"; +import { TIME_MODE } from "../constants"; + +interface StateProps { + timeMode: TimeMode; + doubled: boolean; + repeat: boolean; + shuffle: boolean; +} + +interface DispatchProps { + toggleTimeMode(): void; + toggleDoubleSizeMode(): void; + toggleRepeat(): void; + toggleShuffle(): void; +} + +const OptionsContextMenu = (props: DispatchProps & StateProps) => ( + + {/* */} + +
+ + + {/* */} + + {/* */} +
+ + +
+); + +const mapStateToProps = (state: AppState): StateProps => { + return { + doubled: state.display.doubled, + timeMode: state.media.timeMode, + repeat: state.media.repeat, + shuffle: state.media.shuffle + }; +}; +const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => { + return { + toggleTimeMode: () => dispatch(Actions.toggleTimeMode()), + toggleDoubleSizeMode: () => dispatch(Actions.toggleDoubleSizeMode()), + toggleRepeat: () => dispatch(Actions.toggleRepeat()), + toggleShuffle: () => dispatch(Actions.toggleShuffle()) + }; +}; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(OptionsContextMenu);