cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Show upload options on click as well as hover (#9074) 

Fix #8918
This commit is contained in:
Eugen Rochko 2018-10-24 18:17:15 +02:00 committed by GitHub
parent 9f3283086f
commit 288e435fe5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/mastodon/features/compose/components/upload.js
View File

@ -44,11 +44,13 @@ class Upload extends ImmutablePureComponent {
this.props.onSubmit(this.context.router.history); this.props.onSubmit(this.context.router.history);
} }
handleUndoClick = () => { handleUndoClick = e => {
e.stopPropagation();
this.props.onUndo(this.props.media.get('id')); this.props.onUndo(this.props.media.get('id'));
} }
handleFocalPointClick = () => { handleFocalPointClick = e => {
e.stopPropagation();
this.props.onOpenFocalPoint(this.props.media.get('id')); this.props.onOpenFocalPoint(this.props.media.get('id'));
} }
@ -68,6 +70,10 @@ class Upload extends ImmutablePureComponent {
this.setState({ focused: true }); this.setState({ focused: true });
} }
handleClick = () => {
this.setState({ focused: true });
}
handleInputBlur = () => { handleInputBlur = () => {
const { dirtyDescription } = this.state; const { dirtyDescription } = this.state;
@ -88,7 +94,7 @@ class Upload extends ImmutablePureComponent {
const y = ((focusY / -2) + .5) * 100; const y = ((focusY / -2) + .5) * 100;
return ( 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 }) }}> <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
{({ scale }) => ( {({ scale }) => (
<div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}> <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>