moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Preview uploaded media

This commit is contained in:
Alex Gleason 2021-05-17 15:15:46 -05:00
parent 1e3b2f853f
commit 3bae6e25e1
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/soapbox/features/compose/components/upload.js
View File

@ -27,7 +27,6 @@ class Upload extends ImmutablePureComponent {
onDescriptionChange: PropTypes.func.isRequired, onDescriptionChange: PropTypes.func.isRequired,
onOpenFocalPoint: PropTypes.func.isRequired, onOpenFocalPoint: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired,
features: PropTypes.object,
}; };
state = { state = {
@ -87,6 +86,10 @@ class Upload extends ImmutablePureComponent {
} }
} }
handleOpenModal = () => {
this.props.onOpenModal(this.props.media);
}
render() { render() {
const { intl, media } = this.props; const { intl, media } = this.props;
const active = this.state.hovered || this.state.focused; const active = this.state.hovered || this.state.focused;
@ -110,7 +113,7 @@ class Upload extends ImmutablePureComponent {
> >
<div className={classNames('compose-form__upload__actions', { active })}> <div className={classNames('compose-form__upload__actions', { active })}>
<button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button> <button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
{this.props.features.focalPoint && media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Change preview' /></button>} <button className='icon-button' onClick={this.handleOpenModal}><Icon id='search-plus' /> <FormattedMessage id='upload_form.preview' defaultMessage='Preview' /></button>
</div> </div>
<div className={classNames('compose-form__upload-description', { active })}> <div className={classNames('compose-form__upload-description', { active })}>

7
app/soapbox/features/compose/containers/upload_container.js
View File

@ -3,11 +3,10 @@ import Upload from '../components/upload';
import { undoUploadCompose, changeUploadCompose } from '../../../actions/compose'; import { undoUploadCompose, changeUploadCompose } from '../../../actions/compose';
import { openModal } from '../../../actions/modal'; import { openModal } from '../../../actions/modal';
import { submitCompose } from '../../../actions/compose'; import { submitCompose } from '../../../actions/compose';
import { getFeatures } from 'soapbox/utils/features'; import { List as ImmutableList } from 'immutable';
const mapStateToProps = (state, { id }) => ({ const mapStateToProps = (state, { id }) => ({
media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id), media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
features: getFeatures(state.get('instance')),
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
@ -24,6 +23,10 @@ const mapDispatchToProps = dispatch => ({
dispatch(openModal('FOCAL_POINT', { id })); dispatch(openModal('FOCAL_POINT', { id }));
}, },
onOpenModal: media => {
dispatch(openModal('MEDIA', { media: ImmutableList.of(media), index: 0 }));
},
onSubmit(router) { onSubmit(router) {
dispatch(submitCompose(router)); dispatch(submitCompose(router));
}, },

1
app/styles/components/compose-form.scss
View File

@ -282,7 +282,6 @@
.compose-form__upload-thumbnail { .compose-form__upload-thumbnail {
border-radius: 4px; border-radius: 4px;
background-position: center; background-position: center;
background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 140px; height: 140px;
width: 100%; width: 100%;