From 288e435fe536dc42fe7a13b8c965f21f8d68fb9e Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 24 Oct 2018 18:17:15 +0200
Subject: [PATCH] Show upload options on click as well as hover (#9074)
Fix #8918
---
.../mastodon/features/compose/components/upload.js | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)
diff --git a/app/javascript/mastodon/features/compose/components/upload.js b/app/javascript/mastodon/features/compose/components/upload.js
index 66c93452c..a1e99dcbb 100644
--- a/app/javascript/mastodon/features/compose/components/upload.js
+++ b/app/javascript/mastodon/features/compose/components/upload.js
@@ -44,11 +44,13 @@ class Upload extends ImmutablePureComponent {
this.props.onSubmit(this.context.router.history);
}
- handleUndoClick = () => {
+ handleUndoClick = e => {
+ e.stopPropagation();
this.props.onUndo(this.props.media.get('id'));
}
- handleFocalPointClick = () => {
+ handleFocalPointClick = e => {
+ e.stopPropagation();
this.props.onOpenFocalPoint(this.props.media.get('id'));
}
@@ -68,6 +70,10 @@ class Upload extends ImmutablePureComponent {
this.setState({ focused: true });
}
+ handleClick = () => {
+ this.setState({ focused: true });
+ }
+
handleInputBlur = () => {
const { dirtyDescription } = this.state;
@@ -88,7 +94,7 @@ class Upload extends ImmutablePureComponent {
const y = ((focusY / -2) + .5) * 100;
return (
- <div className='compose-form__upload' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+ <div className='compose-form__upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
<Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
{({ scale }) => (
<div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>