Add tooltips to status icons

master
Thibaut Girka 6 years ago committed by ThibG
parent e9cc17bbea
commit 7db7cb31b1
  1. 25
      app/javascript/flavours/glitch/components/status_icons.js

@ -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…
Cancel
Save