matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update design for emoji reacts

Browse Source
This commit is contained in:
Chewbacca
2022-11-17 15:37:58 -05:00
parent 3a0e753789
commit 1dfd5244f0
1 changed files with 48 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
app/soapbox/features/status/components/status-interaction-bar.tsx
View File

@ -1,11 +1,11 @@
import classNames from 'clsx'; import classNames from 'clsx';
import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; import { List as ImmutableList } from 'immutable';
import React from 'react'; import React from 'react';
import { FormattedMessage, FormattedNumber } from 'react-intl'; import { FormattedMessage, FormattedNumber } from 'react-intl';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { openModal } from 'soapbox/actions/modals'; 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 { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
import { reduceEmoji } from 'soapbox/utils/emoji-reacts'; import { reduceEmoji } from 'soapbox/utils/emoji-reacts';
@ -42,19 +42,18 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
})); }));
}; };
const onOpenReactionsModal = (username: string, statusId: string, reaction: string): void => { const onOpenReactionsModal = (username: string, statusId: string): void => {
dispatch(openModal('REACTIONS', { dispatch(openModal('REACTIONS', {
username, username,
statusId, statusId,
reaction,
})); }));
}; };
const getNormalizedReacts = () => { const getNormalizedReacts = () => {
return reduceEmoji( return reduceEmoji(
ImmutableList(status.pleroma.get('emoji_reactions') as any), ImmutableList(status.pleroma.get('emoji_reactions') as any),
status.favourites_count, 0,
status.favourited, false,
allowedEmoji, allowedEmoji,
).reverse(); ).reverse();
}; };
@ -107,15 +106,19 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
<button <button
type='button' type='button'
onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined} onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
className='text-gray-600 dark:text-gray-700 hover:underline' className={
classNames({
'text-gray-600 dark:text-gray-700 hover:underline': true,
'hover:underline': features.exposableReactions,
'cursor-default': !features.exposableReactions,
})
}
> >
<HStack space={1} alignItems='center'> <HStack space={1} alignItems='center'>
<Text theme='primary' size='sm' weight='bold'> <Text theme='primary' size='sm' weight='bold'>
<FormattedNumber value={status.favourites_count} /> <FormattedNumber value={status.favourites_count} />
</Text> </Text>
{/* default: !features.exposableReactions */}
<Text theme='muted' size='sm'> <Text theme='muted' size='sm'>
<FormattedMessage <FormattedMessage
id='status.interactions.favourites' id='status.interactions.favourites'
@ -131,9 +134,12 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
return ''; return '';
}; };
const handleOpenReactionsModal = (reaction: ImmutableMap<string, any>) => () => { const handleOpenReactionsModal = () => {
if (!me) onOpenUnauthorizedModal(); if (!me) {
else onOpenReactionsModal(account.acct, status.id, String(reaction.get('name'))); return onOpenUnauthorizedModal();
}
onOpenReactionsModal(account.acct, status.id);
}; };
const getEmojiReacts = () => { const getEmojiReacts = () => {
@ -142,41 +148,44 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
acc + cur.get('count') acc + cur.get('count')
), 0); ), 0);
if (count > 0) { return (
return ( <button
<HStack space={0.5} className='emoji-reacts-container' alignItems='center'> type='button'
<div className='emoji-reacts'> onClick={features.exposableReactions ? handleOpenReactionsModal : undefined}
{emojiReacts.map((e, i) => { className={
return ( classNames({
<HStack space={0.5} className='emoji-react p-1' alignItems='center' key={i}> 'text-gray-600 dark:text-gray-700': true,
<Emoji 'hover:underline': features.exposableReactions,
className={classNames('emoji-react__emoji w-5 h-5 flex-none', { 'cursor-pointer': features.exposableReactions })} 'cursor-default': !features.exposableReactions,
emoji={e.get('name')} })
onClick={features.exposableReactions ? handleOpenReactionsModal(e) : undefined} }
/> >
<Text theme='muted' size='sm' className='emoji-react__count'> <HStack space={1} alignItems='center'>
<FormattedNumber value={e.get('count')} /> <Text theme='primary' size='sm' weight='bold'>
</Text>
</HStack>
);
})}
</div>
<Text theme='muted' size='sm' className='emoji-reacts__count'>
<FormattedNumber value={count} /> <FormattedNumber value={count} />
</Text> </Text>
</HStack>
);
}
return ''; <HStack space={0.5} alignItems='center'>
{emojiReacts.map((e, i) => {
return (
<Emoji
key={i}
className={classNames('w-5 h-5 flex-none')}
emoji={e.get('name')}
/>
);
})}
</HStack>
</HStack>
</button>
);
}; };
return ( return (
<HStack space={3}> <HStack space={3}>
{getReposts()} {getReposts()}
{getFavourites()}
{features.emojiReacts ? getEmojiReacts() : getFavourites()} {features.emojiReacts ? getEmojiReacts() : null}
</HStack> </HStack>
); );
}; };