diff options
Diffstat (limited to 'app/javascript/flavours/glitch/components/status_icons.js')
-rw-r--r-- | app/javascript/flavours/glitch/components/status_icons.js | 52 |
1 files changed, 45 insertions, 7 deletions
diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js index 4a2c62881..f4d0a7405 100644 --- a/app/javascript/flavours/glitch/components/status_icons.js +++ b/app/javascript/flavours/glitch/components/status_icons.js @@ -7,15 +7,23 @@ import { defineMessages, injectIntl } from 'react-intl'; // Mastodon imports. import IconButton from './icon_button'; import VisibilityIcon from './status_visibility_icon'; +import Icon from 'flavours/glitch/components/icon'; // Messages for use with internationalization stuff. const messages = defineMessages({ collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' }, + inReplyTo: { id: 'status.in_reply_to', defaultMessage: 'This toot is a reply' }, + previewCard: { id: 'status.has_preview_card', defaultMessage: 'Features an attached preview card' }, + pictures: { id: 'status.has_pictures', defaultMessage: 'Features attached pictures' }, + poll: { id: 'status.is_poll', defaultMessage: 'This toot is a poll' }, + video: { id: 'status.has_video', defaultMessage: 'Features attached videos' }, + audio: { id: 'status.has_audio', defaultMessage: 'Features attached audio files' }, + localOnly: { id: 'status.local_only', defaultMessage: 'Only visible from your instance' }, }); -@injectIntl -export default class StatusIcons extends React.PureComponent { +export default @injectIntl +class StatusIcons extends React.PureComponent { static propTypes = { status: ImmutablePropTypes.map.isRequired, @@ -36,6 +44,23 @@ export default class StatusIcons extends React.PureComponent { } } + mediaIconTitleText () { + const { intl, mediaIcon } = this.props; + + switch (mediaIcon) { + case 'link': + return intl.formatMessage(messages.previewCard); + case 'picture-o': + return intl.formatMessage(messages.pictures); + case 'tasks': + return intl.formatMessage(messages.poll); + case 'video-camera': + return intl.formatMessage(messages.video); + case 'music': + return intl.formatMessage(messages.audio); + } + } + // Rendering. render () { const { @@ -50,22 +75,35 @@ export default class StatusIcons extends React.PureComponent { return ( <div className='status__info__icons'> {status.get('in_reply_to_id', null) !== null ? ( - <i - className={`fa fa-fw fa-comment status__reply-icon`} + <Icon + className='status__reply-icon' + fixedWidth + id='comment' aria-hidden='true' + title={intl.formatMessage(messages.inReplyTo)} /> ) : null} + {status.get('local_only') && + <Icon + fixedWidth + id='home' + aria-hidden='true' + title={intl.formatMessage(messages.localOnly)} + />} {mediaIcon ? ( - <i - className={`fa fa-fw fa-${mediaIcon} status__media-icon`} + <Icon + fixedWidth + className='status__media-icon' + id={mediaIcon} aria-hidden='true' + title={this.mediaIconTitleText()} /> ) : null} {!directMessage && <VisibilityIcon visibility={status.get('visibility')} />} {collapsible ? ( <IconButton className='status__collapse-button' - animate flip + animate active={collapsed} title={ collapsed ? |