treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Fix avatar scaling on high-DPI displays (#573)

lolsob-rspec
Misty De Meo 2017-01-29 05:26:50 -08:00 committed by Eugen
parent e2f30cb2ff
commit f4fbed2aab
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/components/components/avatar.jsx
View File

@ -25,7 +25,7 @@ const Avatar = React.createClass({
}, },
handleLoad () { handleLoad () {
this.canvas.getContext('2d').drawImage(this.image, 0, 0, this.props.size, this.props.size); this.canvas.getContext('2d').drawImage(this.image, 0, 0, this.props.size * window.devicePixelRatio, this.props.size * window.devicePixelRatio);
}, },
setImageRef (c) { setImageRef (c) {
@ -42,7 +42,7 @@ const Avatar = React.createClass({
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} onLoad={this.handleLoad} src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ position: 'absolute', top: '0', left: '0', visibility: hovering ? 'visible' : 'hidden', 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', visibility: hovering ? 'visible' : 'hidden', borderRadius: '4px' }} />
<canvas ref={this.setCanvasRef} width={this.props.size} height={this.props.size} style={{ borderRadius: '4px' }} /> <canvas ref={this.setCanvasRef} width={this.props.size * window.devicePixelRatio} height={this.props.size * window.devicePixelRatio} style={{ borderRadius: '4px', width: this.props.size, height: this.props.size }} />
</div> </div>
); );
} }