IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Ticket 4665 - Emoji Picker (#5157)

Browse Source 
*  #4665  Added EmojiPicker

Work primarily by @broernr-de and @harrison on pre-release.mattermost.com

* Final fixes to handle custom emojis from internal review and single merge error

* ESLint fixes

* CSS changes and other code to support emoji picker in reply window

* Fix for file upload and emoji picker icon positions on post and comment.

RHS emoji picker appearing see-through at this time.

* Fix for two ESLint issues.

* covered most of feedback:
RHS emoji picker looks correct color-wise
RHS emoji picker dynamically positions against height of thread size (post + reply messages)
escape closes emoji window
search box focused on open

ESLint fixes against other files
oversized emoji preview fixes

* Adding in 'outside click' eventing to dismiss the emoji window

* Changing some formatting to fix mismatch between my local eslant rules and jenkins.

* adding alternative import method due to downstream testing errors

* yet another attempt to retain functionality and pass tests - skipping import of browser store

* fix for feedback items 5 and 7:
* move search to float on top with stylistic changes
* whitespace in the header (+1 squashed commit)
Squashed commits:
[6a26d32] changes that address items
1, 2, 6, 8, and 9 of latest feedback

* Fix for attachment preview location on mobile

* Fix for latest rounds of feedback

* fixing eslint issue

* making emojipicker sprite based, fixing alignments

* Fix for emoji quality, fixing some behavior (hover background and cursor settings)
undoing config changes

* Preview feature for emojis

* Adjustments to config file, and changing layout/design of attachment and emoji icon.

* manual revert from master branch for config.json

* reverting paperclip and fixing alignments.  Additionally fixing inadvertent display of picker on mobile.

* CSS changes to try to fix the hover behavior - currently working for emoji picker (when enabled), but hover for attachment isn't working

* Made suggested changes by jwilander except for jQuery removal

* Adding hover for both icons

* removal of some usages of jQuery

* Fix for two layout issues on IE11/Edge

* UI improvements for emoji picker

* Fix for many minor display issues

* fix for additional appearance items

* fix to two minor UI items

* A little extra padding for IE11

* fix for IE11 scroll issue, and removing align attribute on img tag which was throwing js error

* fixes some display issues on firefox

* fix for uneven sides of emojis

* fix for eslint issues that I didn't introduce

* fix for missing bottom edge of RHS emojipicker.  also fixing text overlapping icons on text area (including RHS)

* Update "emoji selector" to "emoji picker"

* changes for code review
- removal of ..getDOMNode
- use sprite imagery for emoji preview
- remove lastBlurAt from state as it wasn't used

* fixes for:
- fake custom emoji preview in picker
- RHS scrollbar on preview

* fix for minor alignment of preview emoji
This commit is contained in:
bonespiked
2017-03-24 09:09:51 -04:00
committed by Jason Blais
parent d0af931e6e
commit 28ad645153
28 changed files with 4827 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/actions/post_actions.jsx
View File

@@ -417,6 +417,13 @@ export function removePostFromStore(post) {
PostStore.emitChange();
}
export function emitEmojiPosted(emoji) {
AppDispatcher.handleServerAction({
type: ActionTypes.EMOJI_POSTED,
alias: emoji
});
}
export function deletePost(channelId, post, success, error) {
Client.deletePost(
channelId,

3
webapp/components/autosize_textarea.jsx
View File

@@ -62,6 +62,7 @@ export default class AutosizeTextarea extends React.Component {
const {
value,
placeholder,
id,
...otherProps
} = props;
@@ -77,12 +78,14 @@ export default class AutosizeTextarea extends React.Component {
<div>
<textarea
ref='textarea'
id={id + '-textarea'}
{...heightProps}
{...props}
/>
<div style={{height: 0, overflow: 'hidden'}}>
<textarea
ref='reference'
id={id + '-reference'}
style={{height: 'auto', width: '100%'}}
disabled={true}
value={value}

99
webapp/components/create_comment.jsx
View File

@@ -15,6 +15,7 @@ import Textbox from './textbox.jsx';
import MsgTyping from './msg_typing.jsx';
import FileUpload from './file_upload.jsx';
import FilePreview from './file_preview.jsx';
import EmojiPicker from './emoji_picker/emoji_picker.jsx';
import * as Utils from 'utils/utils.jsx';
import * as UserAgent from 'utils/user_agent.jsx';
import * as GlobalActions from 'actions/global_actions.jsx';
@@ -28,8 +29,7 @@ import {browserHistory} from 'react-router/es6';
const ActionTypes = Constants.ActionTypes;
const KeyCodes = Constants.KeyCodes;
import {REACTION_PATTERN} from './create_post.jsx';
import {REACTION_PATTERN, EMOJI_PATTERN} from './create_post.jsx';
import React from 'react';
export default class CreateComment extends React.Component {
@@ -56,6 +56,10 @@ export default class CreateComment extends React.Component {
this.showPostDeletedModal = this.showPostDeletedModal.bind(this);
this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this);
this.handlePostError = this.handlePostError.bind(this);
this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this);
this.handleEmojiClick = this.handleEmojiClick.bind(this);
this.onKeyPress = this.onKeyPress.bind(this);
this.closeEmoji = this.closeEmoji.bind(this);
PostStore.clearCommentDraftUploads();
MessageHistoryStore.resetHistoryIndex('comment');
@@ -69,24 +73,85 @@ export default class CreateComment extends React.Component {
submitting: false,
ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
showPostDeletedModal: false,
enableAddButton
enableAddButton,
showEmojiPicker: false,
emojiOffset: 0,
emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
};
this.lastBlurAt = 0;
}
closeEmoji(clickEvent) {
/*
if the user clicked something outside the component, except the RHS emojipicker icon
and the picker is open, then close it
*/
if (clickEvent && clickEvent.srcElement &&
clickEvent.srcElement.className !== '' &&
clickEvent.srcElement.className.indexOf('emoji-rhs') === -1 &&
this.state.showEmojiPicker) {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
}
}
handleEmojiPickerClick() {
const threadHeight = document.getElementById('thread--root') ? document.getElementById('thread--root').offsetHeight : 0;
const messagesHeight = document.querySelector('div.post-right-comments-container') ? document.querySelector('div.post-right-comments-container').offsetHeight : 0;
const totalHeight = threadHeight + messagesHeight;
let pickerOffset = 0;
if (totalHeight > 361) {
pickerOffset = -361;
} else {
pickerOffset = -1 * totalHeight;
}
this.setState({showEmojiPicker: !this.state.showEmojiPicker, emojiOffset: pickerOffset});
}
handleEmojiClick(emoji) {
const emojiAlias = emoji.name || emoji.aliases[0];
if (!emojiAlias) {
//Oops.. There went something wrong
return;
}
if (this.state.message === '') {
this.setState({message: ':' + emojiAlias + ': ', showEmojiPicker: false});
} else {
//check whether there is already a blank at the end of the current message
const newMessage = (/\s+$/.test(this.state.message)) ?
this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': ';
this.setState({message: newMessage, showEmojiPicker: false});
}
this.focusTextbox();
}
componentDidMount() {
PreferenceStore.addChangeListener(this.onPreferenceChange);
document.addEventListener('keydown', this.onKeyPress);
this.focusTextbox();
}
componentWillUnmount() {
PreferenceStore.removeChangeListener(this.onPreferenceChange);
document.removeEventListener('keydown', this.onKeyPress);
}
onKeyPress(e) {
if (e.which === Constants.KeyCodes.ESCAPE && this.state.showEmojiPicker === true) {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
}
}
onPreferenceChange() {
this.setState({
ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter')
ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
});
}
@@ -205,6 +270,14 @@ export default class CreateComment extends React.Component {
GlobalActions.emitUserCommentedEvent(post);
const emojiResult = post.message.match(EMOJI_PATTERN);
if (emojiResult) {
// parse message and emit emoji event
emojiResult.forEach((emoji) => {
PostActions.emitEmojiPosted(emoji);
});
}
PostActions.queuePost(post, false, null,
(err) => {
if (err.id === 'api.post.create_post.root_id.app_error') {
@@ -502,6 +575,18 @@ export default class CreateComment extends React.Component {
addButtonClass += ' disabled';
}
let emojiPicker = null;
if (this.state.showEmojiPicker) {
emojiPicker = (
<EmojiPicker
onEmojiClick={this.handleEmojiClick}
topOrBottom='bottom'
emojiOffset={this.state.emojiOffset}
outsideClick={this.closeEmoji}
/>
);
}
return (
<form onSubmit={this.handleSubmit}>
<div className='post-create'>
@@ -518,6 +603,7 @@ export default class CreateComment extends React.Component {
value={this.state.message}
onBlur={this.handleBlur}
createMessage={Utils.localizeMessage('create_comment.addComment', 'Add a comment...')}
emojiEnabled={this.state.emojiPickerEnabled}
initialText=''
channelId={this.props.channelId}
id='reply_textbox'
@@ -532,7 +618,12 @@ export default class CreateComment extends React.Component {
onUploadError={this.handleUploadError}
postType='comment'
channelId={this.props.channelId}
onEmojiClick={this.handleEmojiPickerClick}
emojiEnabled={this.state.emojiPickerEnabled}
navBarName='rhs'
/>
{emojiPicker}
</div>
</div>
<MsgTyping

98
webapp/components/create_post.jsx
View File

@@ -8,6 +8,7 @@ import FileUpload from './file_upload.jsx';
import FilePreview from './file_preview.jsx';
import PostDeletedModal from './post_deleted_modal.jsx';
import TutorialTip from './tutorial/tutorial_tip.jsx';
import EmojiPicker from './emoji_picker/emoji_picker.jsx';
import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
import * as GlobalActions from 'actions/global_actions.jsx';
@@ -36,6 +37,7 @@ const KeyCodes = Constants.KeyCodes;
import React from 'react';
export const REACTION_PATTERN = /^(\+|-):([^:\s]+):\s*$/;
export const EMOJI_PATTERN = /:[A-Za-z-_0-9]*:/g;
export default class CreatePost extends React.Component {
constructor(props) {
@@ -61,7 +63,10 @@ export default class CreatePost extends React.Component {
this.showPostDeletedModal = this.showPostDeletedModal.bind(this);
this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this);
this.showShortcuts = this.showShortcuts.bind(this);
this.handleEmojiClick = this.handleEmojiClick.bind(this);
this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this);
this.handlePostError = this.handlePostError.bind(this);
this.closeEmoji = this.closeEmoji.bind(this);
PostStore.clearDraftUploads();
@@ -77,7 +82,9 @@ export default class CreatePost extends React.Component {
fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
showTutorialTip: false,
showPostDeletedModal: false,
enableSendButton: false
enableSendButton: false,
showEmojiPicker: false,
emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
};
this.lastBlurAt = 0;
@@ -87,6 +94,18 @@ export default class CreatePost extends React.Component {
this.setState({postError});
}
closeEmoji(clickEvent) {
/*
if the user clicked something outside the component, except the main emojipicker icon
and the picker is open, then close it
*/
if (clickEvent && clickEvent.srcElement &&
clickEvent.srcElement.className.indexOf('emoji-main') === -1 &&
this.state.showEmojiPicker) {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
}
}
handleSubmit(e) {
e.preventDefault();
@@ -185,6 +204,14 @@ export default class CreatePost extends React.Component {
GlobalActions.emitUserPostedEvent(post);
// parse message and emit emoji event
const emojiResult = post.message.match(EMOJI_PATTERN);
if (emojiResult) {
emojiResult.forEach((emoji) => {
PostActions.emitEmojiPosted(emoji);
});
}
PostActions.queuePost(post, false, null,
(err) => {
if (err.id === 'api.post.create_post.root_id.app_error') {
@@ -379,6 +406,10 @@ export default class CreatePost extends React.Component {
}
showShortcuts(e) {
if (e.which === Constants.KeyCodes.ESCAPE && this.state.showEmojiPicker === true) {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
}
if ((e.ctrlKey || e.metaKey) && e.keyCode === Constants.KeyCodes.FORWARD_SLASH) {
e.preventDefault();
const args = {};
@@ -411,7 +442,8 @@ export default class CreatePost extends React.Component {
this.setState({
showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER,
ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN
fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
});
}
@@ -484,6 +516,31 @@ export default class CreatePost extends React.Component {
});
}
handleEmojiClick(emoji) {
const emojiAlias = emoji.name || emoji.aliases[0];
if (!emojiAlias) {
//Oops.. There went something wrong
return;
}
if (this.state.message === '') {
this.setState({message: ':' + emojiAlias + ': ', showEmojiPicker: false});
} else {
//check whether there is already a blank at the end of the current message
const newMessage = (/\s+$/.test(this.state.message)) ?
this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': ';
this.setState({message: newMessage, showEmojiPicker: false});
}
this.focusTextbox();
}
handleEmojiPickerClick() {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
}
createTutorialTip() {
const screens = [];
@@ -556,6 +613,17 @@ export default class CreatePost extends React.Component {
if (!this.state.enableSendButton) {
sendButtonClass += ' disabled';
}
let emojiPicker = null;
if (this.state.showEmojiPicker) {
emojiPicker = (
<EmojiPicker
onEmojiClick={this.handleEmojiClick}
topOrBottom='top'
outsideClick={this.closeEmoji}
/>
);
}
return (
<form
@@ -575,22 +643,28 @@ export default class CreatePost extends React.Component {
handlePostError={this.handlePostError}
value={this.state.message}
onBlur={this.handleBlur}
emojiEnabled={this.state.emojiPickerEnabled}
createMessage={Utils.localizeMessage('create_post.write', 'Write a message...')}
channelId={this.state.channelId}
id='post_textbox'
ref='textbox'
/>
<FileUpload
ref='fileUpload'
getFileCount={this.getFileCount}
onFileUploadChange={this.handleFileUploadChange}
onUploadStart={this.handleUploadStart}
onFileUpload={this.handleFileUploadComplete}
onUploadError={this.handleUploadError}
postType='post'
channelId=''
onEmojiClick={this.handleEmojiPickerClick}
emojiEnabled={this.state.emojiPickerEnabled}
navBarName='main'
/>
{emojiPicker}
</div>
<FileUpload
ref='fileUpload'
getFileCount={this.getFileCount}
onFileUploadChange={this.handleFileUploadChange}
onUploadStart={this.handleUploadStart}
onFileUpload={this.handleFileUploadComplete}
onUploadError={this.handleUploadError}
postType='post'
channelId=''
/>
<a
className={sendButtonClass}
onClick={this.handleSubmit}

42
webapp/components/emoji_picker/components/emoji_picker_category.jsx Normal file
View File

@@ -0,0 +1,42 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
export default class EmojiPickerCategory extends React.Component {
static propTypes = {
category: React.PropTypes.string.isRequired,
icon: React.PropTypes.node.isRequired,
onCategoryClick: React.PropTypes.func.isRequired,
selected: React.PropTypes.bool.isRequired
}
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.props.onCategoryClick(this.props.category);
}
render() {
let className = 'emoji-picker__category';
if (this.props.selected) {
className += ' emoji-picker__category--selected';
}
return (
<a
className={className}
href='#'
onClick={this.handleClick}
>
{this.props.icon}
</a>
);
}
}

70
webapp/components/emoji_picker/components/emoji_picker_item.jsx Normal file
View File

@@ -0,0 +1,70 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import EmojiStore from 'stores/emoji_store.jsx';
export default class EmojiPickerItem extends React.Component {
static propTypes = {
emoji: React.PropTypes.object.isRequired,
onItemOver: React.PropTypes.func.isRequired,
onItemOut: React.PropTypes.func.isRequired,
onItemClick: React.PropTypes.func.isRequired,
onItemUnmount: React.PropTypes.func.isRequired,
category: React.PropTypes.string.isRequired
}
constructor(props) {
super(props);
this.handleMouseOver = this.handleMouseOver.bind(this);
this.handleMouseOut = this.handleMouseOut.bind(this);
this.handleClick = this.handleClick.bind(this);
}
componentWillUnmount() {
this.props.onItemUnmount(this.props.emoji);
}
handleMouseOver() {
this.props.onItemOver(this.props.emoji);
}
handleMouseOut() {
this.props.onItemOut(this.props.emoji);
}
handleClick() {
this.props.onItemClick(this.props.emoji);
}
render() {
let item = null;
if (this.props.category === 'recent' || this.props.category === 'custom') {
item =
(<span>
<img
className='emoji-picker__item emoticon'
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onClick={this.handleClick}
src={EmojiStore.getEmojiImageUrl(this.props.emoji)}
/>
</span>);
} else {
item =
(<div >
<img
src='/static/emoji/img_trans.gif'
className={' emojisprite emoji-' + this.props.emoji.filename + ' '}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onClick={this.handleClick}
/>
</div>);
}
return item;
}
}

66
webapp/components/emoji_picker/components/emoji_picker_preview.jsx Normal file
View File

@@ -0,0 +1,66 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import EmojiStore from 'stores/emoji_store.jsx';
import {FormattedMessage} from 'react-intl';
export default class EmojiPickerPreview extends React.Component {
static propTypes = {
emoji: React.PropTypes.object
}
render() {
const emoji = this.props.emoji;
if (emoji) {
let name;
let aliases;
let previewImage;
if (emoji.aliases) {
// This is a system emoji which only has a list of aliases
name = emoji.aliases[0];
aliases = emoji.aliases;
previewImage = (<span className='sprite-preview'><img
src='/static/emoji/img_trans.gif'
className={' emojisprite-preview emoji-' + emoji.filename + ' '}
align='absmiddle'
/></span>);
} else {
// This is a custom emoji that matches the model on the server
name = emoji.name;
aliases = [emoji.name];
previewImage = (<img
className='emoji-picker__preview-image'
src={EmojiStore.getEmojiImageUrl(emoji)}
/>);
}
return (
<div className='emoji-picker__preview'>
<div className='emoji-picker__preview-image-box'>
{previewImage}
</div>
<div className='emoji-picker__preview-image-box'>
<span className='emoji-picker__preview-name'>{name}</span>
<span
className='emoji-picker__preview-aliases'
>{ ':' + aliases[0] + ':'}</span>
</div>
</div>
);
}
return (
<div className='emoji-picker__preview emoji-picker__preview-placeholder'>
<FormattedMessage
id='emoji_picker.emojiPicker'
defaultMessage='Emoji Picker'
/>
</div>
);
}
}

417
webapp/components/emoji_picker/emoji_picker.jsx Normal file
View File

@@ -0,0 +1,417 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import $ from 'jquery';
import * as Emoji from 'utils/emoji.jsx';
import EmojiStore from 'stores/emoji_store.jsx';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ReactDOM from 'react-dom';
import * as Utils from 'utils/utils.jsx';
import ReactOutsideEvent from 'react-outside-event';
import {FormattedMessage} from 'react-intl';
import EmojiPickerCategory from './components/emoji_picker_category.jsx';
import EmojiPickerItem from './components/emoji_picker_item.jsx';
import EmojiPickerPreview from './components/emoji_picker_preview.jsx';
// This should include all the categories available in Emoji.CategoryNames
const CATEGORIES = [
'recent',
'people',
'nature',
'food',
'activity',
'travel',
'objects',
'symbols',
'flags',
'custom'
];
class EmojiPicker extends React.Component {
static propTypes = {
customEmojis: React.PropTypes.object,
onEmojiClick: React.PropTypes.func.isRequired,
topOrBottom: React.PropTypes.string.isRequired,
emojiOffset: React.PropTypes.number,
outsideClick: React.PropTypes.func
}
constructor(props) {
super(props);
// All props are primitives or treated as immutable
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
this.handleCategoryClick = this.handleCategoryClick.bind(this);
this.handleFilterChange = this.handleFilterChange.bind(this);
this.handleItemOver = this.handleItemOver.bind(this);
this.handleItemOut = this.handleItemOut.bind(this);
this.handleItemClick = this.handleItemClick.bind(this);
this.handleScroll = this.handleScroll.bind(this);
this.handleItemUnmount = this.handleItemUnmount.bind(this);
this.renderCategory = this.renderCategory.bind(this);
this.onOutsideEvent = this.onOutsideEvent.bind(this);
this.state = {
category: 'recent',
filter: '',
selected: null
};
}
componentDidMount() {
this.searchInput.focus();
}
onOutsideEvent = (event) => {
// Handle the event.
this.props.outsideClick(event);
}
handleCategoryClick(category) {
const items = this.refs.items;
if (category === CATEGORIES[0]) {
// First category includes the search box so just scroll to the top
items.scrollTop = 0;
} else {
const cat = this.refs[category];
items.scrollTop = cat.offsetTop;
}
}
handleFilterChange(e) {
this.setState({filter: e.target.value});
}
handleItemOver(emoji) {
clearTimeout(this.timeouthandler);
this.setState({selected: emoji});
}
handleItemOut() {
this.timeouthandler = setTimeout(() => this.setState({selected: null}), 500);
}
handleItemUnmount(emoji) {
//Prevent emoji preview from showing emoji which is not present anymore (due to filter)
if (this.state.selected === emoji) {
this.setState({selected: null});
}
}
handleItemClick(emoji) {
this.props.onEmojiClick(emoji);
}
handleScroll() {
const items = $(ReactDOM.findDOMNode(this.refs.items));
const contentTop = items.scrollTop();
const contentTopPadding = parseInt(items.css('padding-top'), 10);
const scrollPct = (contentTop / (items[0].scrollHeight - items[0].clientHeight)) * 100.0;
if (scrollPct > 99.0) {
this.setState({category: 'custom'});
return;
}
for (const category of CATEGORIES) {
const header = $(ReactDOM.findDOMNode(this.refs[category]));
const headerBottomMargin = parseInt(header.css('margin-bottom'), 10) + parseInt(header.css('padding-bottom'), 10);
const headerBottom = header[0].offsetTop + header.height() + headerBottomMargin;
// If category is the first one visible, highlight it in the bar at the top
if (headerBottom - contentTopPadding >= contentTop) {
if (this.state.category !== category) {
this.setState({category: String(category)});
}
break;
}
}
}
renderCategory(category, filter) {
const items = [];
let indices = [];
let recentEmojis = [];
if (category === 'recent') {
recentEmojis = EmojiStore.getRecentEmojis();
indices = [...Array(recentEmojis.length).keys()];
// reverse indices so most recently added is first
indices.reverse();
} else {
indices = Emoji.EmojiIndicesByCategory.get(category) || [];
}
for (const index of indices) {
let emoji = {};
if (category === 'recent') {
emoji = recentEmojis[index];
} else {
emoji = Emoji.Emojis[index];
}
if (filter) {
let matches = false;
for (const alias of emoji.aliases || [...emoji.name]) {
if (alias.indexOf(filter) !== -1) {
matches = true;
break;
}
}
if (!matches) {
continue;
}
}
items.push(
<EmojiPickerItem
key={'system_' + (category === 'recent' ? 'recent_' : '') + (emoji.name || emoji.aliases[0])}
emoji={emoji}
category={category}
onItemOver={this.handleItemOver}
onItemOut={this.handleItemOut}
onItemClick={this.handleItemClick}
onItemUnmount={this.handleItemUnmount}
/>
);
}
if (category === 'custom') {
const customEmojis = EmojiStore.getCustomEmojiMap().values();
for (const emoji of customEmojis) {
if (filter && emoji.name.indexOf(filter) === -1) {
continue;
}
items.push(
<EmojiPickerItem
key={'custom_' + emoji.name}
emoji={emoji}
category={category}
onItemOver={this.handleItemOver}
onItemOut={this.handleItemOut}
onItemClick={this.handleItemClick}
onItemUnmount={this.handleItemUnmount}
/>
);
}
}
// Only render the header if there's any visible items
let header = null;
if (items.length > 0) {
header = (
<div
className='emoji-picker__category-header'
>
<FormattedMessage id={'emoji_picker.' + category}/>
</div>
);
}
return (
<div
key={'category_' + category}
id={'emojipickercat-' + category}
ref={category}
>
{header}
<div className='emoji-picker-items__container'>
{items}
</div>
</div>
);
}
renderPreview(selected) {
if (selected) {
let name;
let aliases;
let previewImage;
if (selected.name) {
// This is a custom emoji that matches the model on the server
name = selected.name;
aliases = [selected.name];
previewImage = (<img
className='emoji-picker__preview-image'
align='absmiddle'
src={EmojiStore.getEmojiImageUrl(selected)}
/>);
} else {
// This is a system emoji which only has a list of aliases
name = selected.aliases[0];
aliases = selected.aliases;
previewImage = (<span ><img
src='/static/emoji/img_trans.gif'
className={' emojisprite-preview emoji-' + selected.filename + ' '}
align='absmiddle'
/></span>);
}
return (
<div className='emoji-picker__preview'>
{previewImage}
<span className='emoji-picker__preview-name'>{name}</span>
<span className='emoji-picker__preview-aliases'>{aliases.map((alias) => ':' + alias + ':').join(' ')}</span>
</div>
);
}
return (
<span className='emoji-picker__preview-placeholder'>
<FormattedMessage
id='emoji_picker.emojiPicker'
defaultMessage='Emoji Picker'
/>
</span>
);
}
render() {
const items = [];
for (const category of CATEGORIES) {
if (category === 'custom') {
items.push(this.renderCategory('custom', this.state.filter, this.props.customEmojis));
} else {
items.push(this.renderCategory(category, this.state.filter));
}
}
const cssclass = this.props.topOrBottom === 'top' ? 'emoji-picker' : 'emoji-picker-bottom';
const pickerStyle = this.props.emojiOffset ? {top: this.props.emojiOffset} : {};
return (
<div
style={pickerStyle}
className={cssclass}
>
<div className='emoji-picker__categories'>
<EmojiPickerCategory
category='recent'
icon={<i
className='fa fa-clock-o'
title={Utils.localizeMessage('emoji_picker.recent', 'Recently Used')}
/>}
onCategoryClick={this.handleCategoryClick}
selected={this.state.category === 'recent'}
/>
<EmojiPickerCategory
category='people'
icon={<i
className='fa fa-smile-o'
title={Utils.localizeMessage('emoji_picker.people', 'People')}
/>}
onCategoryClick={this.handleCategoryClick}
selected={this.state.category === 'people'}
/>
<EmojiPickerCategory
category='nature'
icon={<i
className='fa fa-leaf'
title={Utils.localizeMessage('emoji_picker.nature', 'Nature')}
/>}
onCategoryClick={this.handleCategoryClick}
selected={this.state.category === 'nature'}
/>
<EmojiPickerCategory
category='food'
icon={<i
className='fa fa-cutlery'
title={Utils.localizeMessage('emoji_picker.food', 'Food')}
/>}
onCategoryClick={this.handleCategoryClick}
selected={this.state.category === 'food'}
/>
<EmojiPickerCategory
category='activity'
icon={<i
className='fa fa-futbol-o'
title={Utils.localizeMessage('emoji_picker.activity', 'Activity')}
/>}
onCategoryClick={this.handleCategoryClick}
selected={this.state.category === 'activity'}
/>
<EmojiPickerCategory
category='travel'
icon={<i
className='fa fa-plane'
title={Utils.localizeMessage('emoji_picker.travel', 'Travel')}
/>}
onCategoryClick={this.handleCategoryClick}
selected={this.state.category === 'travel'}
/>
<EmojiPickerCategory
category='objects'
icon={<i
className='fa fa-lightbulb-o'
title={Utils.localizeMessage('emoji_picker.objects', 'Objects')}
/>}
onCategoryClick={this.handleCategoryClick}
selected={this.state.category === 'objects'}
/>
<EmojiPickerCategory
category='symbols'
icon={<i
className='fa fa-heart-o'
title={Utils.localizeMessage('emoji_picker.symbols', 'Symbols')}
/>}
onCategoryClick={this.handleCategoryClick}
selected={this.state.category === 'symbols'}
/>
<EmojiPickerCategory
category='flags'
icon={<i
className='fa fa-flag-o'
title={Utils.localizeMessage('emoji_picker.flags', 'Flags')}
/>}
onCategoryClick={this.handleCategoryClick}
selected={this.state.category === 'flags'}
/>
<EmojiPickerCategory
category='custom'
icon={<i
className='fa fa-at'
title={Utils.localizeMessage('emoji_picker.custom', 'Custom')}
/>}
onCategoryClick={this.handleCategoryClick}
selected={this.state.category === 'custom'}
/>
</div>
<div className='emoji-picker__search-container'>
<span className='fa fa-search emoji-picker__search-icon'/>
<input
ref={(input) => {
this.searchInput = input;
}}
className='emoji-picker__search'
type='text'
onChange={this.handleFilterChange}
placeholder={Utils.localizeMessage('emoji_picker.search', 'search')}
/>
</div>
<div
ref='items'
id='emojipickeritems'
className='emoji-picker__items'
onScroll={this.handleScroll}
>
{items}
</div>
<EmojiPickerPreview emoji={this.state.selected}/>
</div>
);
}
}
// disabling eslint check for outslide click handler
// eslint-disable-next-line new-cap
export default ReactOutsideEvent(EmojiPicker, ['click']);

46
webapp/components/emoji_picker/emoji_picker_container.jsx Normal file
View File

@@ -0,0 +1,46 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import EmojiStore from 'stores/emoji_store.jsx';
import EmojiPicker from './emoji_picker.jsx';
export default class EmojiPickerContainer extends React.Component {
static propTypes = {
onEmojiClick: React.PropTypes.func.isRequred
}
constructor(props) {
super(props);
this.handleEmojiChange = this.handleEmojiChange.bind(this);
this.state = {
customEmojis: EmojiStore.getCustomEmojiMap().values() ? EmojiStore.getCustomEmojiMap().values() : []
};
}
componentDidMount() {
EmojiStore.addChangeListener(this.handleEmojiChange);
}
componentWillUnount() {
EmojiStore.removeChangeListener(this.handleEmojiChange);
}
handleEmojiChange() {
this.setState({
customEmojis: EmojiStore.getCustomEmojiMap().values()
});
}
render() {
return (
<EmojiPicker
customEmojis={EmojiStore.getCustomEmojiMap().values()}
onEmojiClick={this.props.onEmojiClick}
/>
);
}
}

43
webapp/components/file_upload.jsx
View File

@@ -49,6 +49,7 @@ class FileUpload extends React.Component {
this.pasteUpload = this.pasteUpload.bind(this);
this.keyUpload = this.keyUpload.bind(this);
this.handleMaxUploadReached = this.handleMaxUploadReached.bind(this);
this.emojiClick = this.emojiClick.bind(this);
this.state = {
requests: {}
@@ -210,7 +211,9 @@ class FileUpload extends React.Component {
// jquery-dragster doesn't provide a function to unregister itself so do it manually
target.off('dragenter dragleave dragover drop dragster:enter dragster:leave dragster:over dragster:drop');
}
emojiClick() {
this.props.onEmojiClick();
}
pasteUpload(e) {
var inputDiv = ReactDOM.findDOMNode(this.refs.input);
const {formatMessage} = this.props.intl;
@@ -347,24 +350,33 @@ class FileUpload extends React.Component {
const channelId = this.props.channelId || ChannelStore.getCurrentId();
const uploadsRemaining = Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channelId);
const emojiSpan = (<span
className={'fa fa-smile-o icon--emoji-picker emoji-' + this.props.navBarName}
onClick={this.emojiClick}
/>);
const filestyle = {visibility: 'hidden'};
return (
<span
ref='input'
className={'btn btn-file' + (uploadsRemaining <= 0 ? ' btn-file__disabled' : '')}
>
<span
className='icon'
dangerouslySetInnerHTML={{__html: Constants.ATTACHMENT_ICON_SVG}}
/>
<input
ref='fileInput'
type='file'
onChange={this.handleChange}
onClick={uploadsRemaining > 0 ? this.props.onClick : this.handleMaxUploadReached}
multiple={multiple}
accept={accept}
/>
<div className='icon--attachment'>
<span
dangerouslySetInnerHTML={{__html: Constants.ATTACHMENT_ICON_SVG}}
onClick={() => this.refs.fileInput.click()}
/>
<input
ref='fileInput'
type='file'
style={filestyle}
onChange={this.handleChange}
onClick={uploadsRemaining > 0 ? this.props.onClick : this.handleMaxUploadReached}
multiple={multiple}
accept={accept}
/>
</div>
{this.props.emojiEnabled ? emojiSpan : ''}
</span>
);
}
@@ -380,7 +392,10 @@ FileUpload.propTypes = {
onFileUploadChange: React.PropTypes.func,
onTextDrop: React.PropTypes.func,
channelId: React.PropTypes.string,
postType: React.PropTypes.string
postType: React.PropTypes.string,
onEmojiClick: React.PropTypes.func,
navBarName: React.PropTypes.string,
emojiEnabled: React.PropTypes.bool
};
export default injectIntl(FileUpload, {withRef: true});

5
webapp/components/rhs_root_post.jsx
View File

@@ -517,7 +517,10 @@ export default class RhsRootPost extends React.Component {
};
return (
<div className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}>
<div
id='thread--root'
className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}
>
<div className='post-right-channel__name'>{channelName}</div>
<div className='post__content'>
{profilePicContainer}

5
webapp/components/textbox.jsx
View File

@@ -32,7 +32,8 @@ export default class Textbox extends React.Component {
onBlur: React.PropTypes.func,
supportsCommands: React.PropTypes.bool.isRequired,
handlePostError: React.PropTypes.func,
suggestionListStyle: React.PropTypes.string
suggestionListStyle: React.PropTypes.string,
emojiEnabled: React.PropTypes.bool
};
static defaultProps = {
@@ -249,7 +250,7 @@ export default class Textbox extends React.Component {
<SuggestionBox
id={this.props.id}
ref='message'
className={`form-control custom-textarea ${this.state.connection}`}
className={`form-control custom-textarea${this.props.emojiEnabled ? '-emoji' : ''} ${this.state.connection}`}
type='textarea'
spellCheck='true'
placeholder={this.props.createMessage}

7
webapp/components/user_settings/user_settings_advanced.jsx
View File

@@ -351,6 +351,13 @@ export default class AdvancedSettingsDisplay extends React.Component {
defaultMessage='Enable the ability to make and receive one-on-one WebRTC calls'
/>
);
case 'EMOJI_PICKER_PREVIEW':
return (
<FormattedMessage
id='user.settings.advance.emojipicker'
defaultMessage='Enable the emoji picker'
/>
);
default:
return null;
}

13
webapp/i18n/en.json
View File

@@ -1287,6 +1287,18 @@
"emoji_list.name": "Name",
"emoji_list.search": "Search Custom Emoji",
"emoji_list.somebody": "Somebody on another team",
"emoji_picker.activity": "Activity",
"emoji_picker.custom": "Custom",
"emoji_picker.emojiPicker": "Emoji Picker",
"emoji_picker.flags": "Flags",
"emoji_picker.food": "Food",
"emoji_picker.nature": "Nature",
"emoji_picker.objects": "Objects",
"emoji_picker.people": "People",
"emoji_picker.recent": "Recently Used",
"emoji_picker.search": "Search",
"emoji_picker.symbols": "Symbols",
"emoji_picker.travel": "Travel",
"error.not_found.link_message": "Back to Mattermost",
"error.not_found.message": "The page you were trying to reach does not exist",
"error.not_found.title": "Page not found",
@@ -1989,6 +2001,7 @@
"user.settings.advance.slashCmd_autocmp": "Enable external application to offer slash command autocomplete",
"user.settings.advance.title": "Advanced Settings",
"user.settings.advance.webrtc_preview": "Enable the ability to make and receive one-on-one WebRTC calls",
"user.settings.advance.emojipicker": "Enable emoji picker in message input box",
"user.settings.custom_theme.awayIndicator": "Away Indicator",
"user.settings.custom_theme.buttonBg": "Button BG",
"user.settings.custom_theme.buttonColor": "Button Text",

BIN
webapp/images/emoji/emojilarge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

BIN
webapp/images/emoji/img_trans.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 B

1
webapp/package.json
View File

@@ -75,6 +75,7 @@
"react-dom": "15.4.2",
"sass-loader": "6.0.3",
"style-loader": "0.13.2",
"react-outside-event": "1.2.4",
"url-loader": "0.5.8",
"webpack": "2.2.1",
"webpack-node-externals": "1.5.4"

3519
webapp/sass/components/_emojisprite.scss Normal file
View File

File diff suppressed because it is too large Load Diff

208
webapp/sass/components/_emoticons.scss
View File

@@ -1,15 +1,15 @@
@charset 'UTF-8';
@charset "UTF-8";
.emoticon {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 20px;
height: 21px;
min-height: 1em;
min-width: 1em;
vertical-align: middle;
width: 20px;
width: 21px;
}
.emoticon-suggestion {
@@ -36,3 +36,205 @@
text-align: center;
vertical-align: middle;
}
.emoji-picker__popover {
padding: 0px;
.popover-content {
padding: 0px;
}
}
.emoji-picker-bottom {
display: flex;
flex-direction: column;
@include user-select(none);
position: absolute;
z-index: 40;
right: 0%;
width: 278px;
border: 1px solid;
min-height: 298px;
border-radius: 3px;
.emoji-picker__search-container {
position: relative;
.emoji-picker__search-icon {
padding-left: 6px;
padding-top: 6px;
position: absolute;
font-size: 13px;
}
}
}
.emoji-picker__search {
border-width: 1px 0px 1px 0px;
border-style: solid;
padding: 2px 0 2px 25px;
width: 100%;
height: 25px;
font-size: 12px;
&:focus{
outline: none;
}
}
.emoji-picker {
display: flex;
flex-direction: column;
@include user-select(none);
position: absolute;
top: -361px;
right: 0px;
width: 278px;
border: 1px solid;
border-radius: 3px;
.emoji-picker__search-container {
position: relative;
.emoji-picker__search-icon {
padding-left: 6px;
padding-top: 6px;
position: absolute;
font-size: 13px;
}
}
}
.emoji-picker__categories {
flex-grow: 0;
flex-shrink: 0;
.emoji-picker__category {
color: #333333;
display: inline-block;
font-size: 16px;
margin: 3px 6px;
text-align: center;
width: 15px;
&--selected,
&:hover {
color: #666666;
}
}
}
.emoji-picker__items {
max-height: 262px;
overflow-x: hidden;
overflow-y: auto;
padding: 0px 8px 8px 8px;
position: relative;
.emoji-picker__category-header {
font-size: 12px;
font-weight: bold;
margin-bottom: 6px;
margin-top: 3px;
padding-top: 3px;
// padding-bottom: 10px;
}
.emoji-picker__preview_sprite {
isplay: inline-block;
height: 45px;
margin: 3px;
vertical-align: top;
padding: 3px;
}
.emoji-picker-items__container {
> div {
display: inline-block;
height: 21px;
margin: 3px;
vertical-align: top;
width: 21px;
padding: 3px;
}
> span {
display: inline-block;
height: 21px;
margin: 3px;
vertical-align: top;
width: 21px;
padding: 0px;
border: 0px;
}
}
.emoji-picker__item {
border-radius: 6px;
cursor: pointer;
font-size: 18px;
margin: 3px;
}
}
.emojisprite-wrapper {
cursor: pointer;
}
.emoji-picker__preview {
border-top: 1px solid;
display: table-cell;
vertical-align: middle;
flex-grow: 0;
flex-shrink: 0;
height:45px;
width: 278px;
padding: 3px 10px;
&.emoji-picker__preview-placeholder {
padding: 12px;
}
.emoji-picker__preview-image-box {
display: table-cell;
vertical-align: middle;
height: 36px;
width: 42px;
.sprite-preview {
height: 36px;
width: 36px;
vertical-align: middle;
padding: 0px;
border: 0px;
display: inline-block;
}
}
.emoji-picker__preview-image {
max-height: 36px;
max-width: 42px;
padding: 0 10px 0 0;
}
.emoji-picker__preview-name {
font-size: 13px;
font-weight: bold;
}
.emoji-picker__preview-aliases {
display: block;
font-size: 12px;
font-weight: bold;
}
}

1
webapp/sass/components/_module.scss
View File

@@ -3,6 +3,7 @@
@import 'buttons';
@import 'dropdown';
@import 'emoticons';
@import 'emojisprite';
@import 'error-bar';
@import 'files';
@import 'inputs';

5
webapp/sass/layout/_post-right.scss
View File

@@ -62,10 +62,6 @@
.post-create__container {
width: 100%;
.textarea-wrapper {
min-height: 100px;
}
.btn {
margin-bottom: 10px;
@@ -154,6 +150,7 @@
overflow: auto;
position: relative;
padding-top: 10px;
min-height: 429px;
.file-preview__container {
margin-top: 5px;

97
webapp/sass/layout/_post.scss
View File

@@ -23,7 +23,7 @@
}
.textarea-wrapper {
min-height: 36px;
min-height: 37px;
position: relative;
.textbox-preview-area {
@@ -371,7 +371,15 @@
padding: .5em 15px 0;
width: 100%;
}
#reply_textbox.custom-textarea-emoji{
bottom: 0;
max-height: 162px !important;
padding-right: 60px;
padding-top: 6px;
resize: none;
}
.center {
max-width: 1028px;
}
@@ -386,6 +394,25 @@
-ms-overflow-style: auto;
overflow: auto;
padding-right: 43px;
resize: none;
}
#post_textbox-reference.custom-textarea-emoji {
padding-right: 43px;
resize: none;
}
#reply_textbox.custom-textarea-emoji {
padding-right: 60px;
resize: none;
}
#post_textbox.custom-textarea-emoji {
padding-right: 60px;
resize: none;
}
}
}
@@ -425,8 +452,28 @@
max-height: 162px !important;
padding-right: 35px;
padding-top: 8px;
resize: none;
}
#post_textbox-reference.custom-textarea-emoji {
bottom: 0;
max-height: 162px !important;
padding-right: 35px;
padding-top: 8px;
resize: none;
}
#post_textbox.custom-textarea-emoji {
bottom: 0;
max-height: 162px !important;
padding-right: 60px;
padding-top: 8px;
resize: none;
}
.textarea-div {
line-height: 1.5;
max-height: 163px !important;
@@ -436,13 +483,12 @@
}
.btn-file {
@include opacity(.5);
@include single-transition(all, .15s);
font-size: 16px;
padding: 7px 9px 6px;
padding: 8px 9px 4px;
position: absolute;
right: 0;
top: 1px;
top: 0;
z-index: 5;
svg {
@@ -452,7 +498,6 @@
&:hover,
&:active {
@include opacity(.9);
box-shadow: none;
}
@@ -464,6 +509,48 @@
@include opacity(.1);
}
}
.icon--attachment {
@include opacity(.5);
display: inline-block;
position: relative;
vertical-align: top;
input {
cursor: pointer;
direction: ltr;
filter: alpha(opacity=0);
font-size: 23px;
height: 100%;
margin: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
&:hover {
@include opacity(.9);
}
}
}
.icon--emoji-picker {
@include opacity(.5);
@include single-transition(all, .15s);
cursor: pointer;
font-size: 19px;
margin-left: 7px;
position: relative;
vertical-align: top;
&:hover,
&:active {
@include opacity(.9);
box-shadow: none;
}
}
textarea {

16
webapp/sass/responsive/_mobile.scss
View File

@@ -31,6 +31,15 @@
}
}
.post-create__container{
.post-create-body {
.icon__postcontent_picker {
display:none;
top: -7px;
}
}
}
.suggestion-list__content {
max-height: 145px;
}
@@ -1098,6 +1107,13 @@
padding: .5em 1em;
}
.emoji-rhs {
position: relative;
display: none;
top: 1px;
right: -1px;
}
.msg-typing:empty {
display: none;
}

35
webapp/sass/responsive/_tablet.scss
View File

@@ -19,14 +19,23 @@
width: 300px;
}
}
.post-right__scroll{
.post-create__container{
.post-create-body {
.icon__emoji_picker {
display:none;
top: -7px;
}
}
}
}
.post-create__container {
form {
padding: .5em 0 0;
}
.post-create-footer {
padding: 0 45px;
padding: 0 45px 0 8px;
.post-error {
position: relative;
@@ -46,6 +55,7 @@
display: table-cell;
padding-left: 45px;
.sidebar--right & {
padding-left: 0;
}
@@ -54,15 +64,30 @@
.app__content & {
.btn-file {
bottom: -2px;
left: 0;
left: 10px;
line-height: 36px;
padding: 0;
top: auto;
width: 45px;
width: 25px;
}
}
.send-button {
.app__content & {
.icon {
position: relative;
top: 3px;
}
}
.icon__emoji_picker {
position: relative;
display: none;
top: 1px;
right: -1px;
}
.send-button {
display: table-cell;
}
}

49
webapp/stores/emoji_store.jsx
View File

@@ -5,12 +5,13 @@ import Client from '../client/web_client.jsx';
import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
import Constants from 'utils/constants.jsx';
import EventEmitter from 'events';
import * as Emoji from 'utils/emoji.jsx';
const ActionTypes = Constants.ActionTypes;
const CHANGE_EVENT = 'changed';
const RECENT_EMOJI_KEY = 'recentEmojis';
const MAXIMUM_RECENT_EMOJI = 27;
// Wrap the contents of the store so that we don't need to construct an ES6 map where most of the content
// (the system emojis) will never change. It provides the get/has functions of a map and an iterator so
@@ -139,6 +140,48 @@ class EmojiStore extends EventEmitter {
return this.map.get(name);
}
addRecentEmoji(rawAlias) {
const recentEmojis = this.getRecentEmojis();
const alias = rawAlias.split(':').join('');
let emoji = this.getCustomEmojiMap().get(alias);
if (!emoji) {
const emojiIndex = Emoji.EmojiIndicesByAlias.get(alias);
emoji = Emoji.Emojis[emojiIndex];
}
if (!emoji) {
// something is wrong, so we return
return;
}
// odd workaround to the lack of array.findLastIndex - reverse looping & splice
for (let i = recentEmojis.length - 1; i >= 0; i--) {
if ((emoji.name && recentEmojis[i].name === emoji.name) ||
(emoji.filename && recentEmojis[i].filename === emoji.filename)) {
recentEmojis.splice(i, 1);
break;
}
}
recentEmojis.push(emoji);
// cut off the _top_ if it's over length (since new are added to end)
if (recentEmojis.length > MAXIMUM_RECENT_EMOJI) {
recentEmojis.splice(0, recentEmojis.length - MAXIMUM_RECENT_EMOJI);
}
localStorage.setItem(RECENT_EMOJI_KEY, JSON.stringify(recentEmojis));
}
getRecentEmojis() {
const result = JSON.parse(localStorage.getItem(RECENT_EMOJI_KEY));
if (!result) {
return [];
}
return result;
}
hasUnicode(codepoint) {
return Emoji.EmojiIndicesByUnicode.has(codepoint);
}
@@ -174,6 +217,10 @@ class EmojiStore extends EventEmitter {
this.removeCustomEmoji(action.id);
this.emitChange();
break;
case ActionTypes.EMOJI_POSTED:
this.addRecentEmoji(action.alias);
this.emitChange();
break;
}
}
}

8
webapp/utils/constants.jsx
View File

@@ -176,7 +176,9 @@ export const ActionTypes = keyMirror({
SUGGESTION_SELECT_NEXT: null,
SUGGESTION_SELECT_PREVIOUS: null,
BROWSER_CHANGE_FOCUS: null
BROWSER_CHANGE_FOCUS: null,
EMOJI_POSTED: null
});
export const WebrtcActionTypes = keyMirror({
@@ -856,6 +858,10 @@ export const Constants = {
WEBRTC_PREVIEW: {
label: 'webrtc_preview',
description: 'Enable WebRTC one on one calls'
},
EMOJI_PICKER_PREVIEW: {
label: 'emojipicker',
description: 'Enable emoji picker'
}
},
OVERLAY_TIME_DELAY_SMALL: 100,

2
webapp/utils/emoji.jsx
View File

File diff suppressed because one or more lines are too long

18
webapp/utils/utils.jsx
View File

@@ -575,6 +575,8 @@ export function applyTheme(theme) {
changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg);
changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg);
changeCss('.app__body .post-list__new-messages-below', 'color:' + theme.centerChannelBg);
changeCss('.app__body .emoji-picker, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
}
if (theme.centerChannelColor) {
@@ -651,6 +653,22 @@ export function applyTheme(theme) {
changeCss('.app__body .navbar .status .offline--icon', 'fill:' + theme.centerChannelColor);
changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.25));
changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.7));
changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor);
changeCss('.app__body .emoji-picker-bottom', 'color:' + theme.centerChannelColor);
changeCss('.app__body .emoji-picker, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.app__body .emoji-picker, .app__body .emoji-picker__items .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__items .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.app__body .emoji-picker__items', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.05));
changeCss('.app__body .emoji-picker__categories', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.emoji-picker__category .fa:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
changeCss('.app__body .emoji-picker__preview', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.app__body .emoji-picker__category, .app__body .emoji-picker__category:focus, .app__body .emoji-picker__category:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.3));
changeCss('.app__body .emoji-picker__category--selected, .app__body .emoji-picker__category--selected:focus, .app__body .emoji-picker__category--selected:hover', 'color:' + theme.centerChannelColor);
changeCss('.app__body .emoji-picker__item:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8));
changeCss('.app__body .emojisprite:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8));
changeCss('.app__body .icon__postcontent_picker:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
}
if (theme.newMessageSeparator) {