dark-firepit/mastodon
Archived
5
0
Fork 0
Code Issues Pull requests 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 () { render () {
let media = null; let media = null;
let mediaType = null;
let thumb = null; let thumb = null;
let statusAvatar; let statusAvatar;
@ -222,9 +223,11 @@ class StatusUnextended extends ImmutablePureComponent {
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { } 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} />; 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'); if (!status.get('sensitive')) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
} else { } else {
media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />; 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'); 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 ${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'> <div className='status__info'>
<IconButton <div className='status__info__icons'>
className='status__collapse-button' {mediaType}
animate flip <IconButton
active={isCollapsed} className='status__collapse-button'
title={isCollapsed ? intl.formatMessage(messages.uncollapse) : intl.formatMessage(messages.collapse)} animate flip
icon='angle-double-up' active={isCollapsed}
onClick={this.handleCollapsedClick} 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'> <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'> <div className='status__avatar'>

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

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