From 3a0e7537895c1edf991e03ad997fb0e311e38391 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Thu, 17 Nov 2022 15:03:30 -0500 Subject: [PATCH 1/5] Update design to likes / reposts in interaction bar --- .../status/components/detailed-status.tsx | 2 +- .../components/status-interaction-bar.tsx | 66 +++++++++++-------- app/soapbox/locales/en.json | 2 + 3 files changed, 42 insertions(+), 28 deletions(-) diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx index a1fdc5434..8405f5bed 100644 --- a/app/soapbox/features/status/components/detailed-status.tsx +++ b/app/soapbox/features/status/components/detailed-status.tsx @@ -127,7 +127,7 @@ const DetailedStatus: React.FC = ({ - + diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx index a0abcf98e..a92ed2fc6 100644 --- a/app/soapbox/features/status/components/status-interaction-bar.tsx +++ b/app/soapbox/features/status/components/status-interaction-bar.tsx @@ -1,7 +1,7 @@ import classNames from 'clsx'; import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; import React from 'react'; -import { FormattedNumber } from 'react-intl'; +import { FormattedMessage, FormattedNumber } from 'react-intl'; import { useDispatch } from 'react-redux'; import { openModal } from 'soapbox/actions/modals'; @@ -69,18 +69,25 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. const getReposts = () => { if (status.reblogs_count) { return ( - - + ); } @@ -97,22 +104,27 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. const getFavourites = () => { if (status.favourites_count) { return ( - - + ); } diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index b7c280137..fcdda9c46 100644 --- a/app/soapbox/locales/en.json +++ b/app/soapbox/locales/en.json @@ -994,6 +994,8 @@ "status.in_review_summary.summary": "This post has been sent to Moderation for review and is only visible to you.", "status.in_review_summary.contact": "If you believe this is in error please {link}.", "status.in_review_summary.link": "Contact Support", + "status.interactions.reblogs": "{count, plural, one {Repost} other {Reposts}}", + "status.interactions.favourites": "{count, plural, one {Like} other {Likes}}", "status.load_more": "Load more", "status.media_hidden": "Media hidden", "status.mention": "Mention @{name}", From 1dfd5244f0b63dddf953d2d3d59cd4e20913bab0 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Thu, 17 Nov 2022 15:37:58 -0500 Subject: [PATCH 2/5] Update design for emoji reacts --- .../components/status-interaction-bar.tsx | 87 ++++++++++--------- 1 file changed, 48 insertions(+), 39 deletions(-) diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx index a92ed2fc6..34de4f692 100644 --- a/app/soapbox/features/status/components/status-interaction-bar.tsx +++ b/app/soapbox/features/status/components/status-interaction-bar.tsx @@ -1,11 +1,11 @@ import classNames from 'clsx'; -import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; +import { List as ImmutableList } from 'immutable'; import React from 'react'; import { FormattedMessage, FormattedNumber } from 'react-intl'; import { useDispatch } from 'react-redux'; import { openModal } from 'soapbox/actions/modals'; -import { HStack, IconButton, Text, Emoji } from 'soapbox/components/ui'; +import { HStack, Text, Emoji } from 'soapbox/components/ui'; import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks'; import { reduceEmoji } from 'soapbox/utils/emoji-reacts'; @@ -42,19 +42,18 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. })); }; - const onOpenReactionsModal = (username: string, statusId: string, reaction: string): void => { + const onOpenReactionsModal = (username: string, statusId: string): void => { dispatch(openModal('REACTIONS', { username, statusId, - reaction, })); }; const getNormalizedReacts = () => { return reduceEmoji( ImmutableList(status.pleroma.get('emoji_reactions') as any), - status.favourites_count, - status.favourited, + 0, + false, allowedEmoji, ).reverse(); }; @@ -107,15 +106,19 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. + ); }; return ( {getReposts()} - - {features.emojiReacts ? getEmojiReacts() : getFavourites()} + {getFavourites()} + {features.emojiReacts ? getEmojiReacts() : null} ); }; From b9a3f7ec13f987bd5c2a20f6d5143c4ec47a9133 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 20 Nov 2022 16:05:53 -0600 Subject: [PATCH 3/5] StatusInteractionBar: break into InteractionCounter component --- app/soapbox/components/ui/text/text.tsx | 2 +- .../components/status-interaction-bar.tsx | 72 ++++++++++--------- tailwind.config.js | 3 + 3 files changed, 42 insertions(+), 35 deletions(-) diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx index 7669f3d2a..0f8d4e67b 100644 --- a/app/soapbox/components/ui/text/text.tsx +++ b/app/soapbox/components/ui/text/text.tsx @@ -51,7 +51,7 @@ const families = { }; export type Sizes = keyof typeof sizes -type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' +type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'div' type Directions = 'ltr' | 'rtl' interface IText extends Pick, 'dangerouslySetInnerHTML'> { diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx index 34de4f692..e6f1358fe 100644 --- a/app/soapbox/features/status/components/status-interaction-bar.tsx +++ b/app/soapbox/features/status/components/status-interaction-bar.tsx @@ -73,19 +73,13 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. onClick={handleOpenReblogsModal} className='text-gray-600 dark:text-gray-700 hover:underline' > - - - - - - - - - + + + ); } @@ -114,19 +108,13 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. }) } > - - - - - - - - - + + + ); } @@ -160,23 +148,19 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. }) } > - - - - - + - {emojiReacts.map((e, i) => { + {emojiReacts.take(3).map((e, i) => { return ( ); })} - + ); }; @@ -190,4 +174,24 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. ); }; +interface IInteractionCounter { + count: number, + children: React.ReactNode, +} + +/** InteractionCounter component. */ +const InteractionCounter: React.FC = ({ count, children }) => { + return ( + + + + + + + {children} + + + ); +}; + export default StatusInteractionBar; diff --git a/tailwind.config.js b/tailwind.config.js index 7d562327b..1e2625c6f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -42,6 +42,9 @@ module.exports = { 'mono', ], }, + spacing: { + '4.5': '1.125rem', + }, colors: parseColorMatrix({ // Define color matrix (of available colors) // Colors are configured at runtime with CSS variables in soapbox.json From de3678c2721cbb1c0e279a6e447dfc1748678d8e Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 20 Nov 2022 16:14:50 -0600 Subject: [PATCH 4/5] InteractionCounter: refactor with + + + ); } - return ''; + return null; }; const handleOpenFavouritesModal: React.EventHandler> = (e) => { @@ -97,29 +91,17 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. const getFavourites = () => { if (status.favourites_count) { return ( - + + + ); } - return ''; + return null; }; const handleOpenReactionsModal = () => { @@ -136,19 +118,9 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. acc + cur.get('count') ), 0); - return ( - - ); + ); + } + + return null; }; return ( {getReposts()} {getFavourites()} - {features.emojiReacts ? getEmojiReacts() : null} + {features.emojiReacts && getEmojiReacts()} ); }; interface IInteractionCounter { count: number, + onClick?: React.MouseEventHandler, children: React.ReactNode, } -/** InteractionCounter component. */ -const InteractionCounter: React.FC = ({ count, children }) => { - return ( - - - - +const InteractionCounter: React.FC = ({ count, onClick, children }) => { + const features = useFeatures(); - - {children} - - + return ( + ); }; From b556166efa1a2c68320f2afd3d7a50028d384841 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 27 Nov 2022 15:10:10 -0600 Subject: [PATCH 5/5] StatusInteractionBar: combine likes and reactions again --- .../status/components/status-interaction-bar.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx index fa4ff86ea..f888cb059 100644 --- a/app/soapbox/features/status/components/status-interaction-bar.tsx +++ b/app/soapbox/features/status/components/status-interaction-bar.tsx @@ -52,10 +52,10 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. const getNormalizedReacts = () => { return reduceEmoji( ImmutableList(status.pleroma.get('emoji_reactions') as any), - 0, - false, + status.favourites_count, + status.favourited, allowedEmoji, - ).reverse(); + ); }; const handleOpenReblogsModal: React.EventHandler = (e) => { @@ -142,8 +142,7 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. return ( {getReposts()} - {getFavourites()} - {features.emojiReacts && getEmojiReacts()} + {features.emojiReacts ? getEmojiReacts() : getFavourites()} ); };