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,
onOpenFocalPoint: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
features: PropTypes.object,
};
state = {
@ -87,6 +86,10 @@ class Upload extends ImmutablePureComponent {
}
}
handleOpenModal = () => {
this.props.onOpenModal(this.props.media);
}
render() {
const { intl, media } = this.props;
const active = this.state.hovered || this.state.focused;
@ -110,7 +113,7 @@ class Upload extends ImmutablePureComponent {
>
<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>
{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 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 { openModal } from '../../../actions/modal';
import { submitCompose } from '../../../actions/compose';
import { getFeatures } from 'soapbox/utils/features';
import { List as ImmutableList } from 'immutable';
const mapStateToProps = (state, { id }) => ({
media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
features: getFeatures(state.get('instance')),
});
const mapDispatchToProps = dispatch => ({
@ -24,6 +23,10 @@ const mapDispatchToProps = dispatch => ({
dispatch(openModal('FOCAL_POINT', { id }));
},
onOpenModal: media => {
dispatch(openModal('MEDIA', { media: ImmutableList.of(media), index: 0 }));
},
onSubmit(router) {
dispatch(submitCompose(router));
},

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

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