mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'redesign-interaction-bar' into 'develop'

Browse Source 
Redesign interaction bar

See merge request soapbox-pub/soapbox!1913
environments/review-develop-3zknud/deployments/1596
Chewbacca 2 years ago
parent ca0aae8e9b b556166efa
commit 4b036abefe
5 changed files with 78 additions and 61 deletions
Show Stats Download Patch File Download Diff File

2
app/soapbox/components/ui/text/text.tsx
Unescape View File

@ -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<React.HTMLAttributes<HTMLParagraphElement>, 'dangerouslySetInnerHTML' | 'tabIndex' | 'lang'> {

2
app/soapbox/features/status/components/detailed-status.tsx
Unescape View File

@ -127,7 +127,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
</Stack>
</Stack>
<HStack justifyContent='between' alignItems='center' className='py-2' wrap>
<HStack justifyContent='between' alignItems='center' className='py-3' wrap>
<StatusInteractionBar status={actualStatus} />
<HStack space={1} alignItems='center'>

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

@ -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 { FormattedNumber } from 'react-intl';
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,11 +42,10 @@ 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', {
username,
statusId,
reaction,
}));
};
@ -56,7 +55,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
status.favourites_count,
status.favourited,
allowedEmoji,
).reverse();
);
};
const handleOpenReblogsModal: React.EventHandler<React.MouseEvent> = (e) => {
@ -69,22 +68,17 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
const getReposts = () => {
if (status.reblogs_count) {
return (
<HStack space={0.5} alignItems='center'>
<IconButton
className='text-success-600 cursor-pointer'
src={require('@tabler/icons/repeat.svg')}
role='presentation'
onClick={handleOpenReblogsModal}
<InteractionCounter count={status.reblogs_count} onClick={handleOpenReblogsModal}>
<FormattedMessage
id='status.interactions.reblogs'
defaultMessage='{count, plural, one {Repost} other {Reposts}}'
values={{ count: status.reblogs_count }}
/>
<Text theme='muted' size='sm'>
<FormattedNumber value={status.reblogs_count} />
</Text>
</HStack>
</InteractionCounter>
);
}
return '';
return null;
};
const handleOpenFavouritesModal: React.EventHandler<React.MouseEvent<HTMLButtonElement>> = (e) => {
@ -97,31 +91,25 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
const getFavourites = () => {
if (status.favourites_count) {
return (
<HStack space={0.5} alignItems='center'>
<IconButton
className={classNames({
'text-accent-300': true,
'cursor-default': !features.exposableReactions,
})}
src={require('@tabler/icons/heart.svg')}
iconClassName='fill-accent-300'
role='presentation'
onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
<InteractionCounter count={status.favourites_count} onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}>
<FormattedMessage
id='status.interactions.favourites'
defaultMessage='{count, plural, one {Like} other {Likes}}'
values={{ count: status.favourites_count }}
/>
<Text theme='muted' size='sm'>
<FormattedNumber value={status.favourites_count} />
</Text>
</HStack>
</InteractionCounter>
);
}
return '';
return null;
};
const handleOpenReactionsModal = (reaction: ImmutableMap<string, any>) => () => {
if (!me) onOpenUnauthorizedModal();
else onOpenReactionsModal(account.acct, status.id, String(reaction.get('name')));
const handleOpenReactionsModal = () => {
if (!me) {
return onOpenUnauthorizedModal();
}
onOpenReactionsModal(account.acct, status.id);
};
const getEmojiReacts = () => {
@ -130,43 +118,67 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
acc + cur.get('count')
), 0);
if (count > 0) {
if (count) {
return (
<HStack space={0.5} className='emoji-reacts-container' alignItems='center'>
<div className='emoji-reacts'>
{emojiReacts.map((e, i) => {
<InteractionCounter count={count} onClick={features.exposableReactions ? handleOpenReactionsModal : undefined}>
<HStack space={0.5} alignItems='center'>
{emojiReacts.take(3).map((e, i) => {
return (
<HStack space={0.5} className='emoji-react p-1' alignItems='center' key={i}>
<Emoji
className={classNames('emoji-react__emoji w-5 h-5 flex-none', { 'cursor-pointer': features.exposableReactions })}
emoji={e.get('name')}
onClick={features.exposableReactions ? handleOpenReactionsModal(e) : undefined}
/>
<Text theme='muted' size='sm' className='emoji-react__count'>
<FormattedNumber value={e.get('count')} />
</Text>
</HStack>
<Emoji
key={i}
className='w-4.5 h-4.5 flex-none'
emoji={e.get('name')}
/>
);
})}
</div>
<Text theme='muted' size='sm' className='emoji-reacts__count'>
<FormattedNumber value={count} />
</Text>
</HStack>
</HStack>
</InteractionCounter>
);
}
return '';
return null;
};
return (
<HStack space={3}>
{getReposts()}
{features.emojiReacts ? getEmojiReacts() : getFavourites()}
</HStack>
);
};
interface IInteractionCounter {
count: number,
onClick?: React.MouseEventHandler<HTMLButtonElement>,
children: React.ReactNode,
}
const InteractionCounter: React.FC<IInteractionCounter> = ({ count, onClick, children }) => {
const features = useFeatures();
return (
<button
type='button'
onClick={onClick}
className={
classNames({
'text-gray-600 dark:text-gray-700': true,
'hover:underline': features.exposableReactions,
'cursor-default': !features.exposableReactions,
})
}
>
<HStack space={1} alignItems='center'>
<Text theme='primary' weight='bold'>
<FormattedNumber value={count} />
</Text>
<Text tag='div' theme='muted'>
{children}
</Text>
</HStack>
</button>
);
};
export default StatusInteractionBar;

2
app/soapbox/locales/en.json
Unescape View File

@ -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}",

3
tailwind.config.js
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save