Popup menu expansion for account/address (#1896)

* Popup menu expansion for account/address

* Add chain locking to settings

* Swap top tag location

packages/app-accounts/src/Account.tsx

@@ -6,9 +6,8 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useState, useEffect } from 'react';
-import { Popup } from 'semantic-ui-react';
 import styled from 'styled-components';
-import { AddressCard, AddressInfo, Button, ChainLock, Forget, Menu } from '@polkadot/react-components';
+import { AddressCard, AddressInfo, Button, ChainLock, Forget, Menu, Popup } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
 import Backup from './modals/Backup';
@@ -47,8 +46,8 @@ function Account ({ address, className, t }: Props): React.ReactElement<Props> {
   const _toggleDerive = (): void => setIsDeriveOpen(!isDeriveOpen);
   const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen);
   const _togglePass = (): void => setIsPasswordOpen(!isPasswordOpen);
-  const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
   const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen);
+  const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
   const _onForget = (): void => {
     if (!address) {
       return;
@@ -83,33 +82,6 @@ function Account ({ address, className, t }: Props): React.ReactElement<Props> {
       buttons={
         <div className='accounts--Account-buttons buttons'>
           <div className='actions'>
-            {isEditable && !isDevelopment && (
-              <Button
-                isNegative
-                onClick={_toggleForget}
-                icon='trash'
-                size='small'
-                tooltip={t('Forget this account')}
-              />
-            )}
-            {isEditable && !isExternal && !isDevelopment && (
-              <>
-                <Button
-                  icon='cloud download'
-                  isPrimary
-                  onClick={_toggleBackup}
-                  size='small'
-                  tooltip={t('Create a backup file for this account')}
-                />
-                <Button
-                  icon='key'
-                  isPrimary
-                  onClick={_togglePass}
-                  size='small'
-                  tooltip={t("Change this account's password")}
-                />
-              </>
-            )}
             <Button
               icon='paper plane'
               isPrimary
@@ -118,42 +90,62 @@ function Account ({ address, className, t }: Props): React.ReactElement<Props> {
               size='small'
               tooltip={t('Send funds from this account')}
             />
-            {isEditable && !isExternal && (
-              <Popup
-                onClose={_toggleSettingPopup}
-                open={isSettingPopupOpen}
-                position='bottom left'
-                trigger={
-                  <Button
-                    icon='setting'
-                    onClick={_toggleSettingPopup}
-                    size='small'
-                  />
-                }
-              >
-                <Menu
-                  vertical
-                  text
+            <Popup
+              className='theme--default'
+              onClose={_toggleSettingPopup}
+              open={isSettingPopupOpen}
+              position='bottom right'
+              trigger={
+                <Button
+                  icon='setting'
                   onClick={_toggleSettingPopup}
+                  size='small'
+                />
+              }
+            >
+              <Menu
+                vertical
+                text
+                onClick={_toggleSettingPopup}
+              >
+                <Menu.Item
+                  disabled={!isEditable || isExternal}
+                  onClick={_toggleDerive}
                 >
-                  <Menu.Item onClick={_toggleDerive}>
-                    {t('Derive account from source')}
-                  </Menu.Item>
-                  <Menu.Item disabled>
-                    {t('Change on-chain nickname')}
-                  </Menu.Item>
-                </Menu>
-              </Popup>
-            )}
+                  {t('Derive account from source')}
+                </Menu.Item>
+                <Menu.Item disabled>
+                  {t('Change on-chain nickname')}
+                </Menu.Item>
+                <Menu.Item
+                  disabled={!isEditable || isExternal || isDevelopment}
+                  onClick={_toggleBackup}
+                >
+                  {t('Create a backup file for this account')}
+                </Menu.Item>
+                <Menu.Item
+                  disabled={!isEditable || isExternal || isDevelopment}
+                  onClick={_togglePass}
+                >
+                  {t("Change this account's password")}
+                </Menu.Item>
+                <Menu.Item
+                  disabled={!isEditable || isDevelopment}
+                  onClick={_toggleForget}
+                >
+                  {t('Forget this account')}
+                </Menu.Item>
+                <Menu.Divider />
+                <ChainLock
+                  className='accounts--network-toggle'
+                  genesisHash={genesisHash}
+                  isDisabled={!isEditable || isExternal}
+                  onChange={_onGenesisChange}
+                  preventDefault
+                />
+              </Menu>
+            </Popup>
           </div>
-          {isEditable && !isExternal && (
-            <div className='others'>
-              <ChainLock
-                genesisHash={genesisHash}
-                onChange={_onGenesisChange}
-              />
-            </div>
-          )}
         </div>
       }
       className={className}
@@ -217,11 +209,6 @@ export default translate(
   styled(Account)`
     .accounts--Account-buttons {
       text-align: right;
-
-      .others {
-        margin-right: 0.125rem;
-        margin-top: 0.25rem;
-      }
     }
   `
 );

packages/app-address-book/src/Address.tsx

@@ -8,7 +8,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { AddressCard, AddressInfo, Button, ChainLock, Forget } from '@polkadot/react-components';
+import { AddressCard, AddressInfo, Button, ChainLock, Forget, Menu, Popup } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
 import Transfer from '@polkadot/app-accounts/modals/Transfer';
@@ -29,6 +29,7 @@ function Address ({ address, className, t }: Props): React.ReactElement<Props> {
   const [current, setCurrent] = useState<KeyringAddress | null>(null);
   const [genesisHash, setGenesisHash] = useState<string | null>(null);
   const [isForgetOpen, setIsForgetOpen] = useState(false);
+  const [isSettingPopupOpen, setIsSettingPopupOpen] = useState(false);
   const [isTransferOpen, setIsTransferOpen] = useState(false);
 
   useEffect((): void => {
@@ -39,6 +40,7 @@ function Address ({ address, className, t }: Props): React.ReactElement<Props> {
   }, []);
 
   const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen);
+  const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen);
   const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
   const _onForget = (): void => {
     if (address) {
@@ -72,16 +74,6 @@ function Address ({ address, className, t }: Props): React.ReactElement<Props> {
       buttons={
         <div className='addresses--Address-buttons buttons'>
           <div className='actions'>
-            {isEditable && (
-              <Button
-                isNegative
-                onClick={_toggleForget}
-                icon='trash'
-                key='forget'
-                size='small'
-                tooltip={t('Forget this address')}
-              />
-            )}
             <Button
               icon='paper plane'
               isPrimary
@@ -91,15 +83,41 @@ function Address ({ address, className, t }: Props): React.ReactElement<Props> {
               size='small'
               tooltip={t('Send funds to this address')}
             />
+            <Popup
+              className='theme--default'
+              onClose={_toggleSettingPopup}
+              open={isSettingPopupOpen}
+              position='bottom right'
+              trigger={
+                <Button
+                  icon='setting'
+                  onClick={_toggleSettingPopup}
+                  size='small'
+                />
+              }
+            >
+              <Menu
+                vertical
+                text
+                onClick={_toggleSettingPopup}
+              >
+                <Menu.Item
+                  disabled={!isEditable}
+                  onClick={_toggleForget}
+                >
+                  {t('Forget this address')}
+                </Menu.Item>
+                <Menu.Divider />
+                <ChainLock
+                  className='addresses--network-toggle'
+                  genesisHash={genesisHash}
+                  isDisabled={!isEditable}
+                  onChange={_onGenesisChange}
+                  preventDefault
+                />
+              </Menu>
+            </Popup>
           </div>
-          {isEditable && (
-            <div className='others'>
-              <ChainLock
-                genesisHash={genesisHash}
-                onChange={_onGenesisChange}
-              />
-            </div>
-          )}
         </div>
       }
       className={className}
@@ -143,11 +161,6 @@ export default translate(
   styled(Address)`
     .addresses--Address-buttons {
       text-align: right;
-
-      .others {
-        margin-right: 0.125rem;
-        margin-top: 0.25rem;
-      }
     }
   `
 );

packages/app-staking/src/Actions/Account/index.tsx

@@ -9,10 +9,9 @@ import { I18nProps } from '@polkadot/react-components/types';
 import { AccountId, Exposure, StakingLedger, ValidatorPrefs } from '@polkadot/types/interfaces';
 import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
 
-import { Popup } from 'semantic-ui-react';
 import React from 'react';
 import styled from 'styled-components';
-import { AddressCard, AddressInfo, AddressMini, AddressRow, Button, Menu, OnlineStatus, TxButton } from '@polkadot/react-components';
+import { AddressCard, AddressInfo, AddressMini, AddressRow, Button, Menu, OnlineStatus, Popup, TxButton } from '@polkadot/react-components';
 import { withCalls, withMulti } from '@polkadot/react-api';
 
 import BondExtra from './BondExtra';

packages/react-components/src/ChainLock.tsx

@@ -5,6 +5,7 @@
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
+import styled from 'styled-components';
 import { useApiContext } from '@polkadot/react-hooks';
 
 import translate from './translate';
@@ -13,10 +14,12 @@ import Toggle from './Toggle';
 interface Props extends I18nProps {
   className?: string;
   genesisHash: string | null;
+  isDisabled?: boolean;
   onChange: (genesisHash: string | null) => void;
+  preventDefault?: boolean;
 }
 
-function ChainLock ({ genesisHash, onChange, t }: Props): React.ReactElement<Props> | null {
+function ChainLock ({ className, genesisHash, isDisabled, onChange, preventDefault, t }: Props): React.ReactElement<Props> | null {
   const { isDevelopment, api } = useApiContext();
 
   if (isDevelopment) {
@@ -33,15 +36,22 @@ function ChainLock ({ genesisHash, onChange, t }: Props): React.ReactElement<Pro
 
   return (
     <Toggle
+      className={className}
       defaultValue={isTiedToChain}
+      isDisabled={isDisabled}
       label={
         isTiedToChain
           ? t('only this network')
           : t('use on any network')
       }
       onChange={_onChange}
+      preventDefault={preventDefault}
     />
   );
 }
 
-export default translate(ChainLock);
+export default translate(
+  styled(ChainLock)`
+    text-align: right;
+  `
+);

packages/react-components/src/Popup.tsx

@@ -0,0 +1,7 @@
+// Copyright 2017-2019 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Popup } from 'semantic-ui-react';
+
+export default Popup;

packages/react-components/src/Toggle.tsx

@@ -14,11 +14,17 @@ interface Props extends BareProps {
   isDisabled?: boolean;
   label: React.ReactNode;
   onChange?: (isChecked: boolean) => void;
+  preventDefault?: boolean;
   value?: boolean;
 }
 
-function Toggle ({ className, asSwitch = true, defaultValue, isDisabled, onChange, value, label }: Props): React.ReactElement<Props> {
-  const _onChange = (_: React.FormEvent<HTMLInputElement>, { checked }: any): void => {
+function Toggle ({ className, asSwitch = true, defaultValue, isDisabled, onChange, preventDefault, value, label }: Props): React.ReactElement<Props> {
+  const _onChange = (event: React.FormEvent<HTMLInputElement>, { checked }: any): void => {
+    if (preventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
     onChange && onChange(checked);
   };
 

packages/react-components/src/index.tsx

@@ -63,6 +63,7 @@ export { default as Modal } from './Modal';
 export { default as Nonce } from './Nonce';
 export { default as Output } from './Output';
 export { default as Password } from './Password';
+export { default as Popup } from './Popup';
 export { default as Progress } from './Progress';
 export { default as ProposedAction } from './ProposedAction';
 export { default as OnlineStatus } from './OnlineStatus';