sforkowany z mirror/soapbox
StatusActionButton improvements
rodzic
883545b3b3
commit
a045ec45df
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Ładowanie…
Reference in New Issue