Add tooltips to status icons

diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js
index 4a2c628817a6321f347ae386b6b11e16670c40d2..207397d9f0bb026c305a4ff14c2a5332b9a59772 100644 (file)
--- a/app/javascript/flavours/glitch/components/status_icons.js
+++ b/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')} />}