use <img> instead of <div> for avatars
This lets you right click steal them more easily
This commit is contained in:
parent
e8cfabcf92
commit
a34b7d3b5e
|
@ -57,14 +57,14 @@ export default class Avatar extends React.PureComponent {
|
||||||
backgroundSize: `${size}px ${size}px`,
|
backgroundSize: `${size}px ${size}px`,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let imageSrc = staticSrc;
|
||||||
if (hovering || animate) {
|
if (hovering || animate) {
|
||||||
style.backgroundImage = `url(${src})`;
|
imageSrc = src;
|
||||||
} else {
|
|
||||||
style.backgroundImage = `url(${staticSrc})`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<img
|
||||||
|
src={imageSrc}
|
||||||
className={computedClass}
|
className={computedClass}
|
||||||
onMouseEnter={this.handleMouseEnter}
|
onMouseEnter={this.handleMouseEnter}
|
||||||
onMouseLeave={this.handleMouseLeave}
|
onMouseLeave={this.handleMouseLeave}
|
||||||
|
|
|
@ -67,6 +67,8 @@ export default class AvatarComposite extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const imageSrc = account.get(animate ? 'avatar' : 'avatar_static');
|
||||||
|
|
||||||
const style = {
|
const style = {
|
||||||
left: left,
|
left: left,
|
||||||
top: top,
|
top: top,
|
||||||
|
@ -74,8 +76,6 @@ export default class AvatarComposite extends React.PureComponent {
|
||||||
bottom: bottom,
|
bottom: bottom,
|
||||||
width: `${width}%`,
|
width: `${width}%`,
|
||||||
height: `${height}%`,
|
height: `${height}%`,
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -86,7 +86,7 @@ export default class AvatarComposite extends React.PureComponent {
|
||||||
title={`@${account.get('acct')}`}
|
title={`@${account.get('acct')}`}
|
||||||
key={account.get('id')}
|
key={account.get('id')}
|
||||||
>
|
>
|
||||||
<div style={style} data-avatar-of={`@${account.get('acct')}`} />
|
<img src={imageSrc} style={style} data-avatar-of={`@${account.get('acct')}`} />
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -53,14 +53,14 @@ export default class Avatar extends React.PureComponent {
|
||||||
backgroundSize: `${size}px ${size}px`,
|
backgroundSize: `${size}px ${size}px`,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let imageSrc = staticSrc;
|
||||||
if (hovering || animate) {
|
if (hovering || animate) {
|
||||||
style.backgroundImage = `url(${src})`;
|
imageSrc = src;
|
||||||
} else {
|
|
||||||
style.backgroundImage = `url(${staticSrc})`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<img
|
||||||
|
src={imageSrc}
|
||||||
className={className}
|
className={className}
|
||||||
onMouseEnter={this.handleMouseEnter}
|
onMouseEnter={this.handleMouseEnter}
|
||||||
onMouseLeave={this.handleMouseLeave}
|
onMouseLeave={this.handleMouseLeave}
|
||||||
|
|
Reference in New Issue