From 077dfc398d344fd2de0295abdf63094514cc6871 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 25 Jan 2019 11:34:56 +0100 Subject: [PATCH] Hover & signer name updates (#646) * Hover should not hop all over the screen * Rework signer with name/address display --- .../app-explorer/src/BlockByHash/Events.tsx | 1 - .../src/BlockByHash/Extrinsics.tsx | 22 ++++--- .../app-explorer/src/BlockByHash/Logs.tsx | 15 +++-- .../src/BlockHeader/BlockHeader.css | 63 +++++++------------ .../app-explorer/src/BlockHeader/index.tsx | 6 +- packages/app-explorer/src/BlockHeaders.tsx | 4 +- packages/app-explorer/src/Events.tsx | 30 +++++---- packages/app-explorer/src/index.css | 20 +++--- packages/ui-app/src/AddressRow.tsx | 2 +- packages/ui-app/src/AddressSummary.tsx | 6 +- packages/ui-app/src/InputAddress/index.tsx | 24 +++++-- packages/ui-app/src/styles/components.css | 19 +----- packages/ui-app/src/styles/form.css | 35 ++++++++--- packages/ui-app/src/styles/theme/polkadot.css | 12 +++- packages/ui-params/src/Params.css | 2 +- packages/ui-signer/src/Transaction.tsx | 58 ++++++++--------- packages/ui-signer/src/Unlock.tsx | 2 +- packages/ui-signer/src/index.css | 12 +++- 18 files changed, 175 insertions(+), 158 deletions(-) diff --git a/packages/app-explorer/src/BlockByHash/Events.tsx b/packages/app-explorer/src/BlockByHash/Events.tsx index b35f4b7745..429506ab9f 100644 --- a/packages/app-explorer/src/BlockByHash/Events.tsx +++ b/packages/app-explorer/src/BlockByHash/Events.tsx @@ -27,7 +27,6 @@ class Events extends React.PureComponent {

{t('events')}

diff --git a/packages/app-explorer/src/BlockByHash/Extrinsics.tsx b/packages/app-explorer/src/BlockByHash/Extrinsics.tsx index faf8c8b5fc..134dacc896 100644 --- a/packages/app-explorer/src/BlockByHash/Extrinsics.tsx +++ b/packages/app-explorer/src/BlockByHash/Extrinsics.tsx @@ -60,17 +60,21 @@ class Extrinsics extends React.PureComponent {

{section}.{method} (#{numberFormat(index)})

-
{ - meta && meta.documentation && meta.documentation.length - ? meta.documentation.map((doc) => doc.toString()).join(' ') - : '' - }
{this.renderSigner(extrinsic)}
- +
+
+
{ + meta && meta.documentation && meta.documentation.length + ? meta.documentation.map((doc) => doc.toString()).join(' ') + : '' + }
+ +
+
); diff --git a/packages/app-explorer/src/BlockByHash/Logs.tsx b/packages/app-explorer/src/BlockByHash/Logs.tsx index e1d296a8cc..997763a48b 100644 --- a/packages/app-explorer/src/BlockByHash/Logs.tsx +++ b/packages/app-explorer/src/BlockByHash/Logs.tsx @@ -48,18 +48,17 @@ class Logs extends React.PureComponent { return (
-
+
-

- {item.type.toString()} -

-
+

{item.type.toString()}

-
- {content} +
+
+ {content} +
diff --git a/packages/app-explorer/src/BlockHeader/BlockHeader.css b/packages/app-explorer/src/BlockHeader/BlockHeader.css index 9622ccf336..4b2d0a1c0a 100644 --- a/packages/app-explorer/src/BlockHeader/BlockHeader.css +++ b/packages/app-explorer/src/BlockHeader/BlockHeader.css @@ -10,23 +10,6 @@ .explorer--BlockHeader { animation: fadein 1.5s; - > div { - padding: 0.5em; - overflow: hidden; - } - - &.ui--hoverable { - .details > .contains { - margin-top: 0; - } - - &:hover { - .details > .contains { - margin-top: 0.5rem; - } - } - } - .author { font-size: 1rem; text-align: right; @@ -37,6 +20,11 @@ } } + .header-outer { + padding: 0.5rem; + overflow: hidden; + } + .header { color: rgba(0, 0, 0, 0.6); display: flex; @@ -61,7 +49,6 @@ .hash { font-size: 1.5rem; font-family: sans-serif; - /*opacity: 0.75;*/ } } @@ -76,34 +63,26 @@ box-sizing: border-box; } - .details { - box-sizing: border-box; - flex: 1; - min-width: 0; + .contains { + border: 0; + padding: 0.5rem; text-align: center; - overflow: hidden; - > .contains { - border: 0; - margin-top: 0.5rem; - opacity: 0.75; + > .info { + margin-bottom: 0.125em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; - > .info { - margin-bottom: 0.125em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + > div { + display: inline-block; + padding: 0 0.25em; + vertical-align: middle; - > div { - display: inline-block; - padding: 0 0.25em; - vertical-align: middle; - - &.type { - opacity: 0.75; - text-align: right; - width: 10em; - } + &.type { + opacity: 0.75; + text-align: right; + width: 10em; } } } diff --git a/packages/app-explorer/src/BlockHeader/index.tsx b/packages/app-explorer/src/BlockHeader/index.tsx index 9b08722a96..12a89aa81c 100644 --- a/packages/app-explorer/src/BlockHeader/index.tsx +++ b/packages/app-explorer/src/BlockHeader/index.tsx @@ -36,7 +36,7 @@ export default class BlockHeader extends React.PureComponent { return (
-
+
{ withLink @@ -50,7 +50,9 @@ export default class BlockHeader extends React.PureComponent { : undefined }
-
+
+
+
parentHash
{ diff --git a/packages/app-explorer/src/BlockHeaders.tsx b/packages/app-explorer/src/BlockHeaders.tsx index 01839c9a15..e8a2b91982 100644 --- a/packages/app-explorer/src/BlockHeaders.tsx +++ b/packages/app-explorer/src/BlockHeaders.tsx @@ -45,9 +45,9 @@ class BlockHeaders extends React.PureComponent { return (
- {headers.map((header, index) => ( + {headers.map((header) => ( , emptyLabel?: React.ReactNode, eventClassName?: string, @@ -46,14 +45,14 @@ class Events extends React.PureComponent { } private renderEvent = ({ event, phase }: EventRecord, index: number) => { - const { isSummary, withoutIndex } = this.props; + const { withoutIndex } = this.props; const extIndex = !withoutIndex && phase.type === 'ApplyExtrinsic' ? phase.asApplyExtrinsic : -1; return (
@@ -64,18 +63,23 @@ class Events extends React.PureComponent { : '' } -
- { - event.meta.documentation && event.meta.documentation.length - ? event.meta.documentation.map((doc) => doc.toString()).join(' ') - : '' - } + +
+
+
+
+ { + event.meta.documentation && event.meta.documentation.length + ? event.meta.documentation.map((doc) => doc.toString()).join(' ') + : '' + } +
+
-
); } diff --git a/packages/app-explorer/src/index.css b/packages/app-explorer/src/index.css index 29b89b5454..209fa385fe 100644 --- a/packages/app-explorer/src/index.css +++ b/packages/app-explorer/src/index.css @@ -45,11 +45,6 @@ .explorer--Container { color: inherit; - &:not(.ui--hoverable) .header .description, - &.ui--hoverable:hover .header .description { - margin: 0.25rem 0 0.5rem 0; - } - .header { position: relative; vertical-align: middle; @@ -57,14 +52,15 @@ h3 { margin: 0; } + } - .description { - color: rgba(0, 0, 0, 0.6); - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; - white-space: nowrap; - } + .description { + color: rgba(0, 0, 0, 0.6); + margin: 0rem 0 0.5rem 0; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + white-space: nowrap; } > .details { diff --git a/packages/ui-app/src/AddressRow.tsx b/packages/ui-app/src/AddressRow.tsx index 61ae973889..7d005054f0 100644 --- a/packages/ui-app/src/AddressRow.tsx +++ b/packages/ui-app/src/AddressRow.tsx @@ -24,9 +24,9 @@ class AddressRow extends AddressSummary { {this.renderAddress()} {this.renderBalance()} {this.renderNonce()} - {this.renderChildren()}
+ {this.renderChildren()}
); } diff --git a/packages/ui-app/src/AddressSummary.tsx b/packages/ui-app/src/AddressSummary.tsx index 73a701a7a9..d2c9525ca1 100644 --- a/packages/ui-app/src/AddressSummary.tsx +++ b/packages/ui-app/src/AddressSummary.tsx @@ -196,8 +196,10 @@ class AddressSummary extends React.PureComponent { } return ( -
- {children} +
+
+ {children} +
); } diff --git a/packages/ui-app/src/InputAddress/index.tsx b/packages/ui-app/src/InputAddress/index.tsx index 12d22c4719..373b65f863 100644 --- a/packages/ui-app/src/InputAddress/index.tsx +++ b/packages/ui-app/src/InputAddress/index.tsx @@ -11,7 +11,7 @@ import React from 'react'; import store from 'store'; import keyring from '@polkadot/ui-keyring'; import keyringOption from '@polkadot/ui-keyring/options'; -import makeOption from '@polkadot/ui-keyring/options/item'; +import createItem from '@polkadot/ui-keyring/options/item'; import { withMulti, withObservable } from '@polkadot/ui-api/index'; import Dropdown from '../Dropdown'; @@ -25,7 +25,7 @@ type Props = BareProps & { isError?: boolean, isInput?: boolean, label?: string, - onChange: (value: string | null) => void, + onChange?: (value: string | null) => void, optionsAll?: KeyringOptions, placeholder?: string, type?: KeyringOption$Type, @@ -59,6 +59,22 @@ const transformToAccountId = (value: string): string | null => { : accountId; }; +const createOption = (address: string) => { + let name: string | undefined; + + try { + name = keyring.getAccount(address).getMeta().name; + } catch (error) { + try { + name = keyring.getAddress(address).getMeta().name; + } catch (error) { + // ok, we don't have account or address + } + } + + return createItem(address, name); +}; + class InputAddress extends React.PureComponent { constructor (props: Props) { super(props); @@ -126,7 +142,7 @@ class InputAddress extends React.PureComponent { onSearch={this.onSearch} options={ isDisabled && actualValue - ? [makeOption(actualValue)] + ? [createOption(actualValue)] : optionsAll[type] } style={style} @@ -169,7 +185,7 @@ class InputAddress extends React.PureComponent { InputAddress.setLastValue(type, address); - onChange(transformToAccountId(address)); + onChange && onChange(transformToAccountId(address)); } private onSearch = (filteredOptions: KeyringSectionOptions, _query: string): KeyringSectionOptions => { diff --git a/packages/ui-app/src/styles/components.css b/packages/ui-app/src/styles/components.css index 4b994c125f..e8de710d4f 100644 --- a/packages/ui-app/src/styles/components.css +++ b/packages/ui-app/src/styles/components.css @@ -69,11 +69,6 @@ header .ui--Button-Group { text-align: right; } -.ui--AddressRow { - display: flex; - width: 100%; -} - .ui--AddressRow-base { display: flex; } @@ -100,25 +95,13 @@ header .ui--Button-Group { } .ui--AddressSummary-children { - padding-top: 0.5rem; + margin-top: 0.5rem !important; } .ui--AddressRow .ui--AddressSummary-children { display: block; } -.ui--hoverable { - .ui--AddressSummary-children.ui--hover { - padding-top: 0; - } - - &:hover { - .ui--AddressSummary-children.ui--hover { - padding-top: 0.5rem; - } - } -} - .ui--AddressSummary .rx--updated { background: transparent !important; } diff --git a/packages/ui-app/src/styles/form.css b/packages/ui-app/src/styles/form.css index 70f63d244e..d899ebe36b 100644 --- a/packages/ui-app/src/styles/form.css +++ b/packages/ui-app/src/styles/form.css @@ -2,19 +2,34 @@ /* This software may be modified and distributed under the terms /* of the Apache-2.0 license. See the LICENSE file for details. */ -.ui--hoverable { +article.ui--hoverable { .ui--hover { - height: 0; - opacity: 0; - transition: none; - transform: scale(0); + position: relative; + margin: 0 -1.5rem; } - &:hover .ui--hover { - height: auto; - opacity: 1; - transform: scale(1); - transition: all 0.25s ease-in; + .ui--hover-content { + border: 1px solid #4e4e4e; + border-radius: 0 0 0.25rem 0.25rem; + border-top-width: 0; + border-left-width: 0.25rem; + background: white; + display: none !important; + left: -0.25rem; + padding: 0.5rem 1.5rem 1rem; + position: absolute; + right: -1px; + top: -1px; + z-index: 50; + } + + &:hover, + &.active { + border-color: #4e4e4e; + + .ui--hover-content { + display: block !important; + } } } diff --git a/packages/ui-app/src/styles/theme/polkadot.css b/packages/ui-app/src/styles/theme/polkadot.css index 249900bd19..8173971688 100644 --- a/packages/ui-app/src/styles/theme/polkadot.css +++ b/packages/ui-app/src/styles/theme/polkadot.css @@ -14,7 +14,6 @@ background-color: $button-primary-color; } - .ui.primary.button:hover, .ui.buttons .primary.button:hover { background-color: $button-primary-color-hover; @@ -97,4 +96,15 @@ .ui.red.progress .bar { background-color: $red; } + + article.ui--hoverable { + .ui--hover-content { + border-color: $wild-orchid; + } + + &:hover, + &.active { + border-color: $wild-orchid; + } + } } diff --git a/packages/ui-params/src/Params.css b/packages/ui-params/src/Params.css index 9fe7c66153..050d9be1fc 100644 --- a/packages/ui-params/src/Params.css +++ b/packages/ui-params/src/Params.css @@ -8,7 +8,7 @@ .ui--Params-Content { box-sizing: border-box; - padding-left: 2em; + padding-left: 1.5rem; } .ui--Param-text { diff --git a/packages/ui-signer/src/Transaction.tsx b/packages/ui-signer/src/Transaction.tsx index fe06d09d0f..d5da938fb6 100644 --- a/packages/ui-signer/src/Transaction.tsx +++ b/packages/ui-signer/src/Transaction.tsx @@ -6,9 +6,8 @@ import { I18nProps } from '@polkadot/ui-app/types'; import { QueueTx } from '@polkadot/ui-app/Status/types'; import React from 'react'; -import { Trans } from 'react-i18next'; import { Method } from '@polkadot/types'; -import { Call, IdentityIcon, Modal } from '@polkadot/ui-app/index'; +import { Call, InputAddress, Modal } from '@polkadot/ui-app/index'; import Fees from './Fees'; import translate from './translate'; @@ -20,47 +19,52 @@ type Props = I18nProps & { class Transaction extends React.PureComponent { render () { - const { children, t, value: { accountId, extrinsic, isUnsigned } } = this.props; + const { children, value: { extrinsic } } = this.props; if (!extrinsic) { return null; } const { method, section } = Method.findFunction(extrinsic.callIndex); - const header = isUnsigned - ? ( - You are about to submit an (unsigned) inherent transaction calling {section}.{method} - ) - : ( - You are about to sign a transaction from {accountId} calling {section}.{method} - ); - const icon = isUnsigned - ? undefined - : ( - - ); return [ - {t('Submit Transaction')} + {section}.{method} ,
-

{header}

+
+ {this.renderAccount()} + {children} +
{this.renderFees()}
- {icon}
- {children} ]; } + private renderAccount () { + const { t, value: { accountId, isUnsigned } } = this.props; + + if (isUnsigned || !accountId) { + return null; + } + + return ( + + ); + } + private renderFees () { const { value: { accountId, extrinsic, isUnsigned } } = this.props; @@ -69,12 +73,10 @@ class Transaction extends React.PureComponent { } return ( -
- -
+ ); } } diff --git a/packages/ui-signer/src/Unlock.tsx b/packages/ui-signer/src/Unlock.tsx index 4eb324246a..4fea909aa9 100644 --- a/packages/ui-signer/src/Unlock.tsx +++ b/packages/ui-signer/src/Unlock.tsx @@ -57,7 +57,7 @@ class Unlock extends React.PureComponent { autoFocus={autoFocus} className='medium' isError={isError} - label={label || t('unlock account using the password')} + label={label || t('unlocked using the password')} onChange={onChange} onKeyDown={onKeyDown} tabIndex={tabIndex} diff --git a/packages/ui-signer/src/index.css b/packages/ui-signer/src/index.css index 61b3b274be..0c3b21a127 100644 --- a/packages/ui-signer/src/index.css +++ b/packages/ui-signer/src/index.css @@ -11,12 +11,14 @@ line-height: 1.5em; } -.ui--signer-Signer-Unlock { - padding-top: 1.5rem; +.ui--signer-Signer-children { + padding: 0.25rem 0 0 0; } .ui--signer-Signer-Content .expanded { - padding-right: 2em; + h3 { + margin-bottom: 0.75rem; + } .code { background: #f5f5f5; @@ -28,6 +30,10 @@ word-break: break-word; word-wrap: break-word; } + + .hl { + font-weight: 700; + } } .ui--signer-Status {