Chats: improve attachments, make modal work
This commit is contained in:
parent
d8d5186a01
commit
84e5175481
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue