Purpose: The goal of this deliverable is to add an Emoji Picker tool in the Messages activity in Yioop which will allow users to use emojis while sending messages. By the end of this deliverable a significant exposure to the code base Yioop would be acquired.

Description: This deliverable contains the code for adding Emojis in the Messages activity which was created by Anirudh Mallya. By this deliverable the users will be able to include emojis in their messages. Currently around 1800 emojis are included divided into different relevant groups. It also allows user to type defined shortcuts for emoji inside square braces, which on press of send button would replace with corresponding emojis. It also fix issue of messing the UI when the user types really long message by limiting the width of message detail element and handle overflow by wrapping text to next line. The code changes are in UsermessagesElement.php which changes the input element for sending new message by adding a button which when clicked draws a emoji picker and surrounding button and input element with a span element. Also few javascript functions are added to toggle emoji picker and also create navigation tabs between different emoji groups. There are changes in messages.css file to apply styles to the affected elements. A new file EmojipickerHelper.php is added which helps to draw the emoji picker by first initialising an array which contains the data for all the emojis and then rendering the elements required.

Patch files: