forked from treehouse/mastodon
Add tooltips to status icons
parent
e9cc17bbea
commit
7db7cb31b1
|
@ -12,6 +12,12 @@ import VisibilityIcon from './status_visibility_icon';
|
|||
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: 'This toot features an attached preview card' },
|
||||
pictures: { id: 'status.has_pictures', defaultMessage: 'This toot features attached pictures' },
|
||||
poll: { id: 'status.is_poll', defaultMessage: 'This toot is a poll' },
|
||||
video: { id: 'status.has_video', defaultMessage: 'This toot features attached videos' },
|
||||
audio: { id: 'status.has_audio', defaultMessage: 'This toot features attached audio files' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
|
@ -36,6 +42,23 @@ export default class StatusIcons extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
mediaIconTitleText () {
|
||||
const { intl, mediaIcon } = this.props;
|
||||
|
||||
switch (mediaIcon) {
|
||||
case 'link':
|
||||
return intl.formatMessages(message.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 {
|
||||
|
@ -53,12 +76,14 @@ export default class StatusIcons extends React.PureComponent {
|
|||
<i
|
||||
className={`fa fa-fw fa-comment status__reply-icon`}
|
||||
aria-hidden='true'
|
||||
title={intl.formatMessage(messages.inReplyTo)}
|
||||
/>
|
||||
) : null}
|
||||
{mediaIcon ? (
|
||||
<i
|
||||
className={`fa fa-fw fa-${mediaIcon} status__media-icon`}
|
||||
aria-hidden='true'
|
||||
title={this.mediaIconTitleText()}
|
||||
/>
|
||||
) : null}
|
||||
{!directMessage && <VisibilityIcon visibility={status.get('visibility')} />}
|
||||
|
|
Loading…
Reference in New Issue