Media previews for collapsed toots
This commit is contained in:
parent
8ea779e59a
commit
efacfec3ed
|
@ -175,6 +175,7 @@ class StatusUnextended extends ImmutablePureComponent {
|
|||
|
||||
render () {
|
||||
let media = null;
|
||||
let thumb = null;
|
||||
let statusAvatar;
|
||||
|
||||
// Exclude intersectionObserverWrapper from `other` variable
|
||||
|
@ -221,8 +222,10 @@ class StatusUnextended extends ImmutablePureComponent {
|
|||
|
||||
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
|
||||
media = <VideoPlayer media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} onOpenVideo={this.props.onOpenVideo} />;
|
||||
if (!status.get('sensitive')) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
|
||||
} else {
|
||||
media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
|
||||
if (!status.get('sensitive')) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -233,7 +236,7 @@ class StatusUnextended extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')} ${isCollapsed ? 'status-collapsed' : ''}`} data-id={status.get('id')} ref={this.handleRef}>
|
||||
<div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')} ${isCollapsed ? 'status-collapsed' : ''}`} data-id={status.get('id')} ref={this.handleRef} style={{ backgroundImage: thumb && isCollapsed ? 'url(' + thumb + ')' : 'none' }}>
|
||||
<div className='status__info'>
|
||||
|
||||
<IconButton
|
||||
|
|
|
@ -454,6 +454,7 @@
|
|||
|
||||
.status__content,
|
||||
.reply-indicator__content {
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: $primary-text-color;
|
||||
|
@ -604,6 +605,19 @@
|
|||
|
||||
&.status-collapsed {
|
||||
height: 48px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(to bottom, transparentize($ui-base-color, .15), transparentize($ui-base-color, .3) 24px, transparentize($ui-base-color, .35));
|
||||
content: "";
|
||||
}
|
||||
|
||||
.status__content {
|
||||
height: 20px;
|
||||
|
@ -644,6 +658,7 @@
|
|||
}
|
||||
|
||||
.status__collapse-button {
|
||||
position: relative;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
@ -1162,6 +1177,7 @@
|
|||
|
||||
.display-name {
|
||||
display: block;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
Loading…
Reference in New Issue