diff options
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/components/components/avatar.jsx | 33 |
1 files changed, 31 insertions, 2 deletions
diff --git a/app/assets/javascripts/components/components/avatar.jsx b/app/assets/javascripts/components/components/avatar.jsx index 687aa7bb9..30467da4d 100644 --- a/app/assets/javascripts/components/components/avatar.jsx +++ b/app/assets/javascripts/components/components/avatar.jsx @@ -8,12 +8,41 @@ const Avatar = React.createClass({ style: React.PropTypes.object }, + getInitialState () { + return { + hovering: false + }; + }, + mixins: [PureRenderMixin], + handleMouseEnter () { + this.setState({ hovering: true }); + }, + + handleMouseLeave () { + this.setState({ hovering: false }); + }, + + componentDidMount () { + this.canvas.getContext('2d').drawImage(this.image, 0, 0, this.props.size, this.props.size); + }, + + setImageRef (c) { + this.image = c; + }, + + setCanvasRef (c) { + this.canvas = c; + }, + render () { + const { hovering } = this.state; + return ( - <div style={{ ...this.props.style, width: `${this.props.size}px`, height: `${this.props.size}px` }}> - <img src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ display: 'block', borderRadius: '4px' }} /> + <div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={{ ...this.props.style, width: `${this.props.size}px`, height: `${this.props.size}px`, position: 'relative' }}> + <img ref={this.setImageRef} src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ position: 'absolute', top: '0', left: '0', display: hovering ? 'block' : 'none', borderRadius: '4px' }} /> + <canvas ref={this.setCanvasRef} width={this.props.size} height={this.props.size} style={{ borderRadius: '4px' }} /> </div> ); } |