Add clipboard tooltip

This commit is contained in:
Thomas Nordquist
2019-02-18 14:54:29 +01:00
parent 09afe2a30c
commit d44a6e3159
3 changed files with 23 additions and 19 deletions

View File

@@ -24,7 +24,6 @@ const styles: StyleRulesCallback = theme => ({
height: '224px', height: '224px',
backgroundColor: 'rebeccapurple', backgroundColor: 'rebeccapurple',
marginBottom: 0, marginBottom: 0,
marginTop: 'auto',
padding: '8px', padding: '8px',
}, },
}) })

View File

@@ -1,5 +1,5 @@
import * as React from 'react' import * as React from 'react'
import { Snackbar, SnackbarContent } from '@material-ui/core' import { Snackbar, SnackbarContent, Tooltip } from '@material-ui/core'
import FileCopy from '@material-ui/icons/FileCopy' import FileCopy from '@material-ui/icons/FileCopy'
import Check from '@material-ui/icons/Check' import Check from '@material-ui/icons/Check'
import green from '@material-ui/core/colors/green' import green from '@material-ui/core/colors/green'
@@ -35,25 +35,29 @@ class Copy extends React.Component<Props, State> {
? <FileCopy fontSize="inherit" style={{ cursor: 'pointer' }} onClick={this.handleClick} /> ? <FileCopy fontSize="inherit" style={{ cursor: 'pointer' }} onClick={this.handleClick} />
: <Check fontSize="inherit" style={{ cursor: 'default' }} /> : <Check fontSize="inherit" style={{ cursor: 'default' }} />
return <span> return (
<span style={{ fontSize: '16px' }}>{icon}</span>
<span> <span>
<Snackbar <Tooltip placement="top" title="Copy to clipboard">
anchorOrigin={{ <span style={{ fontSize: '16px' }}>{icon}</span>
vertical: 'bottom', </Tooltip>
horizontal: 'left', <span>
}} <Snackbar
open={this.state.snackBarOpen} anchorOrigin={{
autoHideDuration={2000} vertical: 'bottom',
onClose={() => { this.setState({ snackBarOpen: false }) }} horizontal: 'left',
> }}
<SnackbarContent open={this.state.snackBarOpen}
className={this.props.classes.snackbar} autoHideDuration={2000}
message="Copied to clipboard" onClose={() => { this.setState({ snackBarOpen: false }) }}
/> >
</Snackbar> <SnackbarContent
className={this.props.classes.snackbar}
message="Copied to clipboard"
/>
</Snackbar>
</span>
</span> </span>
</span> )
} }
private handleClick = (event: React.MouseEvent) => { private handleClick = (event: React.MouseEvent) => {

View File

@@ -11,6 +11,7 @@ import {
Select, Select,
Typography, Typography,
Switch, Switch,
Tooltip,
} from '@material-ui/core' } from '@material-ui/core'
import { StyleRulesCallback, withStyles } from '@material-ui/core/styles' import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'