moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add EmojiSelector popup to inline statuses (not working yet)

This commit is contained in:
Alex Gleason 2020-05-21 23:19:39 -05:00
parent 21b250c6ea
commit 0e5971545f
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/gabsocial/components/status_action_bar.js
View File

@ -11,6 +11,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { isStaff } from 'gabsocial/utils/accounts'; import { isStaff } from 'gabsocial/utils/accounts';
import { openModal } from '../actions/modal'; import { openModal } from '../actions/modal';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import EmojiSelector from 'gabsocial/components/emoji_selector';
const messages = defineMessages({ const messages = defineMessages({
delete: { id: 'status.delete', defaultMessage: 'Delete' }, delete: { id: 'status.delete', defaultMessage: 'Delete' },
@ -293,7 +294,8 @@ class StatusActionBar extends ImmutablePureComponent {
<IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /> <IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
{reblogCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='detailed-status__link'>{reblogCount}</Link>} {reblogCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='detailed-status__link'>{reblogCount}</Link>}
</div> </div>
<div className='status__action-bar__counter'> <div className='status__action-bar__counter status__action-bar__counter--favourite'>
<EmojiSelector onReact={this.handleReactClick} />
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='thumbs-up' onClick={this.handleFavouriteClick} /> <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='thumbs-up' onClick={this.handleFavouriteClick} />
{favoriteCount !== 0 && <span className='detailed-status__link'>{favoriteCount}</span>} {favoriteCount !== 0 && <span className='detailed-status__link'>{favoriteCount}</span>}
</div> </div>

3
app/styles/gabsocial/components/detailed-status.scss
View File

@ -76,9 +76,6 @@
} }
.detailed-status__button { .detailed-status__button {
text-align: left;
padding-left: 10px;
.icon-button { .icon-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

9
app/styles/gabsocial/components/emoji-reacts.scss
View File

@ -96,3 +96,12 @@
pointer-events: all; pointer-events: all;
} }
} }
.status__action-bar__counter--favourite {
position: relative;
&:hover .emoji-react-selector {
opacity: 1;
pointer-events: all;
}
}