diff options
| -rw-r--r-- | app/javascript/mastodon/components/status.js | 22 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 4 |
2 files changed, 17 insertions, 9 deletions
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index ec9b2a255..a3b9c477b 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -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'> diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index c1cf5a8c3..8f4a2b3cd 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -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 { |