diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-01-31 19:16:35 +0100 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-01-31 19:16:35 +0100 |
commit | 8ef79d8dc9de33975bd793587020a259ef020276 (patch) | |
tree | 39180c8f413aa5ae1d745dec25a18cbc2268cb26 | |
parent | 8b9c537d5af531e140fc42d60cba1530e4e27839 (diff) |
Revert to animating avatars by default
-rw-r--r-- | app/assets/javascripts/components/components/avatar.jsx | 19 |
1 files changed, 17 insertions, 2 deletions
diff --git a/app/assets/javascripts/components/components/avatar.jsx b/app/assets/javascripts/components/components/avatar.jsx index 8f407ee5f..0237a1904 100644 --- a/app/assets/javascripts/components/components/avatar.jsx +++ b/app/assets/javascripts/components/components/avatar.jsx @@ -91,7 +91,14 @@ const Avatar = React.createClass({ propTypes: { src: React.PropTypes.string.isRequired, size: React.PropTypes.number.isRequired, - style: React.PropTypes.object + style: React.PropTypes.object, + animated: React.PropTypes.bool + }, + + getDefaultProps () { + return { + animated: true + }; }, getInitialState () { @@ -129,9 +136,17 @@ const Avatar = React.createClass({ render () { const { hovering } = this.state; + if (this.props.animated) { + 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={{ borderRadius: '4px' }} /> + </div> + ); + } + return ( <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} crossOrigin='anonymous' onLoad={this.handleLoad} src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ position: 'absolute', top: '0', left: '0', opacity: hovering ? '1' : '0', borderRadius: '4px' }} /> + <img ref={this.setImageRef} onLoad={this.handleLoad} src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ position: 'absolute', top: '0', left: '0', opacity: hovering ? '1' : '0', borderRadius: '4px' }} /> <canvas ref={this.setCanvasRef} style={{ borderRadius: '4px', width: this.props.size, height: this.props.size, opacity: hovering ? '0' : '1' }} /> </div> ); |