Update design to likes / reposts in interaction bar
This commit is contained in:
parent
2cc1007e56
commit
3a0e753789
3 changed files with 42 additions and 28 deletions
|
@ -127,7 +127,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
|
||||||
</Stack>
|
</Stack>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
<HStack justifyContent='between' alignItems='center' className='py-2' wrap>
|
<HStack justifyContent='between' alignItems='center' className='py-3' wrap>
|
||||||
<StatusInteractionBar status={actualStatus} />
|
<StatusInteractionBar status={actualStatus} />
|
||||||
|
|
||||||
<HStack space={1} alignItems='center'>
|
<HStack space={1} alignItems='center'>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import classNames from 'clsx';
|
import classNames from 'clsx';
|
||||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { 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';
|
||||||
|
@ -69,18 +69,25 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
|
||||||
const getReposts = () => {
|
const getReposts = () => {
|
||||||
if (status.reblogs_count) {
|
if (status.reblogs_count) {
|
||||||
return (
|
return (
|
||||||
<HStack space={0.5} alignItems='center'>
|
<button
|
||||||
<IconButton
|
type='button'
|
||||||
className='text-success-600 cursor-pointer'
|
onClick={handleOpenReblogsModal}
|
||||||
src={require('@tabler/icons/repeat.svg')}
|
className='text-gray-600 dark:text-gray-700 hover:underline'
|
||||||
role='presentation'
|
>
|
||||||
onClick={handleOpenReblogsModal}
|
<HStack space={1} alignItems='center'>
|
||||||
/>
|
<Text theme='primary' size='sm' weight='bold'>
|
||||||
|
<FormattedNumber value={status.reblogs_count} />
|
||||||
|
</Text>
|
||||||
|
|
||||||
<Text theme='muted' size='sm'>
|
<Text theme='muted' size='sm'>
|
||||||
<FormattedNumber value={status.reblogs_count} />
|
<FormattedMessage
|
||||||
</Text>
|
id='status.interactions.reblogs'
|
||||||
</HStack>
|
defaultMessage='{count, plural, one {Repost} other {Reposts}}'
|
||||||
|
values={{ count: status.reblogs_count }}
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
|
</HStack>
|
||||||
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -97,22 +104,27 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
|
||||||
const getFavourites = () => {
|
const getFavourites = () => {
|
||||||
if (status.favourites_count) {
|
if (status.favourites_count) {
|
||||||
return (
|
return (
|
||||||
<HStack space={0.5} alignItems='center'>
|
<button
|
||||||
<IconButton
|
type='button'
|
||||||
className={classNames({
|
onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
|
||||||
'text-accent-300': true,
|
className='text-gray-600 dark:text-gray-700 hover:underline'
|
||||||
'cursor-default': !features.exposableReactions,
|
>
|
||||||
})}
|
<HStack space={1} alignItems='center'>
|
||||||
src={require('@tabler/icons/heart.svg')}
|
<Text theme='primary' size='sm' weight='bold'>
|
||||||
iconClassName='fill-accent-300'
|
<FormattedNumber value={status.favourites_count} />
|
||||||
role='presentation'
|
</Text>
|
||||||
onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Text theme='muted' size='sm'>
|
{/* default: !features.exposableReactions */}
|
||||||
<FormattedNumber value={status.favourites_count} />
|
|
||||||
</Text>
|
<Text theme='muted' size='sm'>
|
||||||
</HStack>
|
<FormattedMessage
|
||||||
|
id='status.interactions.favourites'
|
||||||
|
defaultMessage='{count, plural, one {Like} other {Likes}}'
|
||||||
|
values={{ count: status.favourites_count }}
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
|
</HStack>
|
||||||
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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.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.contact": "If you believe this is in error please {link}.",
|
||||||
"status.in_review_summary.link": "Contact Support",
|
"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.load_more": "Load more",
|
||||||
"status.media_hidden": "Media hidden",
|
"status.media_hidden": "Media hidden",
|
||||||
"status.mention": "Mention @{name}",
|
"status.mention": "Mention @{name}",
|
||||||
|
|
Loading…
Reference in a new issue