Add options context menu

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) => (
   <div id="clutter-bar">
-    <div id="button-o" />
+    <ContextMenuTarget bottom handle={<div id="button-o" />}>
+      <OptionsContextMenu />
+    </ContextMenuTarget>
     <div id="button-a" />
     <div id="button-i" />
     <div

js/components/MainWindow/MainContextMenu.js

@@ -10,6 +10,7 @@ import { getGenWindows } from "../../selectors";
 import { LOAD_STYLE } from "../../constants";
 import { Hr, Node, Parent, LinkNode } from "../ContextMenu";
 import PlaybackContextMenu from "../PlaybackContextMenu";
+import OptionsContextMenu from "../OptionsContextMenu";
 import SkinsContextMenu from "../SkinsContextMenu";
 
 const MainContextMenu = props => (
@@ -55,6 +56,9 @@ const MainContextMenu = props => (
     <Hr />
     <SkinsContextMenu />
     <Hr />
+    <Parent label="Options">
+      <OptionsContextMenu />
+    </Parent>
     <Parent label="Playback">
       <PlaybackContextMenu />
     </Parent>

js/components/MainWindow/__snapshots__/index.test.js.snap

@@ -65,9 +65,22 @@ exports[`MainWindow renders to snapshot 1`] = `
     <div
       id="clutter-bar"
     >
-      <div
-        id="button-o"
-      />
+      <div>
+        <div
+          className="handle"
+          onClick={[Function]}
+          style={
+            Object {
+              "height": "100%",
+              "width": "100%",
+            }
+          }
+        >
+          <div
+            id="button-o"
+          />
+        </div>
+      </div>
       <div
         id="button-a"
       />

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) => (
+  <React.Fragment>
+    {/* <Node label="Preferences..." /> */}
+    <SkinsContextMenu />
+    <Hr />
+    <Node
+      label="Time elapsed"
+      hotkey="(Ctrl+T toggles)"
+      onClick={props.toggleTimeMode}
+      checked={props.timeMode === TIME_MODE.ELAPSED}
+    />
+    <Node
+      label="Time remaining"
+      hotkey="(Ctrl+T toggles)"
+      onClick={props.toggleTimeMode}
+      checked={props.timeMode === TIME_MODE.REMAINING}
+    />
+    {/* <Node label="Always On Top" hotkey="Ctrl+A" /> */}
+    <Node
+      label="Double Size"
+      hotkey="Ctrl+D"
+      onClick={props.toggleDoubleSizeMode}
+      checked={props.doubled}
+    />
+    {/* <Node label="EasyMove" hotkey="Ctrl+E" /> */}
+    <Hr />
+    <Node
+      label="Repeat"
+      hotkey="R"
+      onClick={props.toggleRepeat}
+      checked={props.repeat}
+    />
+    <Node
+      label="Shuffle"
+      hotkey="S"
+      onClick={props.toggleShuffle}
+      checked={props.shuffle}
+    />
+  </React.Fragment>
+);
+
+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);