moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'emoji-button' into 'develop' 

Emoji reacts: show the emoji you reacted with on the button

See merge request soapbox-pub/soapbox-fe!1571
This commit is contained in:
Alex Gleason 2022-07-07 16:10:59 +00:00
parent bcc9ff5066 62ea445da5
commit 334857045a
3 changed files with 54 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/soapbox/components/status-action-button.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'classnames';
import React from 'react';
import { Text, Icon } from 'soapbox/components/ui';
import { Text, Icon, Emoji } from 'soapbox/components/ui';
import { shortNumberFormat } from 'soapbox/utils/numbers';
const COLORS = {
@ -15,7 +15,7 @@ interface IStatusActionCounter {
count: number,
}
/** Action button numerical counter, eg "5" likes */
/** Action button numerical counter, eg "5" likes. */
const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
return (
<Text size='xs' weight='semibold' theme='inherit'>
@ -31,10 +31,11 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
active?: boolean,
color?: Color,
filled?: boolean,
emoji?: string,
}
const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
const { icon, className, iconClassName, active, color, filled = false, count = 0, ...filteredProps } = props;
const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, ...filteredProps } = props;
return (
<button
@ -46,22 +47,29 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
'bg-white dark:bg-transparent',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
{
'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && color === COLORS.accent,
'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && color === COLORS.success,
'text-black dark:text-white': active && emoji,
'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
},
className,
)}
{...filteredProps}
>
<Icon
src={icon}
className={classNames(
{
'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
},
iconClassName,
)}
/>
{emoji ? (
<span className='block w-6 h-6 flex items-center justify-center'>
<Emoji className='w-full h-full p-0.5' emoji={emoji} />
</span>
) : (
<Icon
src={icon}
className={classNames(
{
'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
},
iconClassName,
)}
/>
)}
{(count || null) && (
<StatusActionCounter count={count} />

1
app/soapbox/components/status_action_bar.tsx
View File

@ -670,6 +670,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
color='accent'
active={Boolean(meEmojiReact)}
count={emojiReactCount}
emoji={meEmojiReact}
/>
</EmojiButtonWrapper>
) : (

43
app/soapbox/features/status/components/action-bar.tsx
View File

@ -6,7 +6,7 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
import { openModal } from 'soapbox/actions/modals';
import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper';
import { HStack, IconButton } from 'soapbox/components/ui';
import { HStack, IconButton, Emoji, Text } from 'soapbox/components/ui';
import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
import { isUserTouching } from 'soapbox/is_mobile';
import { getReactForStatus } from 'soapbox/utils/emoji_reacts';
@ -583,18 +583,35 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
{features.emojiReacts ? (
<EmojiButtonWrapper statusId={status.id}>
<IconButton
className={classNames({
'text-gray-400 hover:text-gray-600': !meEmojiReact,
'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
})}
title={meEmojiTitle}
src={require('@tabler/icons/icons/heart.svg')}
iconClassName={classNames({
'fill-accent-300': Boolean(meEmojiReact),
})}
text={meEmojiTitle}
/>
{meEmojiReact ? (
<button
// className copied from IconButton
// TODO: better abstraction
className='flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500 bg-white dark:bg-transparent'
title={meEmojiTitle}
>
<span className='block w-6 h-6 flex items-center justify-center'>
<Emoji className='w-full h-full p-0.5' emoji={meEmojiReact} />
</span>
<Text tag='span' theme='muted' size='sm'>
{meEmojiTitle}
</Text>
</button>
) : (
<IconButton
className={classNames({
'text-gray-400 hover:text-gray-600': !meEmojiReact,
'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
})}
title={meEmojiTitle}
src={require('@tabler/icons/icons/heart.svg')}
iconClassName={classNames({
'fill-accent-300': Boolean(meEmojiReact),
})}
text={meEmojiTitle}
/>
)}
</EmojiButtonWrapper>
) : (
<IconButton