refactor coin tile actions as menu

react/src/components/dashboard/coinTile/coinTileItem.js

@@ -46,8 +46,55 @@ class CoinTileItem extends React.Component {
       activeCoin: null,
       activeCoinMode: null,
       propsUpdatedCounter: 0,
+      toggledCoinMenu: null,
     };
     this.autoSetActiveCoin = this.autoSetActiveCoin.bind(this);
+    this.toggleCoinMenu = this.toggleCoinMenu.bind(this);
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
+
+  componentWillMount() {
+    const appConfig = mainWindow.appConfig;
+
+    if (!this.props.ActiveCoin.coin) {
+      this.autoSetActiveCoin();
+    }
+
+    this.setState({
+      appConfig,
+    });
+
+    document.addEventListener(
+      'click',
+      this.handleClickOutside,
+      false
+    );
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(
+      'click',
+      this.handleClickOutside,
+      false
+    );
+  }
+
+  handleClickOutside(e) {
+    if (e &&
+        e.srcElement &&
+        e.srcElement.offsetParent &&
+        e.srcElement.offsetParent.className.indexOf('dropdown') === -1 &&
+      (e.srcElement.offsetParent && e.srcElement.offsetParent.className.indexOf('dropdown') === -1)) {
+      this.setState({
+        toggledCoinMenu: e.srcElement.className.indexOf('coin-tile-context-menu-trigger') === -1 ? null : this.state.toggledCoinMenu,
+      });
+    }
+  }
+
+  toggleCoinMenu(coin) {
+    this.setState({
+      toggledCoinMenu: this.state.toggledCoinMenu === coin ? null : coin,
+    });
   }
 
   openCoindDownModal() {
@@ -130,19 +177,11 @@ class CoinTileItem extends React.Component {
     }
   }
 
-  componentWillMount() {
-    if (!this.props.ActiveCoin.coin) {
-      this.autoSetActiveCoin();
-    }
-
-    const appConfig = mainWindow.appConfig;
-
+  removeCoin(coin, mode) {
     this.setState({
-      appConfig,
+      toggledCoinMenu: null,
     });
-  }
 
-  removeCoin(coin, mode) {
     shepherdRemoveCoin(coin, mode)
     .then((res) => {
       Store.dispatch(
@@ -163,6 +202,10 @@ class CoinTileItem extends React.Component {
   }
 
   stopCoind(coin) {
+    this.setState({
+      toggledCoinMenu: null,
+    });
+
     shepherdStopCoind(coin)
     .then((res) => {
       if (res.msg === 'error') {

react/src/components/dashboard/coinTile/coinTileItem.render.js

@@ -24,17 +24,41 @@ const CoinTileItemRender = function() {
           </div>
         </div>
       </div>
-      { this.renderStopCoinButton() &&
+      <button
+        onClick={ () => this.toggleCoinMenu(item.coin) }
+        className="btn btn-default btn-xs clipboard-edexaddr coin-tile-context-menu-trigger coind-actions-menu">
+        <i
+          title="Toggle coin context menu"
+          className="fa fa-ellipsis-v coin-tile-context-menu-trigger"></i>
+      </button>
+      { this.state.toggledCoinMenu &&
+        this.state.toggledCoinMenu === item.coin &&
+        <div className="coin-tile-context-menu">
+          <ul>
+            { this.renderStopCoinButton() &&
+              <li onClick={ () => this.stopCoind(item.coin, item.mode) }>
+                <i className="icon fa-stop-circle margin-right-5"></i> { translate('DASHBOARD.STOP') }
+              </li>
+            }
+            { this.renderRemoveCoinButton() &&
+              <li onClick={ () => this.removeCoin(item.coin, item.mode) }>
+                <i className="icon fa-trash-o margin-right-5"></i> { translate('DASHBOARD.REMOVE') }
+              </li>
+            }
+          </ul>
+        </div>
+      }
+      { /*this.renderStopCoinButton() &&
         <i
           onClick={ () => this.stopCoind(item.coin, item.mode) }
           title={ translate('DASHBOARD.STOP') }
-          className="icon fa-stop-circle coind-stop-icon"></i>
+          className="icon fa-stop-circle coind-stop-icon"></i>*/
       }
-      { this.renderRemoveCoinButton() &&
+      { /*this.renderRemoveCoinButton() &&
         <i
           onClick={ () => this.removeCoin(item.coin, item.mode) }
           title={ translate('DASHBOARD.REMOVE') }
-          className={ 'icon fa-plus-circle coind-remove-icon' + (item.mode === 'spv' ? ' coind-remove-icon-spv' : '') }></i>
+          className={ 'icon fa-plus-circle coind-remove-icon' + (item.mode === 'spv' ? ' coind-remove-icon-spv' : '') }></i>*/
       }
       { this.props.Dashboard &&
         this.props.Dashboard.electrumCoins &&

react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { translate } from '../../../translate/translate';
 import { secondsToString } from '../../../util/time';
 import Config from '../../../config';
+import { isKomodoCoin } from '../../../util/coinHelper';
 
 const WalletsTxInfoRender = function(txInfo) {
   return (
@@ -190,6 +191,7 @@ const WalletsTxInfoRender = function(txInfo) {
             <div className="modal-footer">
               { this.state.txDetails &&
                 this.props.ActiveCoin.coin !== 'CHIPS' &&
+                isKomodoCoin(this.props.ActiveCoin.coin) &&
                 <button
                   type="button"
                   className="btn btn-sm white btn-dark waves-effect waves-light pull-left"

react/src/components/overrides.scss

@@ -549,7 +549,8 @@ select{
   background-image: none !important;
 }
 
-.receive-address-context-menu {
+.receive-address-context-menu,
+.coin-tile-context-menu {
   box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.4);
   background: #fff;
   position: absolute;
@@ -696,4 +697,19 @@ select{
       top: -2px;
     }
   }
+}
+
+.coind-actions-menu {
+  position: absolute;
+  top: 22px;
+  left: 20px;
+}
+
+.coin-tile-context-menu {
+  top: 45px;
+  left: -34px;
+
+  li {
+    color: #757575;
+  }
 }