diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/composer/upload_form/item')
-rw-r--r-- | app/javascript/flavours/glitch/features/composer/upload_form/item/index.js | 43 |
1 files changed, 34 insertions, 9 deletions
diff --git a/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js b/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js index ec67b8ef8..b9986588f 100644 --- a/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js +++ b/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js @@ -25,6 +25,10 @@ const messages = defineMessages({ defaultMessage: 'Describe for the visually impaired', id: 'upload_form.description', }, + crop: { + defaultMessage: 'Crop', + id: 'upload_form.focus', + }, }); // Handlers. @@ -77,6 +81,17 @@ const handlers = { onRemove(id); } }, + + // Opens the focal point modal. + handleFocalPointClick () { + const { + id, + onOpenFocalPointModal, + } = this.props; + if (id && onOpenFocalPointModal) { + onOpenFocalPointModal(id); + } + }, }; // The component. @@ -102,11 +117,15 @@ export default class ComposerUploadFormItem extends React.PureComponent { handleMouseEnter, handleMouseLeave, handleRemove, + handleFocalPointClick, } = this.handlers; const { description, intl, preview, + focusX, + focusY, + mediaType, } = this.props; const { focused, @@ -114,6 +133,8 @@ export default class ComposerUploadFormItem extends React.PureComponent { dirtyDescription, } = this.state; const computedClass = classNames('composer--upload_form--item', { active: hovered || focused }); + const x = ((focusX / 2) + .5) * 100; + const y = ((focusY / -2) + .5) * 100; // The result. return ( @@ -136,15 +157,15 @@ export default class ComposerUploadFormItem extends React.PureComponent { style={{ transform: `scale(${scale})`, backgroundImage: preview ? `url(${preview})` : null, + backgroundPosition: `${x}% ${y}%` }} > - <IconButton - className='close' - icon='times' - onClick={handleRemove} - size={36} - title={intl.formatMessage(messages.undo)} - /> + <div className={classNames('composer--upload_form--actions', { active: hovered || focused })}> + <button className='icon-button' onClick={handleRemove}> + <i className='fa fa-times' /> <FormattedMessage {...messages.undo} /> + </button> + {mediaType === 'image' && <button className='icon-button' onClick={handleFocalPointClick}><i className='fa fa-crosshairs' /> <FormattedMessage {...messages.crop} /></button>} + </div> <label> <span style={{ display: 'none' }}><FormattedMessage {...messages.description} /></span> <input @@ -171,7 +192,11 @@ ComposerUploadFormItem.propTypes = { description: PropTypes.string, id: PropTypes.string, intl: PropTypes.object.isRequired, - onChangeDescription: PropTypes.func, - onRemove: PropTypes.func, + onChangeDescription: PropTypes.func.isRequired, + onOpenFocalPointModal: PropTypes.func.isRequired, + onRemove: PropTypes.func.isRequired, + focusX: PropTypes.number, + focusY: PropTypes.number, + mediaType: PropTypes.string, preview: PropTypes.string, }; |