specter/mastodon
1
0
Fork 0
forked from fedi/mastodon
Code Pull requests Activity

Revert to animating avatars by default

Browse source
This commit is contained in:
Eugen Rochko 2017-01-31 19:16:35 +01:00
parent 8b9c537d5a
commit 8ef79d8dc9
1 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/assets/javascripts/components/components/avatar.jsx
View file

@ -91,7 +91,14 @@ const Avatar = React.createClass({
propTypes: { propTypes: {
src: React.PropTypes.string.isRequired, src: React.PropTypes.string.isRequired,
size: React.PropTypes.number.isRequired, size: React.PropTypes.number.isRequired,
style: React.PropTypes.object style: React.PropTypes.object,
animated: React.PropTypes.bool
},
getDefaultProps () {
return {
animated: true
};
}, },
getInitialState () { getInitialState () {
@ -129,9 +136,17 @@ const Avatar = React.createClass({
render () { render () {
const { hovering } = this.state; 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 ( return (
<div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={{ ...this.props.style, width: `${this.props.size}px`, height: `${this.props.size}px`, position: 'relative' }}> <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' }} /> <canvas ref={this.setCanvasRef} style={{ borderRadius: '4px', width: this.props.size, height: this.props.size, opacity: hovering ? '0' : '1' }} />
</div> </div>
); );