kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
AttachmentThumbs: click to expand post
rodzic
17f21c4106
commit
2608de7af4
|
@ -13,6 +13,7 @@ class AttachmentThumbs extends ImmutablePureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
dispatch: PropTypes.func.isRequired,
|
dispatch: PropTypes.func.isRequired,
|
||||||
media: ImmutablePropTypes.list.isRequired,
|
media: ImmutablePropTypes.list.isRequired,
|
||||||
|
onClick: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
renderLoading() {
|
renderLoading() {
|
||||||
|
@ -24,19 +25,24 @@ class AttachmentThumbs extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { media } = this.props;
|
const { media, onClick } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Bundle fetchComponent={MediaGallery} loading={this.renderLoading}>
|
<div className='attachment-thumbs'>
|
||||||
{Component => (
|
<Bundle fetchComponent={MediaGallery} loading={this.renderLoading}>
|
||||||
<Component
|
{Component => (
|
||||||
media={media}
|
<Component
|
||||||
onOpenMedia={this.onOpenMedia}
|
media={media}
|
||||||
height={50}
|
onOpenMedia={this.onOpenMedia}
|
||||||
compact
|
height={50}
|
||||||
/>
|
compact
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Bundle>
|
||||||
|
{onClick && (
|
||||||
|
<div className='attachment-thumbs__clickable-region' onClick={onClick} />
|
||||||
)}
|
)}
|
||||||
</Bundle>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -389,7 +389,7 @@ class Status extends ImmutablePureComponent {
|
||||||
if (size > 0) {
|
if (size > 0) {
|
||||||
if (this.props.muted) {
|
if (this.props.muted) {
|
||||||
media = (
|
media = (
|
||||||
<AttachmentThumbs media={status.get('media_attachments')} />
|
<AttachmentThumbs media={status.get('media_attachments')} onClick={this.handleClick} />
|
||||||
);
|
);
|
||||||
} else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
|
} else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
|
||||||
const video = status.getIn(['media_attachments', 0]);
|
const video = status.getIn(['media_attachments', 0]);
|
||||||
|
|
|
@ -714,3 +714,18 @@ a.status-card.compact:hover {
|
||||||
padding: 15px 0 10px;
|
padding: 15px 0 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.attachment-thumbs {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__clickable-region {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Ładowanie…
Reference in New Issue