Reaction labels

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
2021-06-30 11:33:42 +02:00 · 2021-06-30 11:33:42 +02:00 · 998e129072
parent 58f3107151
commit 998e129072
8 changed files with 44 additions and 10 deletions
--- a/app/soapbox/components/loading_indicator.js
+++ b/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>
 );

--- a/app/soapbox/components/status_action_bar.js
+++ b/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: 'React' },
  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}
--- a/app/soapbox/features/compose/components/emoji_picker_dropdown.js
+++ b/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' },
--- a/app/soapbox/features/compose/components/upload_progress.js
+++ b/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) }}>
--- a/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
+++ b/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' },
--- a/app/soapbox/features/status/components/action_bar.js
+++ b/app/soapbox/features/status/components/action_bar.js
@ -22,7 +22,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: 'Like' },
+  favourite: { id: 'status.favourite', defaultMessage: 'React' },
  mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
  muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
  unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
@ -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>
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@ -618,7 +618,7 @@
  "status.detailed_status": "Detailed conversation view",
  "status.direct": "Direct message @{name}",
  "status.embed": "Embed",
-  "status.favourite": "Like",
+  "status.favourite": "React",
  "status.filtered": "Filtered",
  "status.load_more": "Load more",
  "status.media_hidden": "Media hidden",
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@ -653,6 +653,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",