Add tooltips to status icons

This commit is contained in:
Thibaut Girka 2019-07-16 15:06:30 +02:00 committed by ThibG
parent e9cc17bbea
commit 7db7cb31b1
1 changed files with 25 additions and 0 deletions

View File

@ -12,6 +12,12 @@ import VisibilityIcon from './status_visibility_icon';
const messages = defineMessages({ const messages = defineMessages({
collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' }, 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 @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. // Rendering.
render () { render () {
const { const {
@ -53,12 +76,14 @@ export default class StatusIcons extends React.PureComponent {
<i <i
className={`fa fa-fw fa-comment status__reply-icon`} className={`fa fa-fw fa-comment status__reply-icon`}
aria-hidden='true' aria-hidden='true'
title={intl.formatMessage(messages.inReplyTo)}
/> />
) : null} ) : null}
{mediaIcon ? ( {mediaIcon ? (
<i <i
className={`fa fa-fw fa-${mediaIcon} status__media-icon`} className={`fa fa-fw fa-${mediaIcon} status__media-icon`}
aria-hidden='true' aria-hidden='true'
title={this.mediaIconTitleText()}
/> />
) : null} ) : null}
{!directMessage && <VisibilityIcon visibility={status.get('visibility')} />} {!directMessage && <VisibilityIcon visibility={status.get('visibility')} />}