Add form element on focal point modal (#19834)

* Add form element on focal point modal

* Add type="button" for detection button
This commit is contained in:
Sunny Ripert 2022-11-07 15:41:42 +01:00 committed by GitHub
parent 5925a31b78
commit 8515bc7962
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 8 deletions

View File

@ -176,14 +176,14 @@ class FocalPointModal extends ImmutablePureComponent {
handleKeyDown = (e) => {
if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
e.stopPropagation();
this.props.onChangeDescription(e.target.value);
this.handleSubmit();
this.handleSubmit(e);
}
}
handleSubmit = () => {
handleSubmit = (e) => {
e.preventDefault();
e.stopPropagation();
this.props.onSave(this.props.description, this.props.focusX, this.props.focusY);
}
@ -313,7 +313,7 @@ class FocalPointModal extends ImmutablePureComponent {
</div>
<div className='report-modal__container'>
<div className='report-modal__comment'>
<form className='report-modal__comment' onSubmit={this.handleSubmit} >
{focals && <p><FormattedMessage id='upload_modal.hint' defaultMessage='Click or drag the circle on the preview to choose the focal point which will always be in view on all thumbnails.' /></p>}
{thumbnailable && (
@ -361,12 +361,23 @@ class FocalPointModal extends ImmutablePureComponent {
</div>
<div className='setting-text__toolbar'>
<button disabled={detecting || media.get('type') !== 'image' || is_changing_upload} className='link-button' onClick={this.handleTextDetection}><FormattedMessage id='upload_modal.detect_text' defaultMessage='Detect text from picture' /></button>
<button
type='button'
disabled={detecting || media.get('type') !== 'image' || is_changing_upload}
className='link-button'
onClick={this.handleTextDetection}
>
<FormattedMessage id='upload_modal.detect_text' defaultMessage='Detect text from picture' />
</button>
<CharacterCounter max={1500} text={detecting ? '' : description} />
</div>
<Button disabled={!dirty || detecting || isUploadingThumbnail || length(description) > 1500 || is_changing_upload} text={intl.formatMessage(is_changing_upload ? messages.applying : messages.apply)} onClick={this.handleSubmit} />
</div>
<Button
type='submit'
disabled={!dirty || detecting || isUploadingThumbnail || length(description) > 1500 || is_changing_upload}
text={intl.formatMessage(is_changing_upload ? messages.applying : messages.apply)}
/>
</form>
<div className='focal-point-modal__content'>
{focals && (