Reaction labels

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2021-06-30 11:33:42 +02:00
parent 58f3107151
commit 998e129072
8 changed files with 44 additions and 10 deletions

View File

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

View File

@ -30,7 +30,7 @@ const messages = defineMessages({
reblog_private: { id: 'status.reblog_private', defaultMessage: 'Repost to original audience' }, reblog_private: { id: 'status.reblog_private', defaultMessage: 'Repost to original audience' },
cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' }, cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be reposted' }, 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' }, open: { id: 'status.open', defaultMessage: 'Expand this post' },
bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' }, bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
unbookmark: { id: 'status.unbookmark', defaultMessage: 'Remove 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' }, deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' },
markStatusSensitive: { id: 'admin.statuses.actions.mark_status_sensitive', defaultMessage: 'Mark post sensitive' }, 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' }, 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 { class StatusActionBar extends ImmutablePureComponent {
@ -359,6 +365,14 @@ class StatusActionBar extends ImmutablePureComponent {
allowedEmoji, allowedEmoji,
).reduce((acc, cur) => acc + cur.get('count'), 0); ).reduce((acc, cur) => acc + cur.get('count'), 0);
const meEmojiReact = getReactForStatus(status, allowedEmoji); 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 menu = this._makeMenu(publicStatus);
let reblogIcon = 'retweet'; let reblogIcon = 'retweet';
@ -404,7 +418,7 @@ class StatusActionBar extends ImmutablePureComponent {
className='status__action-bar-button star-icon' className='status__action-bar-button star-icon'
animate animate
active={Boolean(meEmojiReact)} active={Boolean(meEmojiReact)}
title={intl.formatMessage(messages.favourite)} title={meEmojiTitle}
icon='thumbs-up' icon='thumbs-up'
emoji={meEmojiReact} emoji={meEmojiReact}
onClick={this.handleLikeButtonClick} onClick={this.handleLikeButtonClick}

View File

@ -10,7 +10,7 @@ import { buildCustomEmojis } from '../../emoji/emoji';
const messages = defineMessages({ const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, 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!! (╯°□°)╯︵ ┻━┻' }, emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emojos!! (╯°□°)╯︵ ┻━┻' },
custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' }, custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' }, recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },

View File

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

View File

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

View File

@ -22,7 +22,7 @@ const messages = defineMessages({
reblog_private: { id: 'status.reblog_private', defaultMessage: 'Repost to original audience' }, reblog_private: { id: 'status.reblog_private', defaultMessage: 'Repost to original audience' },
cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' }, cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be reposted' }, 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}' }, mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' }, muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute 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' }, deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' },
markStatusSensitive: { id: 'admin.statuses.actions.mark_status_sensitive', defaultMessage: 'Mark post sensitive' }, 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' }, 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 => { const mapStateToProps = state => {
@ -263,6 +269,14 @@ class ActionBar extends React.PureComponent {
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility')); const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
const mutingConversation = status.get('muted'); const mutingConversation = status.get('muted');
const meEmojiReact = getReactForStatus(status, allowedEmoji); 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 = []; let menu = [];
@ -355,10 +369,10 @@ class ActionBar extends React.PureComponent {
className='star-icon' className='star-icon'
animate animate
active={Boolean(meEmojiReact)} active={Boolean(meEmojiReact)}
title={intl.formatMessage(messages.favourite)} title={meEmojiTitle}
icon='thumbs-up' icon='thumbs-up'
emoji={meEmojiReact} emoji={meEmojiReact}
text={intl.formatMessage(messages.favourite)} text={meEmojiTitle}
onClick={this.handleLikeButtonClick} onClick={this.handleLikeButtonClick}
/> />
</div> </div>

View File

@ -618,7 +618,7 @@
"status.detailed_status": "Detailed conversation view", "status.detailed_status": "Detailed conversation view",
"status.direct": "Direct message @{name}", "status.direct": "Direct message @{name}",
"status.embed": "Embed", "status.embed": "Embed",
"status.favourite": "Like", "status.favourite": "React",
"status.filtered": "Filtered", "status.filtered": "Filtered",
"status.load_more": "Load more", "status.load_more": "Load more",
"status.media_hidden": "Media hidden", "status.media_hidden": "Media hidden",

View File

@ -653,6 +653,12 @@
"status.open": "Rozwiń ten wpis", "status.open": "Rozwiń ten wpis",
"status.pin": "Przypnij do profilu", "status.pin": "Przypnij do profilu",
"status.pinned": "Przypięty wpis", "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.read_more": "Czytaj dalej",
"status.reblog": "Podbij", "status.reblog": "Podbij",
"status.reblog_private": "Podbij dla odbiorców oryginalnego wpisu", "status.reblog_private": "Podbij dla odbiorców oryginalnego wpisu",