Display badges on summary view (#4689)

This commit is contained in:
Jaco Greeff 2017-02-28 16:31:22 +01:00 committed by GitHub
parent ea877cb91e
commit 4534590f39
6 changed files with 101 additions and 34 deletions

View File

@ -28,6 +28,7 @@
}
.empty {
min-height: 24px;
line-height: 24px;
opacity: 0.25;
overflow: hidden;

View File

@ -96,7 +96,7 @@ export default class Balance extends Component {
<div className={ styles.empty }>
<FormattedMessage
id='ui.balance.none'
defaultMessage='There are no balances associated with this account'
defaultMessage='No balances associated with this account'
/>
</div>
);

View File

@ -19,29 +19,40 @@
margin-top: 1em;
}
.certification {
display: inline-block;
position: relative;
margin-top: 1em;
margin-right: .5em;
padding: .3em .6em .2em 2.6em;
.certification,
.certificationIcon {
border-radius: 1em;
display: inline-block;
line-height: 1em;
text-transform: uppercase;
background-color: rgba(255, 255, 255, 0.07);
}
position: relative;
.certification:last-child {
margin-right: 0;
}
.icon {
position: absolute;
top: -.25em;
left: 0;
.icon {
width: 2em;
height: 2em;
margin: 0;
padding: 0;
border-radius: 1em;
}
}
.certificationIcon {
margin-left: 0.5em;
}
.certification {
background-color: rgba(255, 255, 255, 0.07);
margin-right: 0.5em;
margin-top: 1em;
padding: 0.3em 0.6em 0.2em 2.6em;
text-transform: uppercase;
&:last-child {
margin-right: 0;
}
.icon {
position: absolute;
top: -.25em;
left: 0;
}
}

View File

@ -28,7 +28,8 @@ class Certifications extends Component {
address: PropTypes.string.isRequired,
certifications: PropTypes.array.isRequired,
className: PropTypes.string,
dappsUrl: PropTypes.string.isRequired
dappsUrl: PropTypes.string.isRequired,
showOnlyIcon: PropTypes.bool
}
render () {
@ -46,16 +47,47 @@ class Certifications extends Component {
}
renderCertification = (certification) => {
const { name, title, icon } = certification;
const { dappsUrl } = this.props;
const { name, icon } = certification;
const { dappsUrl, showOnlyIcon } = this.props;
const classNames = `${styles.certification} ${!icon ? styles.noIcon : ''}`;
const img = icon ? dappsUrl + hashToImageUrl(icon) : defaultIcon;
const classNames = [
showOnlyIcon
? styles.certificationIcon
: styles.certification,
!icon
? styles.noIcon
: ''
];
return (
<div className={ classNames } key={ name }>
<img className={ styles.icon } src={ img } />
<div className={ styles.text }>{ title || name }</div>
<div
className={ classNames.join(' ') }
key={ name }
>
<img
className={ styles.icon }
src={
icon
? `${dappsUrl}${hashToImageUrl(icon)}`
: defaultIcon
}
/>
{ this.renderCertificationName(certification) }
</div>
);
}
renderCertificationName = (certification) => {
const { showOnlyIcon } = this.props;
const { name, title } = certification;
if (showOnlyIcon) {
return null;
}
return (
<div className={ styles.text }>
{ title || name }
</div>
);
}

View File

@ -144,7 +144,10 @@ class Summary extends Component {
}
/>
</div>
<div className={ styles.summary }>
{ this.renderBalance(true) }
{ this.renderCertifications(true) }
</div>
</Container>
);
}
@ -251,7 +254,7 @@ class Summary extends Component {
);
}
renderCertifications () {
renderCertifications (onlyIcon) {
const { showCertifications, account } = this.props;
if (!showCertifications) {
@ -261,7 +264,12 @@ class Summary extends Component {
return (
<Certifications
address={ account.address }
className={ styles.Certifications }
className={
onlyIcon
? styles.iconCertifications
: styles.fullCertifications
}
showOnlyIcon={ onlyIcon }
/>
);
}

View File

@ -41,10 +41,21 @@
margin-top: 1.5em;
}
.summary {
position: relative;
.ethBalances {
opacity: 1;
}
.iconCertifications {
bottom: -0.25em;
opacity: 1;
position: absolute;
right: 0;
}
}
.owners {
display: flex;
justify-content: center;
@ -71,6 +82,10 @@
.ethBalances {
opacity: 0;
}
.iconCertifications {
opacity: 0;
}
}
}