bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

StatusActionButton: show selected emoji

Browse source
This commit is contained in:
Alex Gleason 2022-06-25 14:45:00 -05:00
parent dfbe05b390
commit d9b14c6079
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/soapbox/components/status-action-button.tsx
View file

@ -1,7 +1,7 @@
import classNames from 'classnames'; import classNames from 'classnames';
import React from 'react'; 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'; import { shortNumberFormat } from 'soapbox/utils/numbers';
const COLORS = { const COLORS = {
@ -15,7 +15,7 @@ interface IStatusActionCounter {
count: number, 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 => { const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
return ( return (
<Text size='xs' weight='semibold' theme='inherit'> <Text size='xs' weight='semibold' theme='inherit'>
@ -31,10 +31,11 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
active?: boolean, active?: boolean,
color?: Color, color?: Color,
filled?: boolean, filled?: boolean,
emoji?: string,
} }
const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => { const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
const { icon, className, iconClassName, active, color, filled = false, count = 0, ...filteredProps } = props; const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, ...filteredProps } = props;
return ( return (
<button <button
@ -53,15 +54,21 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
)} )}
{...filteredProps} {...filteredProps}
> >
<Icon {emoji ? (
src={icon} <span className='block w-6 h-6 flex items-center justify-center'>
className={classNames( <Emoji className='w-full h-full p-0.5' emoji={emoji} />
{ </span>
'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent, ) : (
}, <Icon
iconClassName, src={icon}
)} className={classNames(
/> {
'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
},
iconClassName,
)}
/>
)}
{(count || null) && ( {(count || null) && (
<StatusActionCounter count={count} /> <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' color='accent'
active={Boolean(meEmojiReact)} active={Boolean(meEmojiReact)}
count={emojiReactCount} count={emojiReactCount}
emoji={meEmojiReact}
/> />
</EmojiButtonWrapper> </EmojiButtonWrapper>
) : ( ) : (