close modals on esc or overlay click

react/src/components/addcoin/addcoin.js

@@ -181,14 +181,15 @@ class AddCoin extends React.Component {
           src={ `/assets/images/cryptologo/${option.icon.toLowerCase()}.png` }
           alt={ option.label }
           width="30px"
-          height="30px"/>
+          height="30px" />
           <span className="margin-left-10">{ option.label }</span>
       </div>
     );
   }
 
   updateSelectedCoin(e, index) {
-    if (e.value &&
+    if (e &&
+        e.value &&
         e.value.indexOf('|')) {
       const coin = e.value.split('|');
       const defaultMode = coin[1];
@@ -242,6 +243,7 @@ class AddCoin extends React.Component {
   }
 
   handleKeydown(e) {
+    console.warn(e);
     if (e.key === 'Escape') {
       this.dismiss();
     }

react/src/components/addcoin/addcoin.render.js

@@ -7,7 +7,13 @@ const AddCoinRender = function() {
   return (
     <div onKeyDown={ (event) => this.handleKeydown(event) }>
       <div className={ `modal modal-3d-sign add-coin-modal ${this.state.modalClassName}` }>
+        <div
+          onClick={ this.dismiss }
+          className="modal-close-overlay"></div>
         <div className="modal-dialog modal-center modal-lg">
+          <div
+            onClick={ this.dismiss }
+            className="modal-close-overlay"></div>
           <div className="modal-content">
             <div className="modal-header bg-orange-a400 wallet-send-header">
               <button

react/src/components/addcoin/addcoin.scss

@@ -38,41 +38,6 @@
       }
     }
   }
-
-  .Select {
-    cursor: pointer;
-
-    * { color: #757575 !important; }
-
-    .Select-clear {
-      display: none;
-    }
-    .Select-control {
-      height: 40px !important;
-
-      .Select-placeholder,
-      .Select-value {
-        line-height: 36px !important;
-      }
-    }
-  }
-  .Select-menu-outer {
-    max-height: 253px !important;
-  }
-  .Select-menu {
-    max-height: 250px !important;
-  }
-  .Select.is-open,
-  .Select.is-focused {
-    .Select-control {
-      border-color: #FF6600 !important;
-      box-shadow: none !important;
-    }
-    .Select-menu-outer {
-      border-color: #FF6600 !important;
-      border-top-color: #d9d9d9 !important;
-    }
-  }
 }
 
 .vertical-margin-20 {

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

@@ -162,7 +162,13 @@ export const ClaimInterestModalRender = function() {
   return (
     <span onClick={ this.closeDropMenu }>
       <div className={ 'modal modal-claim-interest modal-3d-sign ' + (this.state.open ? 'show in' : 'fade hide') }>
+        <div
+          onClick={ this.closeModal }
+          className="modal-close-overlay"></div>
         <div className="modal-dialog modal-center modal-sm">
+          <div
+            onClick={ this.closeModal }
+            className="modal-close-overlay"></div>
           <div className="modal-content">
             <div className="modal-header bg-orange-a400 wallet-send-header">
               <button

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

@@ -13,7 +13,13 @@ const CoindDownModalRender = function() {
       <div
         className={ 'modal modal-3d-sign coind-down-modal ' + (this.state.display ? 'show in' : 'fade hide') }
         id="AddCoinDilogModel-login">
+        <div
+          onClick={ this.dismiss }
+          className="modal-close-overlay"></div>
         <div className="modal-dialog modal-center modal-lg">
+          <div
+            onClick={ this.dismiss }
+            className="modal-close-overlay"></div>
           <div className="modal-content">
             <div className="modal-header bg-orange-a400 wallet-send-header">
               <button

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

@@ -5,7 +5,13 @@ export const ImportKeyModalRender = function() {
   return (
     <span>
       <div className={ 'modal modal-import-key modal-3d-sign ' + (this.props.Dashboard.displayImportKeyModal ? 'show in' : 'fade hide') }>
+        <div
+          onClick={ this.closeModal }
+          className="modal-close-overlay"></div>
         <div className="modal-dialog modal-center modal-sm">
+          <div
+            onClick={ this.closeModal }
+            className="modal-close-overlay"></div>
           <div className="modal-content">
             <div className="modal-header bg-orange-a400 wallet-send-header">
               <button

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

@@ -8,7 +8,13 @@ export const InvoiceModalRender = function() {
       <div
         className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
         id="QRModal">
+        <div
+          onClick={ this.closeModal }
+          className="modal-close-overlay"></div>
         <div className="modal-dialog modal-center modal-lg">
+          <div
+            onClick={ this.closeModal }
+            className="modal-close-overlay"></div>
           <div className="modal-content">
             <div className="modal-header bg-orange-a400 wallet-send-header">
               <button

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

@@ -7,7 +7,13 @@ export const LoginSettingsModalRender = function() {
   return (
     <div>
       <div className="modal show login-settings-modal ff">
+        <div
+          onClick={ this.closeLoginSettingsModal }
+          className="modal-close-overlay"></div>
         <div className="modal-dialog modal-center modal-lg">
+          <div
+            onClick={ this.closeLoginSettingsModal }
+            className="modal-close-overlay"></div>
           <div className="modal-content">
             <div className="modal-body modal-body-container">
               { this.props.section === 'settings' &&

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

@@ -75,6 +75,11 @@ const NavbarRender = function() {
                 </a>
               </li>
             }
+            { /*<li className={ this.isSectionActive('explorer') ? 'active nav-top-menu' : 'nav-top-menu' }>
+              <a onClick={ () => this.dashboardChangeSection('exporer') }>
+                <i className="site-menu-icon"></i> Explorer
+              </a>
+            </li>*/ }
           </ul>
           <ul className="nav navbar-toolbar navbar-right navbar-toolbar-right">
             <li>

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

@@ -66,7 +66,13 @@ export const QRModalReaderRender = function() {
         <div
           className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
           id="QRReadModal">
+          <div
+            onClick={ this.closeModal }
+            className="modal-close-overlay"></div>
             <div className="modal-dialog modal-center modal-md">
+              <div
+                onClick={ this.closeModal }
+                className="modal-close-overlay"></div>
               <div className="modal-content">
                 <div className="modal-header bg-orange-a400 wallet-send-header">
                   <button

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

@@ -9,7 +9,13 @@ const WalletsTxInfoRender = function(txInfo) {
       <div
         className="modal show"
         id="kmd_txid_info_mdl">
+        <div
+          onClick={ this.toggleTxInfoModal }
+          className="modal-close-overlay"></div>
         <div className="modal-dialog modal-center modal-lg">
+          <div
+            onClick={ this.toggleTxInfoModal }
+            className="modal-close-overlay"></div>
           <div className="modal-content">
             <div className="modal-body modal-body-container">
               <div className="panel nav-tabs-horizontal">

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

@@ -5,7 +5,13 @@ const ZcparamsFetchModalRender = function() {
   return (
     <div>
       <div className={ 'modal modal-3d-sign zcparams-fetch-modal ' + (this.state.display ? 'show in' : 'fade hide') }>
+        <div
+          onClick={ this.dismiss }
+          className="modal-close-overlay"></div>
         <div className="modal-dialog modal-center modal-lg">
+          <div
+            onClick={ this.dismiss }
+            className="modal-close-overlay"></div>
           <div className="modal-content">
             <div className="modal-header bg-orange-a400 wallet-send-header">
               <button

react/src/components/main/walletMain.js

@@ -6,8 +6,51 @@ import Login from '../login/login';
 import Dashboard from '../dashboard/main/dashboard';
 import DexMain from '../dex/dexMain';
 import mainWindow from '../../util/mainWindow';
+import Store from '../../store';
+import {
+  toggleDashboardTxInfoModal,
+  toggleAddcoinModal,
+  toggleZcparamsFetchModal,
+  toggleClaimInterestModal,
+  toggleCoindDownModal,
+  displayImportKeyModal,
+} from '../../actions/actionCreators';
 
 class WalletMain extends React.Component {
+  componentDidMount() {
+    // handle esc key globally
+    document.onkeydown = (evt) => {
+      evt = evt || window.event;
+
+      let isEscape = false;
+
+      if ('key' in evt) {
+        isEscape = (evt.key === 'Escape' || evt.key === 'Esc');
+      } else {
+        isEscape = (evt.keyCode === 27);
+      }
+
+      // TODO: qr modal
+      if (isEscape) {
+        if (this.props.activeModals.showTransactionInfo) {
+          Store.dispatch(toggleDashboardTxInfoModal(false));
+        } else if (this.props.activeModals.displayZcparamsModal) {
+          Store.dispatch(toggleZcparamsFetchModal(false));
+        } else if (this.props.activeModals.displayClaimInterestModal) {
+          Store.dispatch(toggleClaimInterestModal(false));
+        } else if (this.props.activeModals.displayCoindDownModal) {
+          Store.dispatch(toggleCoindDownModal(false));
+        } else if (this.props.activeModals.displayImportKeyModal) {
+          Store.dispatch(displayImportKeyModal(false));
+        } else if (this.props.activeModals.displayAddCoinModal) {
+          Store.dispatch(toggleAddcoinModal(false, false));
+        } else if (this.props.activeModals.displayLoginSettingsModal) {
+          Store.dispatch(toggleLoginSettingsModal(false));
+        }
+      }
+    };
+  }
+
   render() {
     if (mainWindow.argv.indexOf('dexonly') > -1) {
       return (
@@ -37,6 +80,15 @@ class WalletMain extends React.Component {
 const mapStateToProps = (state) => {
   return {
     toaster: state.toaster,
+    activeModals: {
+      showTransactionInfo: state.ActiveCoin.showTransactionInfo,
+      displayClaimInterestModal: state.Dashboard.displayClaimInterestModal,
+      displayCoindDownModal: state.Dashboard.displayCoindDownModal,
+      displayImportKeyModal: state.Dashboard.displayImportKeyModal,
+      displayZcparamsModal: state.Dashboard.displayZcparamsModal,
+      displayAddCoinModal: state.AddCoin.display,
+      displayLoginSettingsModal: state.Main.displayLoginSettingsModal,
+    },
   };
 };
 

react/src/components/overrides.scss

@@ -631,4 +631,50 @@ select{
   right: 38px;
   top: 0;
   transform: scale(0.5);
+}
+
+.Select {
+  cursor: pointer;
+
+  * { color: #757575 !important; }
+
+  .Select-clear {
+    display: none;
+  }
+  .Select-control {
+    height: 40px !important;
+
+    .Select-placeholder,
+    .Select-value {
+      line-height: 36px !important;
+    }
+  }
+}
+.Select-menu-outer {
+  max-height: 253px !important;
+}
+.Select-menu {
+  max-height: 250px !important;
+}
+.Select.is-open,
+.Select.is-focused {
+  .Select-control {
+    border-color: #FF6600 !important;
+    box-shadow: none !important;
+  }
+  .Select-menu-outer {
+    border-color: #FF6600 !important;
+    border-top-color: #d9d9d9 !important;
+  }
+}
+
+.modal-close-overlay {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.navbar-fixed-bottom,
+.navbar-fixed-top {
+  z-index: 100;
 }

react/src/store.js

@@ -10,9 +10,6 @@ import rootReducer from './reducers/index';
 const loggerMiddleware = createLogger();
 
 const defaultState = {
-  toaster: null,
-  AddCoin: null,
-  Main: null,
 };
 
 // const enhancers = compose(window.devToolsExtension ? window.devToolsExtension() : f => f);