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

StatusActionBar: conditionally render dumb Like button

Browse source
This commit is contained in:
Alex Gleason 2022-04-01 17:38:36 -05:00
parent 561f348094
commit 3fe21ce268
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 54 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
app/soapbox/components/status_action_bar.js
View file

@ -167,8 +167,6 @@ class StatusActionBar extends ImmutablePureComponent {
handleLikeButtonClick = e => { handleLikeButtonClick = e => {
const { features } = this.props; const { features } = this.props;
e.stopPropagation();
const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍'; const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍';
if (features.emojiReacts && isUserTouching()) { if (features.emojiReacts && isUserTouching()) {
@ -650,45 +648,56 @@ class StatusActionBar extends ImmutablePureComponent {
)} )}
</StatusAction> </StatusAction>
<div {features.emojiReacts ? (
ref={this.setRef} <div
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' 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'
<Hoverable
component={(
<EmojiSelector
onReact={this.handleReact}
focused={emojiSelectorFocused}
onUnfocus={handleEmojiSelectorUnfocus}
/>
)}
> >
<IconButton <Hoverable
className={classNames({ component={(
'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact, <EmojiSelector
'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact), onReact={this.handleReact}
})} focused={emojiSelectorFocused}
title={meEmojiTitle} onUnfocus={handleEmojiSelectorUnfocus}
src={require('@tabler/icons/icons/heart.svg')} />
iconClassName={classNames({ )}
'fill-accent-300': Boolean(meEmojiReact), >
})} <IconButton
// emoji={meEmojiReact} className={classNames({
onClick={this.handleLikeButtonClick} 'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
/> 'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
</Hoverable> })}
title={meEmojiTitle}
{emojiReactCount > 0 && ( src={require('@tabler/icons/icons/heart.svg')}
(features.exposableReactions && !features.emojiReacts) ? ( iconClassName={classNames({
<StatusActionCounter 'fill-accent-300': Boolean(meEmojiReact),
to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`} })}
count={emojiReactCount} // emoji={meEmojiReact}
onClick={this.handleLikeButtonClick}
/> />
) : ( </Hoverable>
<StatusActionCounter count={emojiReactCount} />
) {emojiReactCount > 0 && (
)} (features.exposableReactions && !features.emojiReacts) ? (
</div> <StatusActionCounter
to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`}
count={emojiReactCount}
/>
) : (
<StatusActionCounter count={emojiReactCount} />
)
)}
</div>
): (
<StatusActionButton
title={intl.formatMessage(messages.favourite)}
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}
/>
)}
{canShare && ( {canShare && (
<StatusActionButton <StatusActionButton

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

@ -62,7 +62,12 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, ac
src={icon} src={icon}
onClick={handleClick} onClick={handleClick}
className={classNames('text-gray-400 hover:text-gray-600 dark:hover:text-white', { className={classNames('text-gray-400 hover:text-gray-600 dark:hover:text-white', {
'text-success-600 hover:text-success-600': active, 'text-accent-300 hover:text-accent-300': active,
// TODO: repost button
// 'text-success-600 hover:text-success-600': active,
})}
iconClassName={classNames({
'fill-accent-300': active,
})} })}
/> />