From 3e6759a0a67ec145d894ab840d9a3fe34d57ba3d Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Fri, 9 Jun 2017 17:28:21 -0700
Subject: [PATCH] Refactor context window

---
 css/context-menu.css             | 21 +++++++++++++++++++++
 css/main-window.css              | 10 ----------
 js/components/ContextMenu.js     |  9 ++++++---
 js/components/MainContextMenu.js |  8 +++-----
 4 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/css/context-menu.css b/css/context-menu.css
index f32b337a..d7b1b2ae 100644
--- a/css/context-menu.css
+++ b/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 */
diff --git a/css/main-window.css b/css/main-window.css
index e9557a45..77fafe43 100755
--- a/css/main-window.css
+++ b/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;
 }
diff --git a/js/components/ContextMenu.js b/js/components/ContextMenu.js
index 546010ff..30dd3ef9 100644
--- a/js/components/ContextMenu.js
+++ b/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
 };
diff --git a/js/components/MainContextMenu.js b/js/components/MainContextMenu.js
index 89526cd9..cd8e89bc 100644
--- a/js/components/MainContextMenu.js
+++ b/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);