Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Track frequently used emojis in web UI (#5275)

Browse source 
* Track frequently used emojis in web UI

* Persist emoji usage, but debounce commits to the settings API

* Fix #5144 - Add tooltips to picker

* Display only 2 lines of frequently used emojis
This commit is contained in:
Eugen Rochko 2017-10-08 21:47:15 +02:00 • committed by GitHub
parent 0717d9b3e6
commit 488584bfc1
8 changed files with 90 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
View file

@ -146,6 +146,7 @@ class EmojiPickerMenu extends React.PureComponent {
static propTypes = {
custom_emojis: ImmutablePropTypes.list,
frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
loading: PropTypes.bool,
onClose: PropTypes.func.isRequired,
onPick: PropTypes.func.isRequired,
@ -163,6 +164,7 @@ class EmojiPickerMenu extends React.PureComponent {
style: {},
loading: true,
placement: 'bottom',
frequentlyUsedEmojis: [],
};
state = {
@ -233,7 +235,7 @@ class EmojiPickerMenu extends React.PureComponent {
}
render () {
const { loading, style, intl, custom_emojis, autoPlay, skinTone } = this.props;
const { loading, style, intl, custom_emojis, autoPlay, skinTone, frequentlyUsedEmojis } = this.props;
if (loading) {
return <div style={{ width: 299 }} />;
@ -256,9 +258,11 @@ class EmojiPickerMenu extends React.PureComponent {
i18n={this.getI18n()}
onClick={this.handleClick}
include={categoriesSort}
recent={frequentlyUsedEmojis}
skin={skinTone}
showPreview={false}
backgroundImageFn={backgroundImageFn}
emojiTooltip
/>
<ModifierPicker
@ -279,6 +283,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
static propTypes = {
custom_emojis: ImmutablePropTypes.list,
frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
autoPlay: PropTypes.bool,
intl: PropTypes.object.isRequired,
onPickEmoji: PropTypes.func.isRequired,
@ -341,7 +346,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
}
render () {
const { intl, onPickEmoji, autoPlay, onSkinTone, skinTone } = this.props;
const { intl, onPickEmoji, autoPlay, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
const title = intl.formatMessage(messages.emoji);
const { active, loading } = this.state;
@ -364,6 +369,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
autoPlay={autoPlay}
onSkinTone={onSkinTone}
skinTone={skinTone}
frequentlyUsedEmojis={frequentlyUsedEmojis}
/>
</Overlay>
</div>

27
app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js
View file

@ -1,17 +1,42 @@
import { connect } from 'react-redux';
import EmojiPickerDropdown from '../components/emoji_picker_dropdown';
import { changeSetting } from '../../../actions/settings';
import { createSelector } from 'reselect';
import { Map as ImmutableMap } from 'immutable';
import { useEmoji } from '../../../actions/emojis';
const perLine = 8;
const lines = 2;
const getFrequentlyUsedEmojis = createSelector([
state => state.getIn(['settings', 'frequentlyUsedEmojis'], ImmutableMap()),
], emojiCounters => emojiCounters
.keySeq()
.sort((a, b) => emojiCounters.get(a) - emojiCounters.get(b))
.reverse()
.slice(0, perLine * lines)
.toArray()
);
const mapStateToProps = state => ({
custom_emojis: state.get('custom_emojis'),
autoPlay: state.getIn(['meta', 'auto_play_gif']),
skinTone: state.getIn(['settings', 'skinTone']),
frequentlyUsedEmojis: getFrequentlyUsedEmojis(state),
});
const mapDispatchToProps = dispatch => ({
const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
onSkinTone: skinTone => {
dispatch(changeSetting(['skinTone'], skinTone));
},
onPickEmoji: emoji => {
dispatch(useEmoji(emoji));
if (onPickEmoji) {
onPickEmoji(emoji);
}
},
});
export default connect(mapStateToProps, mapDispatchToProps)(EmojiPickerDropdown);