diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js index 6c25d1104..4ae7a8539 100644 --- a/app/soapbox/components/status_action_bar.js +++ b/app/soapbox/components/status_action_bar.js @@ -458,7 +458,13 @@ class StatusActionBar extends ImmutablePureComponent { emoji={meEmojiReact} onClick={this.handleLikeButtonClick} /> - {emojiReactCount !== 0 && {emojiReactCount}} + {emojiReactCount !== 0 && ( + (features.exposableReactions && !features.emojiReacts) ? ( + {emojiReactCount} + ) : ( + {emojiReactCount} + ) + )} {shareButton} diff --git a/app/soapbox/features/favourites/index.js b/app/soapbox/features/favourites/index.js index 1b91a0c55..7bf1852d9 100644 --- a/app/soapbox/features/favourites/index.js +++ b/app/soapbox/features/favourites/index.js @@ -5,19 +5,25 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import LoadingIndicator from '../../components/loading_indicator'; import { fetchFavourites } from '../../actions/interactions'; -import { FormattedMessage } from 'react-intl'; +import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; import AccountContainer from '../../containers/account_container'; import Column from '../ui/components/column'; import ScrollableList from '../../components/scrollable_list'; +const messages = defineMessages({ + heading: { id: 'column.favourites', defaultMessage: 'Likes' }, +}); + const mapStateToProps = (state, props) => ({ accountIds: state.getIn(['user_lists', 'favourited_by', props.params.statusId]), }); export default @connect(mapStateToProps) +@injectIntl class Favourites extends ImmutablePureComponent { static propTypes = { + intl: PropTypes.object.isRequired, params: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, accountIds: ImmutablePropTypes.orderedSet, @@ -37,7 +43,7 @@ class Favourites extends ImmutablePureComponent { } render() { - const { accountIds } = this.props; + const { intl, accountIds } = this.props; if (!accountIds) { return ( @@ -50,7 +56,7 @@ class Favourites extends ImmutablePureComponent { const emptyMessage = ; return ( - + { const instance = state.get('instance'); - const features = getFeatures(instance); return { allowedEmoji: getSoapboxConfig(state).get('allowedEmoji'), - reactionList: features.exposableReactions, + features: getFeatures(instance), }; }; @@ -29,7 +28,7 @@ class StatusInteractionBar extends ImmutablePureComponent { status: ImmutablePropTypes.map, me: SoapboxPropTypes.me, allowedEmoji: ImmutablePropTypes.list, - reactionList: PropTypes.bool, + features: PropTypes.object.isRequired, } getNormalizedReacts = () => { @@ -42,7 +41,7 @@ class StatusInteractionBar extends ImmutablePureComponent { ).reverse(); } - getRepost = () => { + getReposts = () => { const { status } = this.props; if (status.get('reblogs_count')) { return ( @@ -58,8 +57,39 @@ class StatusInteractionBar extends ImmutablePureComponent { return ''; } + getFavourites = () => { + const { features, status } = this.props; + + if (status.get('favourites_count')) { + const favourites = ( + <> + + + + + + ); + + if (features.exposableReactions) { + return ( + + {favourites} + + ); + } else { + return ( +
+ {favourites} +
+ ); + } + } + + return ''; + } + getEmojiReacts = () => { - const { status, reactionList } = this.props; + const { status, features } = this.props; const emojiReacts = this.getNormalizedReacts(); const count = emojiReacts.reduce((acc, cur) => ( @@ -81,7 +111,7 @@ class StatusInteractionBar extends ImmutablePureComponent { ); - if (reactionList) { + if (features.exposableReactions) { return {emojiReact}; } @@ -99,13 +129,12 @@ class StatusInteractionBar extends ImmutablePureComponent { }; render() { - const emojiReacts = this.getEmojiReacts(); - const repost = this.getRepost(); + const { features } = this.props; return (
- {emojiReacts} - {repost} + {features.emojiReacts ? this.getEmojiReacts() : this.getFavourites()} + {this.getReposts()}
); } diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 27e7d13fd..022d56338 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -56,7 +56,7 @@ import { Following, Reblogs, Reactions, - // Favourites, + Favourites, DirectTimeline, Conversations, HashtagTimeline, @@ -288,6 +288,7 @@ class SwitchingColumnsArea extends React.PureComponent { + diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss index c83c359e7..0debad833 100644 --- a/app/styles/components/detailed-status.scss +++ b/app/styles/components/detailed-status.scss @@ -71,7 +71,6 @@ .detailed-status__link { color: var(--primary-text-color--faint); - cursor: pointer; text-decoration: none; font-size: 13px; } diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss index c912d21e3..9af8b33ca 100644 --- a/app/styles/components/emoji-reacts.scss +++ b/app/styles/components/emoji-reacts.scss @@ -21,12 +21,19 @@ } } -.emoji-react--reblogs { +.emoji-react--reblogs, +.emoji-react--favourites { vertical-align: middle; display: inline-flex; + margin-right: 10px; .svg-icon { margin-right: 0.2em; + } +} + +.emoji-react--reblogs { + .svg-icon { color: var(--highlight-text-color); svg { @@ -35,6 +42,12 @@ } } +.emoji-react--favourites { + .svg-icon { + color: $gold-star; + } +} + .emoji-reacts { display: inline-flex; flex-direction: row-reverse;