diff options
| -rw-r--r-- | app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx | 47 | ||||
| -rw-r--r-- | app/assets/javascripts/components/locales/en.jsx | 8 |
2 files changed, 53 insertions, 2 deletions
diff --git a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx index 572a55982..b8acf7ada 100644 --- a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx +++ b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx @@ -5,7 +5,15 @@ import { defineMessages, injectIntl } from 'react-intl'; const messages = defineMessages({ emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, - emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' } + emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' }, + people: { id: 'emoji_button.people', defaultMessage: 'People' }, + nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' }, + food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' }, + activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' }, + travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' }, + objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' }, + symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' }, + flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' } }); const settings = { @@ -40,6 +48,41 @@ class EmojiPickerDropdown extends React.PureComponent { render () { const { intl } = this.props; + const categories = { + people: { + title: intl.formatMessage(messages.people), + emoji: 'smile', + }, + nature: { + title: intl.formatMessage(messages.nature), + emoji: 'hamster', + }, + food: { + title: intl.formatMessage(messages.food), + emoji: 'pizza', + }, + activity: { + title: intl.formatMessage(messages.activity), + emoji: 'soccer', + }, + travel: { + title: intl.formatMessage(messages.travel), + emoji: 'earth_americas', + }, + objects: { + title: intl.formatMessage(messages.objects), + emoji: 'bulb', + }, + symbols: { + title: intl.formatMessage(messages.symbols), + emoji: 'clock9', + }, + flags: { + title: intl.formatMessage(messages.flags), + emoji: 'flag_gb', + } + } + return ( <Dropdown ref={this.setRef} style={style}> <DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={{ fontSize: `24px`, width: `24px`, lineHeight: `24px`, display: 'block', marginLeft: '2px' }}> @@ -47,7 +90,7 @@ class EmojiPickerDropdown extends React.PureComponent { </DropdownTrigger> <DropdownContent className='dropdown__left light'> - <EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} search={true} /> + <EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search={true} /> </DropdownContent> </Dropdown> ); diff --git a/app/assets/javascripts/components/locales/en.jsx b/app/assets/javascripts/components/locales/en.jsx index b3e3273bf..c3155c342 100644 --- a/app/assets/javascripts/components/locales/en.jsx +++ b/app/assets/javascripts/components/locales/en.jsx @@ -42,6 +42,14 @@ const en = { "compose_form.spoiler": "Hide text behind warning", "emoji_button.label": "Insert emoji", "emoji_button.search": "Search...", + "emoji_button.people": "People", + "emoji_button.nature": "Nature", + "emoji_button.food": "Food & Drink", + "emoji_button.activity": "Activity", + "emoji_button.travel": "Travel & Places", + "emoji_button.objects": "Objects", + "emoji_button.symbols": "Symbols", + "emoji_button.flags": "Flags", "empty_column.community": "The local timeline is empty. Write something publicly to get the ball rolling!", "empty_column.hashtag": "There is nothing in this hashtag yet.", "empty_column.home.public_timeline": "the public timeline", |