{
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;