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 <IconButton
disabled={!publicStatus} disabled={!publicStatus}
className={classNames({ className={classNames({
'text-gray-400 hover:text-gray-600 dark:hover:text-white': !status.get('reblogged'), 'text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white': !status.reblogged,
'text-success-600 hover:text-success-600': status.get('reblogged'), 'text-success-600 group-hover:text-success-600': status.reblogged,
})} })}
title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
src={reblogIcon} 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 { interface IStatusActionCounter {
count: number, count: number,
className?: string,
} }
/** 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, className }): JSX.Element => {
return ( 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 */ /** Status action container element */
const StatusAction: React.FC = ({ children }) => { const StatusAction: React.FC<IStatusAction> = ({ title, children }) => {
return ( 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} {children}
</div> </div>
); );
@ -42,13 +49,13 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active
}; };
return ( return (
<StatusAction> <StatusAction title={title}>
<IconButton <IconButton
title={title} title={title}
src={icon} src={icon}
onClick={handleClick} onClick={handleClick}
className={classNames('text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', { 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 // TODO: repost button
// 'text-success-600 hover:text-success-600': active, // 'text-success-600 hover:text-success-600': active,
})} })}
@ -58,7 +65,10 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active
/> />
{(count || null) && ( {(count || null) && (
<StatusActionCounter count={count} /> <StatusActionCounter
className={classNames({ 'text-accent-300 group-hover:text-accent-300': active })}
count={count}
/>
)} )}
</StatusAction> </StatusAction>
); );