Chats: improve attachments, make modal work

This commit is contained in:
Alex Gleason 2020-09-05 16:39:57 -05:00
parent d8d5186a01
commit 84e5175481
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 18 additions and 4 deletions

View File

@ -8,6 +8,7 @@ import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
import { fetchChatMessages } from 'soapbox/actions/chats'; import { fetchChatMessages } from 'soapbox/actions/chats';
import emojify from 'soapbox/features/emoji/emoji'; import emojify from 'soapbox/features/emoji/emoji';
import classNames from 'classnames'; import classNames from 'classnames';
import { openModal } from 'soapbox/actions/modal';
import { escape, throttle } from 'lodash'; import { escape, throttle } from 'lodash';
import { MediaGallery } from 'soapbox/features/ui/util/async-components'; import { MediaGallery } from 'soapbox/features/ui/util/async-components';
import Bundle from 'soapbox/features/ui/components/bundle'; import Bundle from 'soapbox/features/ui/components/bundle';
@ -117,6 +118,10 @@ class ChatMessageList extends ImmutablePureComponent {
trailing: true, trailing: true,
}); });
onOpenMedia = (media, index) => {
this.props.dispatch(openModal('MEDIA', { media, index }));
};
maybeRenderMedia = chatMessage => { maybeRenderMedia = chatMessage => {
const attachment = chatMessage.get('attachment'); const attachment = chatMessage.get('attachment');
if (!attachment) return null; if (!attachment) return null;
@ -125,7 +130,8 @@ class ChatMessageList extends ImmutablePureComponent {
{Component => ( {Component => (
<Component <Component
media={ImmutableList([attachment])} media={ImmutableList([attachment])}
height={100} height={120}
onOpenMedia={this.onOpenMedia}
/> />
)} )}
</Bundle> </Bundle>

View File

@ -291,7 +291,15 @@
} }
} }
.chat-message .media-gallery__item-thumbnail img, .chat-message .media-gallery {
.chat-message .media-gallery__item-thumbnail .still-image img { height: 120px !important;
.spoiler-button {
display: none;
}
&__item-thumbnail img,
&__item-thumbnail .still-image img {
object-fit: contain; object-fit: contain;
} }
}