Refactor context window

css/context-menu.css

@@ -1,3 +1,24 @@
+#winamp2-js #context-menu {
+  display: none;
+  left: 0px;
+}
+
+#winamp2-js .bottom > #context-menu {
+  top: 12px;
+}
+
+#winamp2-js .top > #context-menu {
+  top: 0px;
+}
+
+#winamp2-js div:active > div > #context-menu {
+  display: block;
+}
+
+#winamp2-js .selected > #context-menu {
+  display: block;
+}
+
 #winamp2-js #context-menu, #winamp2-js #context-menu ul {
   display: none;
   z-index: 50; /* Gross */

css/main-window.css

@@ -74,16 +74,6 @@
 #winamp2-js #title-bar #option {
   left: 6px;
 }
-#winamp2-js #title-bar #option #context-menu {
-  display: none;
-  top: 12px;
-  left: 0px;
-}
-#winamp2-js #title-bar #option:active #context-menu,
-#winamp2-js #title-bar #option .selected #context-menu {
-  display: block;
-}
-
 #winamp2-js #title-bar #minimize {
   left: 244px;
 }

js/components/ContextMenu.js

@@ -47,10 +47,11 @@ export class ContextMenu extends React.Component {
   }
 
   render() {
+    const { selected, top, bottom, children } = this.props;
     return (
-      <div className={classnames({ selected: this.props.selected })}>
+      <div className={classnames({ selected, top, bottom })}>
         <ul id="context-menu">
-          {this.props.children}
+          {children}
         </ul>
       </div>
     );
@@ -59,5 +60,7 @@ export class ContextMenu extends React.Component {
 
 ContextMenu.propTypes = {
   closeMenu: React.PropTypes.func.isRequired,
-  children: React.PropTypes.any.isRequired
+  children: React.PropTypes.any.isRequired,
+  top: React.PropTypes.bool,
+  bottom: React.PropTypes.bool
 };

js/components/MainContextMenu.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { CLOSE_CONTEXT_MENU, TOGGLE_CONTEXT_MENU } from "../actionTypes";
+import { CLOSE_CONTEXT_MENU } from "../actionTypes";
 import { close, setSkinFromFilename, openFileDialog } from "../actionCreators";
 import { ContextMenu, Hr, Node, Parent, LinkNode } from "./contextMenu";
 
@@ -14,7 +14,7 @@ const SKINS = [
 ];
 
 const MainContextMenu = props =>
-  <ContextMenu closeMenu={props.closeMenu} selected={props.selected}>
+  <ContextMenu closeMenu={props.closeMenu} selected={props.selected} bottom>
     <LinkNode
       href="https://github.com/captbaritone/winamp2-js"
       target="_blank"
@@ -37,15 +37,13 @@ const MainContextMenu = props =>
     <Node onClick={props.close} label="Exit" />
   </ContextMenu>;
 
-const mapStateToProps = state => state.contextMenu;
 const mapDispatchToProps = (dispatch, ownProps) => ({
   close: () => dispatch(close()),
   closeMenu: () => {
-    console.log("close");
     dispatch({ type: CLOSE_CONTEXT_MENU });
   },
   openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
   setSkin: filename => dispatch(setSkinFromFilename(filename))
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(MainContextMenu);
+export default connect(null, mapDispatchToProps)(MainContextMenu);