Merge pull request #2731 from ethcore/ng-copy-clipboard-fix

Fixed Snackbar not showing and/or behind transactions (#2730)
This commit is contained in:
Jaco Greeff 2016-10-19 18:04:18 +02:00 committed by GitHub
commit a71006ebc4
2 changed files with 66 additions and 51 deletions

View File

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