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

WIP emoji reacts

Browse source
This commit is contained in:
Alex Gleason 2022-03-29 15:17:39 -05:00
parent 7f57f58b98
commit b1d2681115
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/emoji_selector.js
View file

@ -102,7 +102,7 @@ class EmojiSelector extends ImmutablePureComponent {
className='emoji-react-selector-container'
>
<div
className={classNames('emoji-react-selector', { 'emoji-react-selector--visible': visible, 'emoji-react-selector--focused': focused })}
className={classNames('emoji-react-selector w-max', { 'emoji-react-selector--visible': visible, 'emoji-react-selector--focused': focused })}
onBlur={this.handleBlur}
ref={this.setRef}
>

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

@ -9,6 +9,7 @@ import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom';
import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
import EmojiSelector from 'soapbox/components/emoji_selector';
import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
import { isUserTouching } from 'soapbox/is_mobile';
import { isStaff, isAdmin } from 'soapbox/utils/accounts';
@ -541,7 +542,8 @@ class StatusActionBar extends ImmutablePureComponent {
}
render() {
const { status, intl, allowedEmoji, features, me } = this.props;
const { status, intl, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorUnfocus, features, me } = this.props;
const { emojiSelectorVisible } = this.state;
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
@ -660,16 +662,16 @@ class StatusActionBar extends ImmutablePureComponent {
<div
ref={this.setRef}
className='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'
// onMouseEnter={this.handleLikeButtonHover}
// onMouseLeave={this.handleLikeButtonLeave}
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'
onMouseEnter={this.handleLikeButtonHover}
onMouseLeave={this.handleLikeButtonLeave}
>
{/* <EmojiSelector
<EmojiSelector
onReact={this.handleReactClick}
visible={features.emojiReacts && emojiSelectorVisible}
focused={emojiSelectorFocused}
onUnfocus={handleEmojiSelectorUnfocus}
/> */}
/>
<IconButton
className={classNames({
'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,

4
app/styles/components/emoji-reacts.scss
View file

@ -125,8 +125,8 @@
background: transparent;
img {
width: 30px;
height: 30px;
width: 36px;
height: 36px;
padding: 3px;
transition: 0.1s;
}