Unverified Commit 7616e99b authored by Amaury Martiny's avatar Amaury Martiny Committed by GitHub
Browse files

Merge pull request #363 from paritytech/luke-337-screen-address-lengths

feat: Relates to #337. Part 1 of 2 - Account view - Change header account design
parents 590c5d12 5d620bed
Pipeline #28955 failed with stages
in 13 minutes and 39 seconds
......@@ -48,13 +48,13 @@ class AccountsList extends Component {
return (
<div className='accounts-list'>
<Header
title={<h1>Accounts</h1>}
right={
<Clickable
className='icon -new'
onClick={this.handleCreateAccount}
/>
}
title={<h1>Accounts</h1>}
/>
<div className='window_content'>
......@@ -72,6 +72,7 @@ class AccountsList extends Component {
className='-clickable'
type={accountsInfo[address].type}
name={accountsInfo[address].name || '(no name)'}
screen='accounts'
shortAddress
/>
</li>
......
.account {
display: flex;
display: flex !important;
&.-header {
.account_address {
font-size: 0.7rem;
}
justify-content: center;
width: 16rem;
}
.account_avatar {
......@@ -26,9 +25,7 @@
}
.account_information {
padding-left: 0.325rem;
overflow: hidden;
flex-grow: 1;
padding-left: 0.325rem; /* gap from avatar */
}
.account_change_blockies {
......@@ -41,6 +38,16 @@
color: $black;
font-weight: 500;
margin-bottom: 0.1rem;
/**
* Information component when used with components
* in the header requires more bottom margin than
* where it is used in the AccountList component
*/
&.-header {
margin-top: 0.2rem;
margin-bottom: 0.3rem;
}
}
.account_address {
......
.header-nav {
// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
display: flex;
justify-content: space-between;
padding: 1rem 0.5rem;
position: relative;
overflow: hidden;
flex-direction: row;
height: 3.5rem;
.header-nav_left,
.header-nav_right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2.3rem;
}
.header-nav_left {
padding-left: 0.5rem;
}
.header-nav_right {
padding-right: 0.5rem;
}
.header-nav_title {
align-items: center; /* vertical alignment of titles */
/**
* Push the the area for the right button to the right
* https://stackoverflow.com/a/35270047/3208553
*/
flex-grow: 1;
justify-content: center;
z-index: 2;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
padding: 1rem 0.5rem;
text-align: center;
a,
a:link,
......
......@@ -16,6 +16,7 @@ export const AccountCard = ({
address,
name,
type,
screen,
shortAddress,
...otherProps
}) => (
......@@ -23,7 +24,7 @@ export const AccountCard = ({
<div className='account'>
<Avatar address={address} type={type} />
<Information>
<Name name={name} />
<Name name={name} screen={screen} />
<Address address={address} short={shortAddress} />
</Information>
</div>
......@@ -38,5 +39,6 @@ AccountCard.Name = Name;
AccountCard.propTypes = {
address: PropTypes.string,
name: PropTypes.string,
screen: PropTypes.string,
shortAddress: PropTypes.bool
};
......@@ -8,12 +8,16 @@ import PropTypes from 'prop-types';
import { Placeholder } from '../../Placeholder';
export const Name = ({ name, ...otherProps }) => (
<div className='account_name' {...otherProps}>
export const Name = ({ name, screen, ...otherProps }) => (
<div
className={`account_name ${screen !== 'accounts' ? '-header' : ''}`}
{...otherProps}
>
{name || <Placeholder height={18} width={100} />}
</div>
);
Name.propTypes = {
name: PropTypes.string
name: PropTypes.string,
screen: PropTypes.string
};
......@@ -6,7 +6,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Address } from '../AccountCard/Address';
import { Avatar } from '../AccountCard/Avatar';
import { Information } from '../AccountCard/Information';
import { Name } from '../AccountCard/Name';
import { Clickable } from '../Clickable';
import { ClickToCopy } from '../ClickToCopy';
import { Header } from '../Header';
......@@ -36,15 +39,12 @@ export const AccountHeader = ({
address &&
name &&
type && (
<Container address={address}>
<Avatar
address={address}
scale={2}
type={type}
style={{ display: 'inline-block', marginRight: '5px' }}
/>
{name} <br />
<span className='account_address'>{address}</span>
<Container address={address} className='account'>
<Avatar address={address} scale={4} type={type} />
<Information>
<Name name={name} />
<Address address={address} short />
</Information>
</Container>
)
}
......
......@@ -10,11 +10,11 @@ import { Placeholder } from '../Placeholder';
export const Header = ({ left, right, title }) => (
<div className='header-nav'>
<div className='header-nav_left'>{left}</div>
<div className='header-nav_title'>
<div className='header-nav header-nav_left'>{left}</div>
<div className='header-nav header-nav_title'>
{title || <Placeholder height={24} width={150} />}
</div>
<div className='header-nav_right'>{right}</div>
<div className='header-nav header-nav_right'>{right}</div>
</div>
);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment