Merge pull request #356 from paritytech/luke-264-account-screen-menu-alternative

feat: Relates to #264. SUI-based 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, Clickable, MenuPopup } from 'fether-ui';
 import { Link, withRouter } from 'react-router-dom';
 
 import Health from '../Health';
@@ -14,12 +14,37 @@ import withAccount from '../utils/withAccount';
 @withRouter
 @withAccount
 class Tokens extends PureComponent {
-  handleGoToBackup = () => {
-    this.props.history.push(`/backup/${this.props.account.address}`);
+  isParitySignerAccount = () => {
+    const {
+      account: { type }
+    } = this.props;
+
+    return type === 'signer';
   };
 
-  handleGoToWhitelist = () => {
-    this.props.history.push(`/whitelist/${this.props.account.address}`);
+  menuItems = () => {
+    const {
+      account: { address },
+      history
+    } = this.props;
+
+    const backupAccountItem = {
+      name: 'Backup Account',
+      onClick: () => history.push(`/backup/${address}`)
+    };
+
+    const menuItems = [
+      {
+        name: 'Add Tokens',
+        onClick: () => history.push(`/whitelist/${address}`)
+      }
+    ];
+
+    if (this.isParitySignerAccount() === false) {
+      menuItems.unshift(backupAccountItem);
+    }
+
+    return menuItems;
   };
 
   render () {
@@ -28,7 +53,7 @@ class Tokens extends PureComponent {
     } = this.props;
 
     return (
-      <div>
+      <div className='tokens'>
         <AccountHeader
           address={address}
           copyAddress
@@ -39,6 +64,15 @@ class Tokens extends PureComponent {
               Back
             </Link>
           }
+          right={
+            <MenuPopup
+              className='popup-menu-account'
+              horizontalOffset={1}
+              menuItems={this.menuItems()}
+              size='small'
+              trigger={<Clickable className='icon -menu' />}
+            />
+          }
         />
 
         <TokensList />
@@ -47,17 +81,6 @@ class Tokens extends PureComponent {
           <div className='footer-nav_status'>
             <Health />
           </div>
-          <div className='footer-nav_icons'>
-            {// Hide option to do a backup if this is a Parity Signer account
-              type === 'node' && (
-                <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/img/icons/menu.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32.055 32.055" style="enable-background:new 0 0 32.055 32.055;" xml:space="preserve">
+<g>
+	<path d="M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967
+		C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967
+		s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967
+		c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z"/>
+</g>
+</svg>

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

@@ -48,6 +48,7 @@
     margin: -0.175rem 0 -0.175rem;
     padding: 0.25rem 0.5rem 0.175rem;
     border-radius: 0.25rem;
+
     &:hover {
       background: rgba($faint, 0.5);
       color: $black;
@@ -61,6 +62,7 @@
       background-position: center center;
       background-repeat: no-repeat;
       opacity: 0.675;
+
       &:hover {
         opacity: 1;
       }
@@ -84,6 +86,10 @@
       &.-new {
         background-image: url('./assets/img/icons/plus.svg');
       }
+
+      &.-menu {
+        background-image: url('./assets/img/icons/menu.svg');
+      }
     }
   }
 }

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

+.popup-menu-account {
+  /* Override SUI popup styles so popup does not appear above menu icon */
+  background: $white !important;
+  bottom: auto !important;
+  line-height: 1.9rem !important;
+  max-width: 205px !important; /* Allow space between items and scrollbar */
+  max-height: 220px;
+  padding: 0px !important; /* Allow menu items to take up full width*/
+  top: 3px !important;
+
+  .popup-screen {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    max-height: 195px;
+    overflow-y: auto;
+  }
+
+  .popup-screen_item {
+    background: $white;
+    color: rgba($black, 0.675);
+    font-weight: 500;
+    padding-left: 15px;
+    padding-right: 15px;
+
+    &:hover {
+      background: rgba($faint, 0.5);
+      color: $black;
+      cursor: pointer;
+    }
+  }
+}
\ No newline at end of file

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

+.tokens {
+  position: relative;
+}
+
 .token {
   display: flex;
   align-items: center;

packages/fether-react/src/index.sass

@@ -28,6 +28,7 @@
 @import './assets/sass/components/header-nav'
 @import './assets/sass/components/footer-nav'
 @import './assets/sass/components/placeholder'
+@import './assets/sass/components/popup'
 @import './assets/sass/components/progress-indicator'
 @import './assets/sass/components/form-nav'
 @import './assets/sass/components/alert-screen'

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

+// 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';
+import { Popup as SUIPopup } from 'semantic-ui-react';
+
+export const MenuPopup = ({ menuItems, ...otherProps }) => (
+  <SUIPopup {...otherProps}>
+    <div className='popup-screen'>
+      <SUIPopup.Content>
+        {menuItems &&
+          menuItems.map(item => (
+            <div
+              className='popup-screen_item'
+              key={item.name}
+              onClick={item.onClick}
+            >
+              {item.name}
+            </div>
+          ))}
+      </SUIPopup.Content>
+    </div>
+  </SUIPopup>
+);
+
+MenuPopup.defaultProps = {
+  basic: true,
+  horizontalOffset: 0,
+  on: 'click',
+  size: 'large'
+};
+
+MenuPopup.propTypes = {
+  basic: PropTypes.bool, // toggles popup arrow
+  className: PropTypes.string,
+  horizontalOffset: PropTypes.number,
+  menuItems: PropTypes.array.isRequired,
+  on: PropTypes.string,
+  size: PropTypes.string,
+  trigger: PropTypes.node
+};

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

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

packages/fether-ui/src/index.js

@@ -11,5 +11,6 @@ export * from './Clickable';
 export * from './Form';
 export * from './Header';
 export * from './Placeholder';
+export * from './MenuPopup';
 export * from './TokenCard';
 export * from './utils';