Display the list of emojies of the user

assets/css/pages/settings/sections/customEmojis.css

@@ -0,0 +1,15 @@
+/**
+ * Custom emojis settings
+ *
+ * @author Pierre Hubert
+ */
+
+.box-emojis-settings td {
+	height: 69px;
+	text-align: center;
+	vertical-align: middle !important;
+}
+
+.box-emojis-settings img.e {
+	height: 2em;
+}

assets/js/common/shorcuts.js

@@ -186,14 +186,14 @@ function getUserInfo(usersID, afterGetUserInfo, forceRequest){
  * 
  * @param {Number} userID Target user ID
  */
-function userInfo(userID) {
+function userInfo(userID, force = false) {
     return new Promise((res, err) => {
         getUserInfo(userID, (data) => {
             if(data.error)
                 err(data.error)
             else
                 res(data)
-        }, false);
+        }, force);
     });
 }
 

assets/js/pages/settings/navigationPane.js

@@ -78,6 +78,20 @@ ComunicWeb.pages.settings.navigationPane = {
 			openPage("settings/language");
 		};
 
+		// Custom emojies
+		const sectionEmojies = createElem2({
+			appendTo: elemList,
+			type: "li",
+		});
+		var sectionEmojiesLink = createElem2({
+			appendTo: sectionEmojies,
+			type: "a",
+			innerHTML: "<i class='fa fa-smile-o'></i> Custom emojis"
+		});
+		sectionEmojiesLink.onclick = function(){
+			openPage("settings/emojies");
+		};
+
 		//Account security
 		var sectionSecurity = createElem2({
 			appendTo: elemList,

assets/js/pages/settings/sections/emojis.js

@@ -0,0 +1,87 @@
+/**
+ * Emojies settings sections
+ * 
+ * @author Pierre Hubert
+ */
+
+class EmojiesSection {
+
+
+	static Open(args, target) {
+
+		//Create a box
+		const box = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "box box-primary box-emojis-settings"
+		});
+
+		//Add box header
+		const boxHead = createElem2({
+			appendTo: box,
+			type: "div",
+			class: "box-header",
+		});
+		const boxTitle = createElem2({
+			appendTo: boxHead,
+			type: "h3",
+			class: "box-title",
+			innerHTML: "Custom emojis settings"
+		});
+
+		//Create box body
+		const boxBody = createElem2({
+			appendTo: box,
+			type: "div",
+			class: "box-body"
+		});
+		
+		const emojiesList = createElem2({
+			appendTo: boxBody,
+			type: "table",
+			class: "table table-hover",
+			innerHTML: "<tbody />"
+		})
+
+		this.RefreshList(emojiesList.querySelector("tbody"))
+	}
+
+	/**
+	 * @param {HTMLElement} target 
+	 */
+	static async RefreshList(target) {
+		try {
+			target.innerHTML = "";
+
+			const emojies = (await userInfo(userID(), true)).customEmojis;
+
+			if(emojies.length == 0) {
+				target.innerHTML = "<p>There is no custom emojis yet</p>"
+			}
+
+			for(const e of emojies) {
+				
+				const line = createElem2({
+					type: "tr",
+					appendTo: target,
+				})
+
+
+				line.innerHTML += "<td><img class='e' src='"+e.url+"' /></td>" +
+					"<td>"+e.shorcut+"</td>" 
+				
+
+
+			}
+
+		} catch (error) {
+			console.error(error)
+			target.appendChild(ComunicWeb.common.messages.createCalloutElem(
+				"Error",
+				"Could not refresh the list of emojis!",
+				"danger"
+			))
+		}
+	}
+
+}

assets/js/pages/settings/sectionsList.js

@@ -22,6 +22,14 @@ ComunicWeb.pages.settings.sectionsList = {
 		handler: "ComunicWeb.pages.settings.sections.language.open",
 	},
 
+	/**
+	 * Custom emojies
+	 */
+	emojies: {
+		title: "Custom emojis",
+		handler: "EmojiesSection.Open"
+	},
+
 	/**
 	 * Security settings
 	 */

system/config/dev.config.php

@@ -267,6 +267,7 @@ class Dev {
 				//Sections sections
 				"css/pages/settings/sections/general.css",
 				"css/pages/settings/sections/language.css",
+				"css/pages/settings/sections/customEmojis.css",
 				"css/pages/settings/sections/security.css",
 				"css/pages/settings/sections/password.css",
 				"css/pages/settings/sections/accountImage.css",
@@ -529,6 +530,7 @@ class Dev {
 				//Settings sections
 				"js/pages/settings/sections/general.js",
 				"js/pages/settings/sections/language.js",
+				"js/pages/settings/sections/emojis.js",
 				"js/pages/settings/sections/security.js",
 				"js/pages/settings/sections/password.js",
 				"js/pages/settings/sections/accountImage.js",