Basics of More Options menu on My Files items

js/component/common.js

@@ -161,8 +161,8 @@ var MenuItem = React.createClass({
     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}
+      <a style={menuItemStyle} className="button-text no-underline" onClick={this.props.onClick}
-         className="button-text no-underline">
+         href={this.props.href || 'javascript:'} label={this.props.label}>
         {this.props.iconPosition == 'left' ? icon : null}
         {this.props.label}
         {this.props.iconPosition == 'left' ? null : icon}

js/page/my_files.js

@@ -1,10 +1,45 @@
-var removeIconColumnStyle = {
+var myFilesRowMoreMenuStyle = {
-  fontSize: '1.3em',
+  position: 'absolute',
+  display: 'block',
+  top: '26px',
+  left: '-13px',
+};
+var MyFilesRowMoreMenu = React.createClass({
+  onDeleteClicked: function() {
+     var alertText = 'Are you sure you\'d like to remove "' + this.props.title + '?" This will ' +
+                     (this.completed ? ' stop the download and ' : '') +
+                     'permanently remove the file from your system.';
+
+    if (confirm(alertText)) {
+      lbry.deleteFile(this.props.lbryUri);
+    }
+  },
+  render: function() {
+    return (
+      <div style={myFilesRowMoreMenuStyle}>
+        <Menu {...this.props}>
+          <MenuItem onClick={function() { alert('Make me work please!') }} label="Open in Finder" />
+          <MenuItem onClick={function() { alert('Make me work please!') }} label="Remove from LBRY" />
+          <MenuItem onClick={this.onDeleteClicked} label="Remove and delete file" />
+        </Menu>
+      </div>
+    );
+  }
+});
+
+var moreButtonColumnStyle = {
   height: '120px',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
 },
+moreButtonContainerStyle = {
+  display: 'block',
+  position: 'relative',
+},
+moreButtonStyle = {
+  fontSize: '1.3em',
+},
 progressBarStyle = {
   height: '15px',
   width: '230px',
@@ -18,17 +53,7 @@ myFilesRowImgStyle = {
   marginLeft: 'auto',
   marginRight: 'auto',
 };
-
 var MyFilesRow = React.createClass({
-  onRemoveClicked: function() {
-     var alertText = 'Are you sure you\'d like to remove "' + this.props.title + '?" This will ' +
-                     (this.completed ? ' stop the download and ' : '') +
-                     'permanently remove the file from your system.';
-
-    if (confirm(alertText)) {
-      lbry.deleteFile(this.props.lbryUri);
-    }
-  },
   onPauseResumeClicked: function() {
     if (this.props.stopped) {
       lbry.startFile(this.props.lbryUri);
@@ -71,8 +96,12 @@ var MyFilesRow = React.createClass({
           <div>{ pauseLink }</div>
           <div>{ watchButton }</div>
         </div>
-        <div className="span1" style={removeIconColumnStyle}>
+        <div className="span1" style={moreButtonColumnStyle}>
-          <Link icon="icon-close" title="Remove file" onClick={() => { this.onRemoveClicked() } } /><br />
+          <div style={moreButtonContainerStyle}>
+            <Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" />
+            <MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title}
+                                lbryUri={this.props.lbryUri} />
+          </div>
         </div>
       </div>
     );