Added emoji picker in the conversation system

assets/css/components/conversations/windows.css

@@ -29,15 +29,28 @@
 	padding-right:8px;
 }
 
+#conversationsElem .create-message-form .btn.btn-add-emoji,
 #conversationsElem .create-message-form .btn.btn-add-image {
 	background: none;
 	color: #808080;
 }
 
+#conversationsElem .create-message-form .btn.btn-add-emoji:hover,
 #conversationsElem .create-message-form .btn.btn-add-image:hover{
 	color: black;
 }
 
+#conversationsElem .create-message-form .btn.btn-add-emoji {
+	padding-left: 4px;
+	padding-right: 2px;
+}
+
+#conversationsElem .create-message-form .btn.btn-add-image {
+	padding-left: 2px;
+	padding-right: 5px;
+}
+
+
 /**
  * Conversation settings pane 
  */

assets/css/components/emoji/picker.css

@@ -9,6 +9,6 @@
 }
 
 .wdt-emoji-popup {
-	z-index: 2;
+	z-index: 1000;
 	margin-top: 7px;
 }

assets/js/common/utils.js

@@ -426,6 +426,14 @@ function add_space(target){
 	
 }
 
+/**
+ * Get the current absolute position bottom of the screen
+ * 
+ * @return {number} The bottom on the screen
+ */
+function abs_height_bottom_screen(){
+	return window.scrollY + $(window).height();
+}
 
 /**
  * Page URL update detection

assets/js/components/conversations/chatWindows.js

@@ -165,6 +165,36 @@ ComunicWeb.components.conversations.chatWindows = {
 			class: "input-group-btn",
 		});
 
+		//Add emojie button
+		var emojiButton = createElem2({
+			appendTo: buttonGroup,
+			type: "button",
+			elemType: "button",
+			class: "btn btn-flat btn-add-emoji",
+		});
+		
+			//Add image icon
+			createElem2({
+				type: "i",
+				appendTo: emojiButton, 
+				class: "fa fa-smile-o"
+			});
+		
+		//Make emojie button lives
+		ComunicWeb.components.emoji.picker.addPicker(inputText, emojiButton, function(){
+			
+			//Make the emojie picker visible
+			wdtEmojiBundle.popup.style.top = (abs_height_bottom_screen()-357)+"px";
+
+			//Make the smile button visible
+			var currLeft = Number(wdtEmojiBundle.popup.style.left.replace("px", ""));
+			var potentialLeft = currLeft - 20;
+
+			if(potentialLeft > 0)
+				wdtEmojiBundle.popup.style.left = potentialLeft + "px";
+
+		});
+
 		//Add image button
 		var imageButton = createElem2({
 			appendTo: buttonGroup,

assets/js/components/emoji/picker.js

@@ -75,8 +75,10 @@ ComunicWeb.components.emoji.picker = {
 	 * 
 	 * @param {HTMLElement} elem Target element
 	 * @param {HTMLElement} trigger Alternative element to trigger picker
+	 * @param {function} afterPicker Optionnal function to call once the openPicker
+	 * function has been called on trigger click
 	 */
-	addPicker: function(elem, trigger){
+	addPicker: function(elem, trigger, afterPicker){
 
 		//Make sure the system is ready
 		this.init();
@@ -87,13 +89,15 @@ ComunicWeb.components.emoji.picker = {
 			return;
 		}
 
-		trigger.addEventListener('click', wdtEmojiBundle.openPicker);
+		trigger.addEventListener('click', function(e){
+			wdtEmojiBundle.openPicker.call(this, e);
+
+			if(afterPicker)
+				afterPicker(e);
+		});
 
 		var parent = elem.parentNode;
 		parent.className += ' wdt-emoji-picker-parent';
-		if (elem.className.includes('wdt-emoji-open-on-colon')) {
-			parent.addEventListener('keyup', wdtEmojiBundle.onKeyup)
-		}
 		elem.className += ' wdt-emoji-bundle-enabled wdt-emoji-picker-ready';
 	}