From cc75ff9affdb352ec485f01b940f71d3a962e8aa Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 27 May 2016 07:07:21 -0400
Subject: [PATCH] Main menu improvements

  - Move most of the code into generic Menu and MenuItem components
  - Icons can go left or right of text
  - Make icons fixed width (fixes ragged left edge of labels)
  - Labels underlined on hover only
---
 js/component/common.js | 50 +++++++++++++++++++++++++++++++++++++++++-
 js/page/home.js        | 22 ++++++-------------
 2 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/js/component/common.js b/js/component/common.js
index 536e48871..dd8b818d4 100644
--- a/js/component/common.js
+++ b/js/component/common.js
@@ -3,9 +3,10 @@
 var Icon = React.createClass({
   propTypes: {
     style: React.PropTypes.object,
+    fixed: React.PropTypes.boolean,
   },
   render: function() {
-    var className = 'icon ' + this.props.icon;
+    var className = 'icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') + this.props.icon;
     return <span className={className} style={this.props.style}></span>
   }
 });
@@ -27,6 +28,53 @@ var Link = React.createClass({
   }
 });
 
+// Generic menu styles
+var menuStyle = {
+  border: '1px solid #aaa',
+  padding: '2px',
+  whiteSpace: 'nowrap',
+};
+
+var Menu = React.createClass({
+  render: function() {
+    return (
+      <div style={menuStyle}>
+        {this.props.children}
+      </div>
+    );
+  }
+});
+
+var menuItemStyle = {
+  display: 'block',
+};
+var MenuItem = React.createClass({
+  propTypes: {
+    href: React.PropTypes.string,
+    label: React.PropTypes.string,
+    icon: React.PropTypes.string,
+    onClick: React.PropTypes.function,
+  },
+  getDefaultProps: function() {
+    return {
+      iconPosition: 'left',
+    }
+  },
+  render: function() {
+    var icon = (this.props.icon ? <Icon icon={this.props.icon} fixed /> : null);
+
+    return (
+      <a style={menuItemStyle} href={this.props.href} label={this.props.label} title={this.props.label}
+         className="button-text no-underline">
+        {this.props.iconPosition == 'left' ? icon : null}
+        {this.props.label}
+        {this.props.iconPosition == 'left' ? null : icon}
+      </a>
+    );
+  }
+});
+
+
 var creditAmountStyle = {
   color: '#216C2A',
   fontWeight: 'bold',
diff --git a/js/page/home.js b/js/page/home.js
index c32f66da0..d3245653e 100644
--- a/js/page/home.js
+++ b/js/page/home.js
@@ -234,21 +234,12 @@ var topBarStyle = {
 },
 balanceStyle = {
   'marginRight': '5px'
-},
-closeIconStyle = {
-  'color': '#ff5155'
 };
 
-
 var mainMenuStyle = {
   position: 'absolute',
-  whiteSpace: 'nowrap',
-  border: '1px solid #aaa',
-  padding: '2px',
   top: '26px',
   right: '0px',
-}, mainMenuItemStyle = {
-  display: 'block',
 };
 
 var MainMenu = React.createClass({
@@ -264,12 +255,13 @@ var MainMenu = React.createClass({
     var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
     return (
       <div style={mainMenuStyle} className={this.props.show ? '' : 'hidden'}>
-        <Link href='/?files' label="My Files" icon='icon-cloud-download' style={mainMenuItemStyle}/>
-        <Link href='/?settings' label="Settings" icon='icon-gear' style={mainMenuItemStyle}/>
-        <Link href='/?help' label="Help" icon='icon-question-circle' style={mainMenuItemStyle}/>
-        {isLinux ? <Link href="/?start" label="Exit LBRY" icon="icon-close"
-                         hidden={!this.props.show} style={mainMenuItemStyle} />
-                 : null}
+        <Menu>
+          <MenuItem href='/?files' label="My Files" icon='icon-cloud-download' />
+          <MenuItem href='/?settings' label="Settings" icon='icon-gear' />
+          <MenuItem href='/?help' label="Help" icon='icon-question-circle' />
+          {isLinux ? <MenuItem href="/?start" label="Exit LBRY" icon="icon-close" />
+                   : null}
+        </Menu>
       </div>
     );
   }