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

StatusActionButton: treat element as a group

Browse source
This commit is contained in:
Alex Gleason 2022-04-01 21:55:29 -05:00
parent dfb5e7f41b
commit 883545b3b3
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 23 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/soapbox/components/status_action_bar.tsx
View file

@ -646,21 +646,20 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
title={replyTitle}
icon={require('@tabler/icons/icons/message-circle.svg')}
onClick={this.handleReplyClick}
to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`}
count={replyCount}
/>
<StatusAction>
{reblogButton}
{reblogCount > 0 && (
<StatusActionCounter onClick={this.handleOpenReblogsModal} count={reblogCount} />
<StatusActionCounter count={reblogCount} />
)}
</StatusAction>
{features.emojiReacts ? (
<div
ref={this.setRef}
className='flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
className='group flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
>
<Hoverable
component={(
@ -673,8 +672,8 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
>
<IconButton
className={classNames({
'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
'text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white': !meEmojiReact,
'text-accent-300 group-hover:text-accent-300': Boolean(meEmojiReact),
})}
title={meEmojiTitle}
src={require('@tabler/icons/icons/heart.svg')}
@ -688,10 +687,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
{emojiReactCount > 0 && (
(features.exposableReactions && !features.emojiReacts) ? (
<StatusActionCounter
to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`}
count={emojiReactCount}
/>
<StatusActionCounter count={emojiReactCount} />
) : (
<StatusActionCounter count={emojiReactCount} />
)
@ -703,7 +699,6 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
icon={require('@tabler/icons/icons/heart.svg')}
onClick={this.handleLikeButtonClick}
active={Boolean(meEmojiReact)}
to={features.exposableReactions ? `/@${status.getIn(['account', 'acct'])}/posts/${status.id}/likes`: undefined}
count={favouriteCount}
/>
)}

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

@ -1,31 +1,26 @@
import classNames from 'classnames';
import React from 'react';
import { Link } from 'react-router-dom';
import { IconButton, Text } from 'soapbox/components/ui';
import { IconButton } from 'soapbox/components/ui';
import { shortNumberFormat } from 'soapbox/utils/numbers';
interface IStatusActionCounter {
count: number,
onClick?: () => void,
to?: string,
}
/** Action button numerical counter, eg "5" likes */
const StatusActionCounter: React.FC<IStatusActionCounter> = ({ to = '#', onClick, count = 0 }): JSX.Element => {
const handleClick: React.EventHandler<React.MouseEvent> = e => {
if (onClick) {
onClick();
e.preventDefault();
e.stopPropagation();
}
const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
return (
<span className='text-xs font-semibold text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white'>{shortNumberFormat(count)}</span>
);
};
/** Status action container element */
const StatusAction: React.FC = ({ children }) => {
return (
<Link to={to} onClick={handleClick}>
<Text size='xs' theme='muted'>{shortNumberFormat(count)}</Text>
</Link>
<div className='group flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
{children}
</div>
);
};
@ -35,20 +30,10 @@ interface IStatusActionButton {
count?: number,
active?: boolean,
title?: string,
to?: string,
}
/** Status action container element */
const StatusAction: React.FC = ({ children }) => {
return (
<div className='flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
{children}
</div>
);
};
/** Action button (eg "Like") for a Status */
const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, active = false, onClick, count = 0 }): JSX.Element => {
const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active = false, onClick, count = 0 }): JSX.Element => {
const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
onClick();
@ -62,8 +47,8 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, ac
title={title}
src={icon}
onClick={handleClick}
className={classNames('text-gray-400 hover:text-gray-600 dark:hover:text-white', {
'text-accent-300 hover:text-accent-300': active,
className={classNames('text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', {
'text-accent-300 group-hover:text-accent-300': active,
// TODO: repost button
// 'text-success-600 hover:text-success-600': active,
})}
@ -72,9 +57,9 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, ac
})}
/>
{count ? (
<StatusActionCounter to={to} count={count} />
) : null}
{(count || null) && (
<StatusActionCounter count={count} />
)}
</StatusAction>
);
};