Align list displays with SectionList (UI consistency) (#4621)
* Render Dapps via SectionList * Initial rendering of accounts via SectionList * Width vars * Allow classNames in certifications & tags * Overlay of info on hover * Adjust hover balances * Large owner icons (align with vaults) * Consistent block mined at message * Attach ParityBackground to html * Adjust page padding to align * Lint fixes * Link to different types of addresses * Make content parts clickable only (a within a) * Force Chrome hardware acceleration * Trust the vendors... don't go crazy with transform :) * Use faster & default transitions * Remove extra container (double scrolling) * Remove unused container style * Make dapp iframe background white * Stop event propgation on tag click
This commit is contained in:
parent
afecf5b148
commit
f670b180d7
@ -6,12 +6,15 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<style>
|
||||
html {
|
||||
background: white;
|
||||
}
|
||||
|
||||
html, body, #container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
|
@ -14,6 +14,7 @@
|
||||
/* You should have received a copy of the GNU General Public License
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.balances {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -21,16 +22,22 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.balance,
|
||||
.empty {
|
||||
margin: 0.75em 0.5em 0 0;
|
||||
}
|
||||
|
||||
.empty {
|
||||
line-height: 24px;
|
||||
margin: 0 0.5em 0 0;
|
||||
opacity: 0.25;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.balance {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border-radius: 16px;
|
||||
margin: 0.75em 0.5em 0 0;
|
||||
max-height: 24px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
|
@ -27,18 +27,19 @@ class Certifications extends Component {
|
||||
static propTypes = {
|
||||
address: PropTypes.string.isRequired,
|
||||
certifications: PropTypes.array.isRequired,
|
||||
className: PropTypes.string,
|
||||
dappsUrl: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
render () {
|
||||
const { certifications } = this.props;
|
||||
const { certifications, className } = this.props;
|
||||
|
||||
if (certifications.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.certifications }>
|
||||
<div className={ [styles.certifications, className].join(' ') }>
|
||||
{ certifications.map(this.renderCertification) }
|
||||
</div>
|
||||
);
|
||||
|
@ -25,21 +25,24 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
height: 100%;
|
||||
padding: 0em;
|
||||
position: relative;
|
||||
transition: $transitionAll;
|
||||
/*transform: translateZ(0);
|
||||
transition: $transitionAll;*/
|
||||
width: 100%;
|
||||
|
||||
.hoverOverlay {
|
||||
background: $background;
|
||||
left: 0;
|
||||
margin-top: -1.5em;
|
||||
margin-bottom: 3em;
|
||||
opacity: inherit;
|
||||
padding: 0 1.5em 1.5em 1.5em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
transition: $transitionAll;
|
||||
transform: scale(0.5, 0);
|
||||
transform-origin: top center;
|
||||
/*transition: $transitionAll;*/
|
||||
opacity: 0;
|
||||
/*transform: scale(0.5, 0);
|
||||
transform-origin: top center;*/
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@ -48,7 +51,8 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
|
||||
.hoverOverlay {
|
||||
background: $backgroundHover;
|
||||
transform: scale(1, 1);
|
||||
/*transform: scale(1, 1);*/
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -74,3 +78,8 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
.light .padded {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
.link {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
@ -15,6 +15,7 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Card } from 'material-ui/Card';
|
||||
|
||||
import { nodeOrStringProptype } from '~/util/proptypes';
|
||||
@ -30,6 +31,7 @@ export default class Container extends Component {
|
||||
compact: PropTypes.bool,
|
||||
hover: PropTypes.node,
|
||||
light: PropTypes.bool,
|
||||
link: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
style: PropTypes.object,
|
||||
tabIndex: PropTypes.number,
|
||||
@ -37,13 +39,27 @@ export default class Container extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children, className, compact, light, onClick, style, tabIndex } = this.props;
|
||||
const { children, className, compact, light, link, onClick, style, tabIndex } = this.props;
|
||||
const props = {};
|
||||
|
||||
if (Number.isInteger(tabIndex)) {
|
||||
props.tabIndex = tabIndex;
|
||||
}
|
||||
|
||||
const card = (
|
||||
<Card
|
||||
className={
|
||||
compact
|
||||
? styles.compact
|
||||
: styles.padded
|
||||
}
|
||||
onClick={ onClick }
|
||||
>
|
||||
{ this.renderTitle() }
|
||||
{ children }
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
@ -58,17 +74,18 @@ export default class Container extends Component {
|
||||
style={ style }
|
||||
{ ...props }
|
||||
>
|
||||
<Card
|
||||
className={
|
||||
compact
|
||||
? styles.compact
|
||||
: styles.padded
|
||||
}
|
||||
onClick={ onClick }
|
||||
{
|
||||
link
|
||||
? (
|
||||
<Link
|
||||
className={ styles.link }
|
||||
to={ link }
|
||||
>
|
||||
{ this.renderTitle() }
|
||||
{ children }
|
||||
</Card>
|
||||
{ card }
|
||||
</Link>
|
||||
)
|
||||
: card
|
||||
}
|
||||
{ this.renderHover() }
|
||||
</div>
|
||||
);
|
||||
|
@ -18,6 +18,12 @@
|
||||
.container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&:not(:hover) {
|
||||
.tags {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
@ -26,16 +32,20 @@
|
||||
top: 1.5em;
|
||||
}
|
||||
|
||||
.author,
|
||||
.description {
|
||||
margin-left: 72px;
|
||||
}
|
||||
|
||||
.title {
|
||||
mragin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.author, .version {
|
||||
.titleLink {
|
||||
color: rgb(0, 151, 167);
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 0.75em;
|
||||
opacity: 0.5;
|
||||
margin-top: 0.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
@ -15,7 +15,6 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
|
||||
import Container, { Title as ContainerTitle } from '~/ui/Container';
|
||||
import DappIcon from '~/ui/DappIcon';
|
||||
@ -50,6 +49,12 @@ export default class DappCard extends Component {
|
||||
className={
|
||||
[styles.container, className].join(' ')
|
||||
}
|
||||
hover={
|
||||
<div className={ styles.author }>
|
||||
{ app.author }, v{ app.version }
|
||||
</div>
|
||||
}
|
||||
link={ this.getLink(app) }
|
||||
onClick={ onClick }
|
||||
>
|
||||
<DappIcon
|
||||
@ -57,6 +62,7 @@ export default class DappCard extends Component {
|
||||
className={ styles.image }
|
||||
/>
|
||||
<Tags
|
||||
className={ styles.tags }
|
||||
tags={
|
||||
showTags
|
||||
? [app.type]
|
||||
@ -65,34 +71,29 @@ export default class DappCard extends Component {
|
||||
/>
|
||||
<div className={ styles.description }>
|
||||
<ContainerTitle
|
||||
className={ styles.title }
|
||||
title={
|
||||
className={
|
||||
showLink
|
||||
? this.renderLink(app)
|
||||
: app.name
|
||||
? styles.titleLink
|
||||
: styles.title
|
||||
}
|
||||
title={ app.name }
|
||||
byline={ app.description }
|
||||
/>
|
||||
<div className={ styles.author }>
|
||||
{ app.author }, v{ app.version }
|
||||
</div>
|
||||
{ children }
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
renderLink (app) {
|
||||
return (
|
||||
<Link
|
||||
to={
|
||||
app.url === 'web'
|
||||
? '/web'
|
||||
: `/app/${app.id}`
|
||||
getLink (app) {
|
||||
const { showLink } = this.props;
|
||||
|
||||
if (!showLink) {
|
||||
return null;
|
||||
}
|
||||
>
|
||||
{ app.name }
|
||||
</Link>
|
||||
);
|
||||
|
||||
return app.url === 'web'
|
||||
? '/web'
|
||||
: `/app/${app.id}`;
|
||||
}
|
||||
}
|
||||
|
@ -15,10 +15,17 @@
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.layout {
|
||||
padding: 0.25em;
|
||||
|
||||
.layout,
|
||||
.layoutPadded {
|
||||
&>div {
|
||||
margin-bottom: 0.75em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.layout {
|
||||
padding: 0.25em 0.25em 3em 0.25em;
|
||||
}
|
||||
|
||||
.layoutPadded {
|
||||
padding: 0.5em 0.5em 3em 0.5em;
|
||||
}
|
||||
|
@ -26,11 +26,12 @@ export default class Page extends Component {
|
||||
buttons: PropTypes.array,
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
padded: PropTypes.bool,
|
||||
title: nodeOrStringProptype()
|
||||
};
|
||||
|
||||
render () {
|
||||
const { buttons, className, children, title } = this.props;
|
||||
const { buttons, className, children, padded, title } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
@ -44,7 +45,16 @@ export default class Page extends Component {
|
||||
)
|
||||
: null
|
||||
}
|
||||
<div className={ [styles.layout, className].join(' ') }>
|
||||
<div
|
||||
className={
|
||||
[
|
||||
padded
|
||||
? styles.layoutPadded
|
||||
: styles.layout,
|
||||
className
|
||||
].join(' ')
|
||||
}
|
||||
>
|
||||
{ children }
|
||||
</div>
|
||||
</div>
|
||||
|
@ -23,6 +23,7 @@ class ParityBackground extends Component {
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
attachDocument: PropTypes.bool,
|
||||
backgroundSeed: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
@ -70,17 +71,25 @@ class ParityBackground extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children, className, onClick } = this.props;
|
||||
const { attachDocument, children, className, onClick } = this.props;
|
||||
|
||||
const style = {
|
||||
...this.state.style,
|
||||
...this.props.style
|
||||
};
|
||||
|
||||
if (attachDocument) {
|
||||
document.documentElement.style.background = style.background;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={ className }
|
||||
style={ style }
|
||||
style={
|
||||
attachDocument
|
||||
? {}
|
||||
: style
|
||||
}
|
||||
onTouchTap={ onClick }
|
||||
>
|
||||
{ children }
|
||||
|
@ -15,6 +15,11 @@
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
$transition: all 0.25s;
|
||||
$widthNormal: 33.33%;
|
||||
$widthShrunk: 29%;
|
||||
$widthExpanded: 42%;
|
||||
|
||||
.section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -38,13 +43,14 @@
|
||||
/* case where <> 3 columns are required should the need arrise from a UI pov. */
|
||||
.item {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex: 0 1 33.33%;
|
||||
max-width: 33.33%;
|
||||
flex: 0 1 $widthNormal;
|
||||
max-width: $widthNormal;
|
||||
opacity: 0.85;
|
||||
padding: 0.25em;
|
||||
transition: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
/* https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/ */
|
||||
transform: translateZ(0);
|
||||
transition: $transition;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@ -55,12 +61,12 @@
|
||||
&:hover {
|
||||
.item {
|
||||
&.stretchOn {
|
||||
flex: 0 1 29%;
|
||||
max-width: 29%;
|
||||
flex: 0 1 $widthShrunk;
|
||||
max-width: $widthShrunk;
|
||||
|
||||
&:hover {
|
||||
flex: 0 0 42%;
|
||||
max-width: 42%;
|
||||
flex: 0 0 $widthExpanded;
|
||||
max-width: $widthExpanded;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -22,6 +22,7 @@ import styles from './tags.css';
|
||||
|
||||
export default class Tags extends Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
floating: PropTypes.bool,
|
||||
horizontal: PropTypes.bool,
|
||||
handleAddSearchToken: PropTypes.func,
|
||||
@ -35,7 +36,7 @@ export default class Tags extends Component {
|
||||
};
|
||||
|
||||
render () {
|
||||
const { floating, horizontal, tags } = this.props;
|
||||
const { className, floating, horizontal, tags } = this.props;
|
||||
|
||||
if (!tags || tags.length === 0) {
|
||||
return null;
|
||||
@ -51,6 +52,8 @@ export default class Tags extends Component {
|
||||
classes.push(styles.horizontal);
|
||||
}
|
||||
|
||||
classes.push(className);
|
||||
|
||||
return (
|
||||
<div className={ classes.join(' ') }>
|
||||
{ this.renderTags() }
|
||||
@ -73,7 +76,12 @@ export default class Tags extends Component {
|
||||
.sort()
|
||||
.map((tag, index) => {
|
||||
const onClick = handleAddSearchToken
|
||||
? () => handleAddSearchToken(tag)
|
||||
? (event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
handleAddSearchToken(tag);
|
||||
}
|
||||
: null;
|
||||
|
||||
return (
|
||||
|
@ -92,7 +92,7 @@ class Account extends Component {
|
||||
{ this.renderTransferDialog(account, balance) }
|
||||
{ this.renderVerificationDialog() }
|
||||
{ this.renderActionbar(balance) }
|
||||
<Page>
|
||||
<Page padded>
|
||||
<Header
|
||||
account={ account }
|
||||
balance={ balance }
|
||||
|
@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import { Container } from '~/ui';
|
||||
import { Container, SectionList } from '~/ui';
|
||||
import { fetchCertifiers, fetchCertifications } from '~/redux/providers/certifications/actions';
|
||||
|
||||
import Summary from '../Summary';
|
||||
@ -40,14 +40,6 @@ class List extends Component {
|
||||
handleAddSearchToken: PropTypes.func
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className={ styles.list }>
|
||||
{ this.renderAccounts() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
const { accounts, fetchCertifiers, fetchCertifications } = this.props;
|
||||
|
||||
@ -57,7 +49,7 @@ class List extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
renderAccounts () {
|
||||
render () {
|
||||
const { accounts, balances, empty } = this.props;
|
||||
|
||||
if (empty) {
|
||||
@ -70,26 +62,30 @@ class List extends Component {
|
||||
);
|
||||
}
|
||||
|
||||
const addresses = this.getAddresses();
|
||||
|
||||
return addresses.map((address, idx) => {
|
||||
const addresses = this
|
||||
.getAddresses()
|
||||
.map((address, idx) => {
|
||||
const account = accounts[address] || {};
|
||||
const balance = balances[address] || {};
|
||||
|
||||
const owners = account.owners || null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={ styles.item }
|
||||
key={ address }
|
||||
>
|
||||
{ this.renderSummary(account, balance, owners) }
|
||||
</div>
|
||||
);
|
||||
return {
|
||||
account,
|
||||
balance,
|
||||
owners
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<SectionList
|
||||
items={ addresses }
|
||||
renderItem={ this.renderSummary }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderSummary (account, balance, owners) {
|
||||
renderSummary = (item) => {
|
||||
const { account, balance, owners } = item;
|
||||
const { handleAddSearchToken, link } = this.props;
|
||||
|
||||
return (
|
||||
|
@ -16,6 +16,7 @@
|
||||
|
||||
import BigNumber from 'bignumber.js';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router';
|
||||
import { isEqual } from 'lodash';
|
||||
import ReactTooltip from 'react-tooltip';
|
||||
@ -27,13 +28,14 @@ import { arrayOrObjectProptype, nullableProptype } from '~/util/proptypes';
|
||||
|
||||
import styles from '../accounts.css';
|
||||
|
||||
export default class Summary extends Component {
|
||||
class Summary extends Component {
|
||||
static contextTypes = {
|
||||
api: React.PropTypes.object
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
account: PropTypes.object.isRequired,
|
||||
accountsInfo: PropTypes.object.isRequired,
|
||||
balance: PropTypes.object,
|
||||
link: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
@ -90,7 +92,7 @@ export default class Summary extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { account, handleAddSearchToken } = this.props;
|
||||
const { account, handleAddSearchToken, noLink } = this.props;
|
||||
const { tags } = account.meta;
|
||||
|
||||
if (!account) {
|
||||
@ -108,52 +110,71 @@ export default class Summary extends Component {
|
||||
/>
|
||||
);
|
||||
|
||||
const description = this.getDescription(account.meta);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Tags tags={ tags } handleAddSearchToken={ handleAddSearchToken } />
|
||||
<Container
|
||||
className={ styles.account }
|
||||
hover={
|
||||
<div className={ styles.overlay }>
|
||||
{ this.renderBalance(false) }
|
||||
{ this.renderDescription(account.meta) }
|
||||
{ this.renderOwners() }
|
||||
{ this.renderCertifications() }
|
||||
</div>
|
||||
}
|
||||
link={ this.getLink() }
|
||||
>
|
||||
<Tags
|
||||
className={ styles.tags }
|
||||
tags={ tags }
|
||||
handleAddSearchToken={ handleAddSearchToken }
|
||||
/>
|
||||
<div className={ styles.heading }>
|
||||
<IdentityIcon
|
||||
address={ address }
|
||||
/>
|
||||
<ContainerTitle
|
||||
byline={ addressComponent }
|
||||
className={ styles.main }
|
||||
description={ description }
|
||||
title={ this.renderLink() }
|
||||
className={
|
||||
noLink
|
||||
? styles.main
|
||||
: styles.mainLink
|
||||
}
|
||||
title={
|
||||
<IdentityName
|
||||
address={ address }
|
||||
name={ name }
|
||||
unknown
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{ this.renderOwners() }
|
||||
{ this.renderBalance() }
|
||||
{ this.renderCertifications() }
|
||||
{ this.renderBalance(true) }
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
getDescription (meta = {}) {
|
||||
renderDescription (meta = {}) {
|
||||
const { blockNumber } = meta;
|
||||
|
||||
if (!blockNumber) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const formattedBlockNumber = (new BigNumber(blockNumber)).toFormat();
|
||||
|
||||
return (
|
||||
<div className={ styles.blockDescription }>
|
||||
<FormattedMessage
|
||||
id='accounts.summary.minedBlock'
|
||||
defaultMessage='Mined at block #{blockNumber}'
|
||||
values={ {
|
||||
blockNumber: formattedBlockNumber
|
||||
blockNumber: (new BigNumber(blockNumber)).toFormat()
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderOwners () {
|
||||
const { owners } = this.props;
|
||||
const { accountsInfo, owners } = this.props;
|
||||
const ownersValid = (owners || []).filter((owner) => owner.address && new BigNumber(owner.address).gt(0));
|
||||
|
||||
if (!ownersValid || ownersValid.length === 0) {
|
||||
@ -163,55 +184,58 @@ export default class Summary extends Component {
|
||||
return (
|
||||
<div className={ styles.owners }>
|
||||
{
|
||||
ownersValid.map((owner, index) => (
|
||||
<div key={ `${index}_${owner.address}` }>
|
||||
ownersValid.map((owner, index) => {
|
||||
const account = accountsInfo[owner.address];
|
||||
let ownerLinkType = 'addresses';
|
||||
|
||||
if (account) {
|
||||
if (account.uuid || account.hardware) {
|
||||
ownerLinkType = 'accounts';
|
||||
} else if (account.wallet) {
|
||||
ownerLinkType = 'wallet';
|
||||
} else if (account.meta.contract) {
|
||||
ownerLinkType = 'contract';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
className={ styles.owner }
|
||||
key={ `${index}_${owner.address}` }
|
||||
to={ `/${ownerLinkType}/${owner.address}` }
|
||||
>
|
||||
<div
|
||||
data-tip
|
||||
data-for={ `owner_${owner.address}` }
|
||||
data-effect='solid'
|
||||
>
|
||||
<IdentityIcon address={ owner.address } button />
|
||||
<IdentityIcon
|
||||
address={ owner.address }
|
||||
center
|
||||
/>
|
||||
</div>
|
||||
<ReactTooltip id={ `owner_${owner.address}` }>
|
||||
<strong>{ owner.name } </strong><small> (owner)</small>
|
||||
</ReactTooltip>
|
||||
</div>
|
||||
))
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderLink () {
|
||||
const { link, noLink, account, name } = this.props;
|
||||
|
||||
getLink () {
|
||||
const { link, account } = this.props;
|
||||
const { address } = account;
|
||||
const baseLink = account.wallet
|
||||
? 'wallet'
|
||||
: link || 'accounts';
|
||||
|
||||
const viewLink = `/${baseLink}/${address}`;
|
||||
|
||||
const content = (
|
||||
<IdentityName
|
||||
address={ address }
|
||||
name={ name }
|
||||
unknown
|
||||
/>
|
||||
);
|
||||
|
||||
if (noLink) {
|
||||
return content;
|
||||
return `/${baseLink}/${address}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link to={ viewLink }>
|
||||
{ content }
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
renderBalance () {
|
||||
renderBalance (onlyEth) {
|
||||
const { balance } = this.props;
|
||||
|
||||
if (!balance) {
|
||||
@ -219,7 +243,15 @@ export default class Summary extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<Balance balance={ balance } />
|
||||
<Balance
|
||||
balance={ balance }
|
||||
className={
|
||||
onlyEth
|
||||
? styles.ethBalances
|
||||
: styles.allBalances
|
||||
}
|
||||
showOnlyEth={ onlyEth }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -231,7 +263,23 @@ export default class Summary extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<Certifications address={ account.address } />
|
||||
<Certifications
|
||||
address={ account.address }
|
||||
className={ styles.Certifications }
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { accountsInfo } = state.personal;
|
||||
|
||||
return {
|
||||
accountsInfo
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(Summary);
|
||||
|
@ -20,10 +20,45 @@
|
||||
left: 7em;
|
||||
}
|
||||
|
||||
.owners {
|
||||
margin-top: 1em;
|
||||
.account {
|
||||
position: relative;
|
||||
|
||||
.blockDescription {
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.ethBalances {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.owners {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: -0.5em;
|
||||
margin-top: 1em;
|
||||
|
||||
.owner {
|
||||
margin: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
margin-top: -3.25em;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
.tags {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ethBalances {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
@ -61,7 +96,12 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.main {
|
||||
.main,
|
||||
.mainLink {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mainLink h3 {
|
||||
color: rgb(0, 151, 167);
|
||||
}
|
||||
}
|
||||
|
@ -90,7 +90,7 @@ class Address extends Component {
|
||||
{ this.renderEditDialog(contact) }
|
||||
{ this.renderActionbar(contact) }
|
||||
{ this.renderDelete(contact) }
|
||||
<Page>
|
||||
<Page padded>
|
||||
<Header
|
||||
account={ contact || { address, meta: {} } }
|
||||
balance={ balance }
|
||||
|
@ -33,7 +33,10 @@ export default class Container extends Component {
|
||||
const { children, onCloseFirstRun, showFirstRun, upgradeStore } = this.props;
|
||||
|
||||
return (
|
||||
<ParityBackground className={ styles.container }>
|
||||
<ParityBackground
|
||||
attachDocument
|
||||
className={ styles.container }
|
||||
>
|
||||
<FirstRun
|
||||
onClose={ onCloseFirstRun }
|
||||
visible={ showFirstRun }
|
||||
|
@ -136,7 +136,7 @@ class Contract extends Component {
|
||||
{ this.renderDeleteDialog(account) }
|
||||
{ this.renderEditDialog(account) }
|
||||
{ this.renderExecuteDialog() }
|
||||
<Page>
|
||||
<Page padded>
|
||||
<Header
|
||||
account={ account }
|
||||
balance={ balance }
|
||||
|
@ -82,7 +82,6 @@ class Contracts extends Component {
|
||||
<div>
|
||||
{ this.renderActionbar() }
|
||||
{ this.renderAddContract() }
|
||||
{ this.renderAddContract() }
|
||||
{ this.renderDeployContract() }
|
||||
<Page>
|
||||
<List
|
||||
|
@ -15,6 +15,7 @@
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.frame {
|
||||
background: white;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
@ -14,36 +14,8 @@
|
||||
/* You should have received a copy of the GNU General Public License
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -0.125em;
|
||||
position: relative;
|
||||
|
||||
.item {
|
||||
box-sizing: border-box;
|
||||
flex: 0 1 50%;
|
||||
opacity: 0.85;
|
||||
padding: 0.125em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list+.list {
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
bottom: 0.5em;
|
||||
left: -0.125em;
|
||||
position: absolute;
|
||||
right: -0.125em;
|
||||
top: -0.25em;
|
||||
z-index: 100;
|
||||
padding: 1em;
|
||||
|
||||
.body {
|
||||
line-height: 1.5em;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
@ -52,5 +24,4 @@
|
||||
&>div:first-child {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -23,7 +23,7 @@ import { connect } from 'react-redux';
|
||||
|
||||
import { DappPermissions, DappsVisible } from '~/modals';
|
||||
import PermissionStore from '~/modals/DappPermissions/store';
|
||||
import { Actionbar, Button, DappCard, Page } from '~/ui';
|
||||
import { Actionbar, Button, DappCard, Page, SectionList } from '~/ui';
|
||||
import { LockedIcon, VisibleIcon } from '~/ui/Icons';
|
||||
|
||||
import DappsStore from './dappsStore';
|
||||
@ -53,7 +53,6 @@ class Dapps extends Component {
|
||||
if (this.store.externalOverlayVisible) {
|
||||
externalOverlay = (
|
||||
<div className={ styles.overlay }>
|
||||
<div className={ styles.body }>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='dapps.external.warning'
|
||||
@ -74,7 +73,6 @@ class Dapps extends Component {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -125,30 +123,23 @@ class Dapps extends Component {
|
||||
}
|
||||
|
||||
renderList (items, overlay) {
|
||||
if (!items || !items.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.list }>
|
||||
{ overlay }
|
||||
{ items.map(this.renderApp) }
|
||||
</div>
|
||||
<SectionList
|
||||
items={ items }
|
||||
overlay={ overlay }
|
||||
renderItem={ this.renderApp }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderApp = (app) => {
|
||||
return (
|
||||
<div
|
||||
className={ styles.item }
|
||||
key={ app.id }
|
||||
>
|
||||
<DappCard
|
||||
app={ app }
|
||||
key={ app.id }
|
||||
showLink
|
||||
showTags
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -120,7 +120,7 @@ class Wallet extends Component {
|
||||
{ this.renderTransferDialog() }
|
||||
{ this.renderDeleteDialog(walletAccount) }
|
||||
{ this.renderActionbar() }
|
||||
<Page>
|
||||
<Page padded>
|
||||
<div className={ styles.info }>
|
||||
<Header
|
||||
className={ styles.header }
|
||||
|
Loading…
Reference in New Issue
Block a user