Fixed Snackbar not showing and/or behind transactions (#2730)

This commit is contained in:
Nicolas Gotchac 2016-10-19 16:58:14 +02:00
parent 60c01e8cc3
commit c50ef499b3
2 changed files with 66 additions and 51 deletions

View File

@ -41,3 +41,8 @@
.uuidline {
display: inline-block;
}
.address {
white-space: nowrap;
font-family: monospace;
}

View File

@ -19,7 +19,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
import IconButton from 'material-ui/IconButton';
import Snackbar from 'material-ui/Snackbar';
import CopyIcon from 'material-ui/svg-icons/content/content-copy';
import { lightWhite, fullWhite, lightBlack } from 'material-ui/styles/colors';
import { lightWhite, fullWhite, darkBlack } from 'material-ui/styles/colors';
import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags } from '../../../ui';
@ -63,58 +63,68 @@ export default class Header extends Component {
: <div className={ styles.uuidline }>uuid: { uuid }</div>;
return (
<Container>
<IdentityIcon
address={ address } />
<div className={ styles.floatleft }>
<ContainerTitle title={ <IdentityName address={ address } unknown /> } />
<div className={ styles.addressline }>
<Snackbar
open={ addressCopied }
message={ `Address ${address} copied to clipboard` }
autoHideDuration={ 4000 }
onRequestClose={ this.handleCopyAddressClose }
bodyStyle={ {
backgroundColor: lightBlack
} }
/>
<CopyToClipboard
onCopy={ this.handleCopyAddress }
text={ address } >
<IconButton
tooltip='Copy address to clipboard'
tooltipPosition='top-center'
style={ {
width: 32,
height: 16,
padding: 0
} }
iconStyle={ {
width: 16,
height: 16
} }>
<CopyIcon
color={ addressCopied ? lightWhite : fullWhite }
/>
</IconButton>
</CopyToClipboard>
{ address }
<div>
<Snackbar
open={ addressCopied }
message={
<span>
Address
<span className={ styles.address }> { address } </span>
copied to clipboard
</span>
}
autoHideDuration={ 4000 }
onRequestClose={ this.handleCopyAddressClose }
bodyStyle={ {
backgroundColor: darkBlack
} }
/>
<Container>
<IdentityIcon
address={ address } />
<div className={ styles.floatleft }>
<ContainerTitle title={ <IdentityName address={ address } unknown /> } />
<div className={ styles.addressline }>
<CopyToClipboard
onCopy={ this.handleCopyAddress }
text={ address } >
<IconButton
tooltip='Copy address to clipboard'
tooltipPosition='top-center'
style={ {
width: 32,
height: 16,
padding: 0
} }
iconStyle={ {
width: 16,
height: 16
} }>
<CopyIcon
color={ addressCopied ? lightWhite : fullWhite }
/>
</IconButton>
</CopyToClipboard>
{ address }
</div>
{ uuidText }
<div className={ styles.infoline }>
{ meta.description }
</div>
{ this.renderTxCount() }
</div>
{ uuidText }
<div className={ styles.infoline }>
{ meta.description }
<div className={ styles.tags }>
<Tags tags={ meta.tags } />
</div>
{ this.renderTxCount() }
</div>
<div className={ styles.tags }>
<Tags tags={ meta.tags } />
</div>
<div className={ styles.balances }>
<Balance
account={ account }
balance={ balance } />
</div>
</Container>
<div className={ styles.balances }>
<Balance
account={ account }
balance={ balance } />
</div>
</Container>
</div>
);
}