Add tooltips to status icons
This commit is contained in:
parent
e9cc17bbea
commit
7db7cb31b1
|
@ -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')} />}
|
||||||
|
|
Reference in New Issue