From 8506c4514872c28bc4e3baf87daea9d3aecfc991 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 15 Nov 2019 20:14:02 +0100 Subject: [PATCH 1/3] Popup menu expansion for account/address --- packages/app-accounts/src/Account.tsx | 101 ++++++++---------- packages/app-address-book/src/Address.tsx | 33 ++++-- .../app-staking/src/Actions/Account/index.tsx | 3 +- packages/react-components/src/Popup.tsx | 7 ++ packages/react-components/src/index.tsx | 1 + 5 files changed, 77 insertions(+), 68 deletions(-) create mode 100644 packages/react-components/src/Popup.tsx diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx index 91529679a98d..84530e84d94a 100644 --- a/packages/app-accounts/src/Account.tsx +++ b/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 { 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 { buttons={
- {isEditable && !isDevelopment && ( -
{isEditable && !isExternal && (
diff --git a/packages/app-address-book/src/Address.tsx b/packages/app-address-book/src/Address.tsx index 8ae133d642fe..cbd2627de5da 100644 --- a/packages/app-address-book/src/Address.tsx +++ b/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 { const [current, setCurrent] = useState(null); const [genesisHash, setGenesisHash] = useState(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 { }, []); 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 { buttons={
- {isEditable && ( -
{isEditable && (
diff --git a/packages/app-staking/src/Actions/Account/index.tsx b/packages/app-staking/src/Actions/Account/index.tsx index e25313019b9f..bb0fdda45658 100644 --- a/packages/app-staking/src/Actions/Account/index.tsx +++ b/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'; diff --git a/packages/react-components/src/Popup.tsx b/packages/react-components/src/Popup.tsx new file mode 100644 index 000000000000..761b82f41b72 --- /dev/null +++ b/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; diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index 900bc0d4e3c3..cd51b865b917 100644 --- a/packages/react-components/src/index.tsx +++ b/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'; From a3d75e9c9f4ec0f756322926c8c3518c6a33c330 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 15 Nov 2019 20:46:21 +0100 Subject: [PATCH 2/3] Add chain locking to settings --- packages/app-accounts/src/Account.tsx | 28 +++++++-------- packages/app-address-book/src/Address.tsx | 38 +++++++++++---------- packages/react-components/src/ChainLock.tsx | 14 ++++++-- packages/react-components/src/Toggle.tsx | 10 ++++-- 4 files changed, 52 insertions(+), 38 deletions(-) diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx index 84530e84d94a..fae0c887e172 100644 --- a/packages/app-accounts/src/Account.tsx +++ b/packages/app-accounts/src/Account.tsx @@ -91,6 +91,7 @@ function Account ({ address, className, t }: Props): React.ReactElement { tooltip={t('Send funds from this account')} /> { onClick={_toggleSettingPopup} > {t('Derive account from source')} @@ -117,13 +118,13 @@ function Account ({ address, className, t }: Props): React.ReactElement { {t('Change on-chain nickname')} {t('Create a backup file for this account')} {t("Change this account's password")} @@ -134,17 +135,17 @@ function Account ({ address, className, t }: Props): React.ReactElement { > {t('Forget this account')} + +
- {isEditable && !isExternal && ( -
- -
- )}
} className={className} @@ -208,11 +209,6 @@ export default translate( styled(Account)` .accounts--Account-buttons { text-align: right; - - .others { - margin-right: 0.125rem; - margin-top: 0.25rem; - } } ` ); diff --git a/packages/app-address-book/src/Address.tsx b/packages/app-address-book/src/Address.tsx index cbd2627de5da..b8d76865a564 100644 --- a/packages/app-address-book/src/Address.tsx +++ b/packages/app-address-book/src/Address.tsx @@ -84,6 +84,7 @@ function Address ({ address, className, t }: Props): React.ReactElement { tooltip={t('Send funds to this address')} /> { /> } > - - {t('Forget this address')} - + + {t('Forget this address')} + + + +
- {isEditable && ( -
- -
- )}
} className={className} @@ -154,11 +161,6 @@ export default translate( styled(Address)` .addresses--Address-buttons { text-align: right; - - .others { - margin-right: 0.125rem; - margin-top: 0.25rem; - } } ` ); diff --git a/packages/react-components/src/ChainLock.tsx b/packages/react-components/src/ChainLock.tsx index bb44ca73ce71..a0c3301f68fd 100644 --- a/packages/react-components/src/ChainLock.tsx +++ b/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 | null { +function ChainLock ({ className, genesisHash, isDisabled, onChange, preventDefault, t }: Props): React.ReactElement | null { const { isDevelopment, api } = useApiContext(); if (isDevelopment) { @@ -33,15 +36,22 @@ function ChainLock ({ genesisHash, onChange, t }: Props): React.ReactElement ); } -export default translate(ChainLock); +export default translate( + styled(ChainLock)` + text-align: right; + ` +); diff --git a/packages/react-components/src/Toggle.tsx b/packages/react-components/src/Toggle.tsx index 7ecd44a4041f..a75f03aaac77 100644 --- a/packages/react-components/src/Toggle.tsx +++ b/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 { - const _onChange = (_: React.FormEvent, { checked }: any): void => { +function Toggle ({ className, asSwitch = true, defaultValue, isDisabled, onChange, preventDefault, value, label }: Props): React.ReactElement { + const _onChange = (event: React.FormEvent, { checked }: any): void => { + if (preventDefault) { + event.preventDefault(); + event.stopPropagation(); + } + onChange && onChange(checked); }; From 4ea80cca7579f04bb706d5bb992127582400834c Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 15 Nov 2019 20:50:19 +0100 Subject: [PATCH 3/3] Swap top tag location --- packages/app-accounts/src/Account.tsx | 2 +- packages/app-address-book/src/Address.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx index fae0c887e172..22fb9953cde3 100644 --- a/packages/app-accounts/src/Account.tsx +++ b/packages/app-accounts/src/Account.tsx @@ -94,7 +94,7 @@ function Account ({ address, className, t }: Props): React.ReactElement { className='theme--default' onClose={_toggleSettingPopup} open={isSettingPopupOpen} - position='bottom left' + position='bottom right' trigger={