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