fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-16 07:06:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds media icons to toots

Browse source
This commit is contained in:
kibigo! 2017-06-25 14:22:11 -07:00
parent efacfec3ed
commit 4bc237fcfe
2 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/javascript/mastodon/components/status.js
View file

@ -175,6 +175,7 @@ class StatusUnextended extends ImmutablePureComponent {
render () {
let media = null;
let mediaType = null;
let thumb = null;
let statusAvatar;
@ -222,9 +223,11 @@ 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} />;
mediaType = <i className='fa fa-fw fa-video-camera' aria-hidden='true' />;
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} />;
mediaType = status.get('media_attachments').size > 1 ? <i className='fa fa-fw fa-th-large' aria-hidden='true' /> : <i className='fa fa-fw fa-picture-o' aria-hidden='true' />;
if (!status.get('sensitive')) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
}
}
@ -239,14 +242,17 @@ class StatusUnextended extends ImmutablePureComponent {
<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
className='status__collapse-button'
animate flip
active={isCollapsed}
title={isCollapsed ? intl.formatMessage(messages.uncollapse) : intl.formatMessage(messages.collapse)}
icon='angle-double-up'
onClick={this.handleCollapsedClick}
/>
<div className='status__info__icons'>
{mediaType}
<IconButton
className='status__collapse-button'
animate flip
active={isCollapsed}
title={isCollapsed ? intl.formatMessage(messages.uncollapse) : intl.formatMessage(messages.collapse)}
icon='angle-double-up'
onClick={this.handleCollapsedClick}
/>
</div>
<a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'>

4
app/javascript/styles/components.scss
View file

@ -657,9 +657,11 @@
line-height: 24px;
}
.status__collapse-button {
.status__info__icons {
display: inline-block;
position: relative;
float: right;
color: $ui-highlight-color;
}
.status-check-box {