feat: Relates to #264. Add drop-down menu with Backup Account and Add Tokens

packages/fether-react/src/Tokens/Tokens.js

@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React, { PureComponent } from 'react';
-import { AccountHeader } from 'fether-ui';
+import { AccountHeader, Modal } from 'fether-ui';
 import { accountsInfo$ } from '@parity/light.js';
 import light from '@parity/light.js-react';
 import { Link, Redirect, withRouter } from 'react-router-dom';
@@ -19,6 +19,22 @@ import withAccount from '../utils/withAccount';
   accountsInfo: accountsInfo$
 })
 class Tokens extends PureComponent {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      isModalOpen: false
+    };
+  }
+
+  handleOpenModal = () => {
+    this.setState({ isModalOpen: true });
+  };
+
+  handleCloseModal = () => {
+    this.setState({ isModalOpen: false });
+  };
+
   handleGoToBackup = () => {
     this.props.history.push(`/backup/${this.props.accountAddress}`);
   };
@@ -29,6 +45,7 @@ class Tokens extends PureComponent {
 
   render () {
     const { accountsInfo, accountAddress } = this.props;
+    const { isModalOpen } = this.state;
 
     // If the accountsInfo object is empty (i.e. no accounts), then we redirect
     // to the accounts page to create an account
@@ -38,6 +55,14 @@ class Tokens extends PureComponent {
 
     return (
       <div>
+        <Modal open={isModalOpen} onClose={this.handleCloseModal}>
+          <div className='modal-item' onClick={this.handleGoToBackup}>
+            Backup Account
+          </div>
+          <div className='modal-item' onClick={this.handleGoToWhitelist}>
+            Add Tokens
+          </div>
+        </Modal>
         <AccountHeader
           address={accountAddress}
           copyAddress
@@ -51,6 +76,11 @@ class Tokens extends PureComponent {
               Back
             </Link>
           }
+          right={
+            <a className='icon -more' onClick={this.handleOpenModal}>
+              Menu
+            </a>
+          }
         />
 
         <TokensList />
@@ -59,14 +89,6 @@ class Tokens extends PureComponent {
           <div className='footer-nav_status'>
             <Health />
           </div>
-          <div className='footer-nav_icons'>
-            <button className='button -tiny' onClick={this.handleGoToBackup}>
-              Backup Account
-            </button>
-            <button className='button -tiny' onClick={this.handleGoToWhitelist}>
-              Add tokens
-            </button>
-          </div>
         </nav>
       </div>
     );

packages/fether-react/src/assets/sass/components/_header-nav.scss

@@ -84,6 +84,10 @@
       &.-new {
         background-image: url('./assets/img/icons/plus.svg');
       }
+
+      &.-more {
+        background-image: url('./assets/img/icons/three-dots.svg');
+      }
     }
   }
 }

packages/fether-react/src/assets/sass/components/_modal.scss

@@ -0,0 +1,61 @@
+.modal-wrapper {
+  position: relative;
+}
+
+.modal-close {
+  transition: background-color 1.0s ease;
+  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
+  position: fixed; /* Sit on top of the page content */
+  width: 100%; /* Full width (cover the whole page) */
+  height: 100%; /* Full height (cover the whole page) */
+  display: none; /* Hidden by default */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10; /* Stack over must be higher than z-index of .header-nav */
+  cursor: pointer;
+}
+
+.modal-close:hover {
+  background-color: rgba(0,0,0,0.3);
+}
+
+.modal {
+  transition: border 0.05s linear;
+  background: $eggshell;
+  border: 0px solid $eggshell;
+  border-radius: 4px;
+  box-shadow: 0 0.250rem 0.5rem rgba($black, 0.300);
+  position: absolute;
+  display: none; /* Hidden by default */
+  overflow: auto;
+  max-height: calc(100vh * 0.8);
+  padding: 5px 15px 5px 0px;
+  top: 44px;
+  right: 8px;
+  z-index: 11;
+
+  &:hover {
+    border: 0.5px solid $eggshell;
+    box-shadow: 0 0.250rem 0.675rem rgba($black, 0.400);
+    cursor: pointer;
+  }
+}
+
+.modal-item {
+  clear: both;
+  width: 100%;
+  display: block;
+  margin-right: 20px;
+  font-size: 1em;
+  font-weight: 500;
+  padding: 0 0 0 0.925rem;
+  line-height: 2;
+  opacity: 0.6;
+
+  &:hover {
+    opacity: 1.0;
+    background-color: transparent;
+  }
+}

packages/fether-react/src/index.sass

@@ -5,8 +5,8 @@
 
 @import './assets/sass/modules/grid'
 @import './assets/sass/modules/modular-scale'
-@import './assets/sass/modules/variables'
 @import './assets/sass/modules/reset'
+@import './assets/sass/modules/variables'
 
 +reset
 
@@ -20,16 +20,17 @@
 
 @import './assets/sass/layouts/wrapper'
 
-@import './assets/sass/components/logo'
-@import './assets/sass/components/token'
 @import './assets/sass/components/account'
 @import './assets/sass/components/accounts-list'
-@import './assets/sass/components/status'
-@import './assets/sass/components/header-nav'
+@import './assets/sass/components/alert-screen'
 @import './assets/sass/components/footer-nav'
+@import './assets/sass/components/form-nav'
+@import './assets/sass/components/header-nav'
+@import './assets/sass/components/logo'
+@import './assets/sass/components/modal'
 @import './assets/sass/components/placeholder'
 @import './assets/sass/components/progress-indicator'
-@import './assets/sass/components/form-nav'
-@import './assets/sass/components/alert-screen'
 @import './assets/sass/components/search-form'
+@import './assets/sass/components/status'
 @import './assets/sass/components/terms-and-conditions'
+@import './assets/sass/components/token'

packages/fether-ui/src/Modal/Modal.js

@@ -0,0 +1,88 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Modal extends React.PureComponent {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    onClose: PropTypes.func.isRequired,
+    open: PropTypes.bool.isRequired
+  };
+
+  constructor (props) {
+    super(props);
+
+    this.modalRef = React.createRef();
+    this.modalCloseOverlayRef = React.createRef();
+    this.state = {
+      open: false
+    };
+  }
+
+  static getDerivedStateFromProps (nextProps, prevState) {
+    if (nextProps.open !== prevState.open) {
+      return {
+        open: nextProps.open
+      };
+    }
+
+    // No state update necessary
+    return null;
+  }
+
+  componentDidMount () {
+    const modalCloseOverlayRef = this.modalCloseOverlayRef.current;
+
+    modalCloseOverlayRef.addEventListener('mouseup', this.handleClose);
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    if (prevState.open === false) {
+      this.handleOpen();
+    }
+  }
+
+  componentWillUnmount () {
+    const modalCloseOverlayRef = this.modalCloseOverlayRef.current;
+
+    modalCloseOverlayRef.addEventListener('mouseup', this.handleClose);
+  }
+
+  handleOpen = () => {
+    const modalRef = this.modalRef.current;
+    const modalCloseOverlayRef = this.modalCloseOverlayRef.current;
+
+    modalRef.style.display = 'block';
+    modalCloseOverlayRef.style.display = 'block';
+  };
+
+  handleClose = () => {
+    const { onClose } = this.props;
+    const modalRef = this.modalRef.current;
+    const modalCloseOverlayRef = this.modalCloseOverlayRef.current;
+
+    modalRef.style.display = 'none';
+    modalCloseOverlayRef.style.display = 'none';
+
+    onClose();
+  };
+
+  render () {
+    const { children } = this.props;
+
+    return (
+      <div className='modal-wrapper'>
+        <div className='modal-close' ref={this.modalCloseOverlayRef} />
+        <div className='modal' ref={this.modalRef}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+export { Modal };

packages/fether-ui/src/Modal/index.js

@@ -0,0 +1,6 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+export * from './Modal';

packages/fether-ui/src/index.js

@@ -9,5 +9,6 @@ export * from './AddressShort';
 export * from './Card';
 export * from './Form';
 export * from './Header';
+export * from './Modal';
 export * from './Placeholder';
 export * from './TokenCard';