mstdn.y-zu.org/mastodon
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add emoji-reaction icons as an item of action bar

Browse Source
This commit is contained in:
KMY 2023-02-22 16:48:37 +09:00 committed by YoheiZuho
parent 7183eeb36b
commit e443f3c90a
2 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/mastodon/components/status_action_bar.jsx
View File

@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import EmojiPickerDropdown from '../features/compose/containers/emoji_picker_dropdown_container';
import { defineMessages, injectIntl } from 'react-intl';
import classNames from 'classnames';
@ -263,6 +264,16 @@ class StatusActionBar extends ImmutablePureComponent {
}
}
handleEmojiPick = (data) => {
/*
const { text } = this.props;
const position = this.autosuggestTextarea.textarea.selectionStart;
const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
this.props.onPickEmoji(position, data, needsSpace);
*/
};
render () {
const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props;
const { signedIn, permissions } = this.context.identity;
@ -408,6 +419,7 @@ class StatusActionBar extends ImmutablePureComponent {
<IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
<IconButton className='status__action-bar__button' disabled={!publicStatus} title={StatusActionBar.quoteTitle(intl, messages, publicStatus)} icon='quote' iconComponent={QuoteIcon} onClick={this.handleQuoteClick} />
<IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
{filterButton}

12
app/javascript/mastodon/features/status/components/action_bar.jsx
View File

@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import EmojiPickerDropdown from '../../compose/containers/emoji_picker_dropdown_container';
import { defineMessages, injectIntl } from 'react-intl';
import classNames from 'classnames';
@ -204,6 +205,16 @@ class ActionBar extends PureComponent {
navigator.clipboard.writeText(url);
};
handleEmojiPick = (data) => {
/*
const { text } = this.props;
const position = this.autosuggestTextarea.textarea.selectionStart;
const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
this.props.onPickEmoji(position, data, needsSpace);
*/
};
render () {
const { status, relationship, intl } = this.props;
const { signedIn, permissions } = this.context.identity;
@ -325,6 +336,7 @@ class ActionBar extends PureComponent {
<div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} /></div>
<div className='detailed-status__button'><IconButton disabled={!publicStatus} title={StatusActionBar.quoteTitle(intl, messages, publicStatus)} icon='quote' iconComponent={QuoteIcon} onClick={this.handleQuoteClick} /></div>
<div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} /></div>
<div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} /></div>
<div className='detailed-status__action-bar-dropdown'>
<DropdownMenuContainer icon='ellipsis-h' iconComponent={MoreHorizIcon} status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
</div>