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

StatusActionButton improvements

Browse source
This commit is contained in:
Alex Gleason 2022-04-01 22:28:46 -05:00
parent 883545b3b3
commit a045ec45df
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 19 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -622,8 +622,8 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
<IconButton
disabled={!publicStatus}
className={classNames({
'text-gray-400 hover:text-gray-600 dark:hover:text-white': !status.get('reblogged'),
'text-success-600 hover:text-success-600': status.get('reblogged'),
'text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white': !status.reblogged,
'text-success-600 group-hover:text-success-600': status.reblogged,
})}
title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
src={reblogIcon}

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

@ -6,19 +6,26 @@ import { shortNumberFormat } from 'soapbox/utils/numbers';
interface IStatusActionCounter {
count: number,
className?: string,
}
/** Action button numerical counter, eg "5" likes */
const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0, className }): 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>
<span className={classNames('text-xs font-semibold text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', className)}>
{shortNumberFormat(count)}
</span>
);
};
interface IStatusAction {
title?: string,
}
/** Status action container element */
const StatusAction: React.FC = ({ children }) => {
const StatusAction: React.FC<IStatusAction> = ({ title, children }) => {
return (
<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'>
<div title={title} 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>
);
@ -42,13 +49,13 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active
};
return (
<StatusAction>
<StatusAction title={title}>
<IconButton
title={title}
src={icon}
onClick={handleClick}
className={classNames('text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', {
'text-accent-300 group-hover:text-accent-300': active,
'text-accent-300 group-hover:text-accent-300 dark:group-hover:text-accent-300': active,
// TODO: repost button
// 'text-success-600 hover:text-success-600': active,
})}
@ -58,7 +65,10 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active
/>
{(count || null) && (
<StatusActionCounter count={count} />
<StatusActionCounter
className={classNames({ 'text-accent-300 group-hover:text-accent-300': active })}
count={count}
/>
)}
</StatusAction>
);