Merge branch 'reaction-labels' into 'develop'

Reaction labels

See merge request soapbox-pub/soapbox-fe!557

app/soapbox/components/loading_indicator.js

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 const LoadingIndicator = () => (
   <div className='loading-indicator'>
     <div className='loading-indicator__figure' />
-    <span><FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' /></span>
+    <span><FormattedMessage id='loading_indicator.label' defaultMessage='Loading…' /></span>
   </div>
 );
 

app/soapbox/components/status_action_bar.js

@@ -30,7 +30,7 @@ const messages = defineMessages({
   reblog_private: { id: 'status.reblog_private', defaultMessage: 'Repost to original audience' },
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be reposted' },
-  favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
+  favourite: { id: 'status.favourite', defaultMessage: 'Like' },
   open: { id: 'status.open', defaultMessage: 'Expand this post' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   unbookmark: { id: 'status.unbookmark', defaultMessage: 'Remove bookmark' },
@@ -50,6 +50,12 @@ const messages = defineMessages({
   deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' },
   markStatusSensitive: { id: 'admin.statuses.actions.mark_status_sensitive', defaultMessage: 'Mark post sensitive' },
   markStatusNotSensitive: { id: 'admin.statuses.actions.mark_status_not_sensitive', defaultMessage: 'Mark post not sensitive' },
+  reactionLike: { id: 'status.reactions.like', defaultMessage: 'Like' },
+  reactionHeart: { id: 'status.reactions.heart', defaultMessage: 'Love' },
+  reactionLaughing: { id: 'status.reactions.laughing', defaultMessage: 'Haha' },
+  reactionOpenMouth: { id: 'status.reactions.open_mouth', defaultMessage: 'Wow' },
+  reactionCry: { id: 'status.reactions.cry', defaultMessage: 'Sad' },
+  reactionWeary: { id: 'status.reactions.weary', defaultMessage: 'Weary' },
 });
 
 class StatusActionBar extends ImmutablePureComponent {
@@ -359,6 +365,14 @@ class StatusActionBar extends ImmutablePureComponent {
       allowedEmoji,
     ).reduce((acc, cur) => acc + cur.get('count'), 0);
     const meEmojiReact = getReactForStatus(status, allowedEmoji);
+    const meEmojiTitle = intl.formatMessage({
+      '👍': messages.reactionLike,
+      '❤️': messages.reactionHeart,
+      '😆': messages.reactionLaughing,
+      '😮': messages.reactionOpenMouth,
+      '😢': messages.reactionCry,
+      '😩': messages.reactionWeary,
+    }[meEmojiReact] || messages.favourite);
 
     let menu = this._makeMenu(publicStatus);
     let reblogIcon = 'retweet';
@@ -404,7 +418,7 @@ class StatusActionBar extends ImmutablePureComponent {
             className='status__action-bar-button star-icon'
             animate
             active={Boolean(meEmojiReact)}
-            title={intl.formatMessage(messages.favourite)}
+            title={meEmojiTitle}
             icon='thumbs-up'
             emoji={meEmojiReact}
             onClick={this.handleLikeButtonClick}

app/soapbox/features/compose/components/emoji_picker_dropdown.js

@@ -10,7 +10,7 @@ import { buildCustomEmojis } from '../../emoji/emoji';
 
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
-  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
+  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
   emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emojos!! (╯°□°）╯︵ ┻━┻' },
   custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
   recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },

app/soapbox/features/compose/components/upload_progress.js

@@ -26,7 +26,7 @@ export default class UploadProgress extends React.PureComponent {
         </div>
 
         <div className='upload-progress__message'>
-          <FormattedMessage id='upload_progress.label' defaultMessage='Uploading...' />
+          <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
 
           <div className='upload-progress__backdrop'>
             <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>

app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js

@@ -9,7 +9,7 @@ import Icon from 'soapbox/components/icon';
 
 const messages = defineMessages({
   emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
-  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
+  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
   emoji_not_found: { id: 'icon_button.not_found', defaultMessage: 'No icons!! (╯°□°）╯︵ ┻━┻' },
   custom: { id: 'icon_button.icons', defaultMessage: 'Icons' },
   search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },

app/soapbox/features/status/components/action_bar.js

@@ -42,6 +42,12 @@ const messages = defineMessages({
   deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' },
   markStatusSensitive: { id: 'admin.statuses.actions.mark_status_sensitive', defaultMessage: 'Mark post sensitive' },
   markStatusNotSensitive: { id: 'admin.statuses.actions.mark_status_not_sensitive', defaultMessage: 'Mark post not sensitive' },
+  reactionLike: { id: 'status.reactions.like', defaultMessage: 'Like' },
+  reactionHeart: { id: 'status.reactions.heart', defaultMessage: 'Love' },
+  reactionLaughing: { id: 'status.reactions.laughing', defaultMessage: 'Haha' },
+  reactionOpenMouth: { id: 'status.reactions.open_mouth', defaultMessage: 'Wow' },
+  reactionCry: { id: 'status.reactions.cry', defaultMessage: 'Sad' },
+  reactionWeary: { id: 'status.reactions.weary', defaultMessage: 'Weary' },
 });
 
 const mapStateToProps = state => {
@@ -263,6 +269,14 @@ class ActionBar extends React.PureComponent {
     const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
     const mutingConversation = status.get('muted');
     const meEmojiReact = getReactForStatus(status, allowedEmoji);
+    const meEmojiTitle = intl.formatMessage({
+      '👍': messages.reactionLike,
+      '❤️': messages.reactionHeart,
+      '😆': messages.reactionLaughing,
+      '😮': messages.reactionOpenMouth,
+      '😢': messages.reactionCry,
+      '😩': messages.reactionWeary,
+    }[meEmojiReact] || messages.favourite);
 
     let menu = [];
 
@@ -355,10 +369,10 @@ class ActionBar extends React.PureComponent {
             className='star-icon'
             animate
             active={Boolean(meEmojiReact)}
-            title={intl.formatMessage(messages.favourite)}
+            title={meEmojiTitle}
             icon='thumbs-up'
             emoji={meEmojiReact}
-            text={intl.formatMessage(messages.favourite)}
+            text={meEmojiTitle}
             onClick={this.handleLikeButtonClick}
           />
         </div>

app/soapbox/locales/pl.json

@@ -679,6 +679,12 @@
   "status.open": "Rozwiń ten wpis",
   "status.pin": "Przypnij do profilu",
   "status.pinned": "Przypięty wpis",
+  "status.reactions.cry": "Przykro mi",
+  "status.reactions.heart": "Super",
+  "status.reactions.laughing": "Ha ha",
+  "status.reactions.like": "Lubię",
+  "status.reactions.open_mouth": "Wow",
+  "status.reactions.weary": "Nuda…",
   "status.read_more": "Czytaj dalej",
   "status.reblog": "Podbij",
   "status.reblog_private": "Podbij dla odbiorców oryginalnego wpisu",