0
0
Fork 0

Change media modals look in web UI (#15217)

- Change overlay background to match color of viewed image
- Add interactive reply/boost/favourite buttons to footer of modal
- Change ugly "View context" link to button among the action bar
This commit is contained in:
Eugen Rochko 2020-11-27 03:24:11 +01:00 committed by GitHub
parent cb7bd8ee03
commit 1e89e2ed98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 339 additions and 146 deletions

View file

@ -3,9 +3,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import Video from 'mastodon/features/video';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import Icon from 'mastodon/components/icon';
export const previewState = 'previewVideoModal';
@ -13,7 +10,7 @@ export default class VideoModal extends ImmutablePureComponent {
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
status: ImmutablePropTypes.map,
statusId: PropTypes.string,
options: PropTypes.shape({
startTime: PropTypes.number,
autoPlay: PropTypes.bool,
@ -48,15 +45,8 @@ export default class VideoModal extends ImmutablePureComponent {
}
}
handleStatusClick = e => {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
}
}
render () {
const { media, status, onClose } = this.props;
const { media, onClose } = this.props;
const options = this.props.options || {};
return (
@ -75,12 +65,6 @@ export default class VideoModal extends ImmutablePureComponent {
alt={media.get('description')}
/>
</div>
{status && (
<div className={classNames('media-modal__meta')}>
<a href={status.get('url')} onClick={this.handleStatusClick}><Icon id='comments' /> <FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>
</div>
)}
</div>
);
}