diff --git a/assets/css/components/conversations/windows.css b/assets/css/components/conversations/windows.css index d858c9c6..a98966cb 100644 --- a/assets/css/components/conversations/windows.css +++ b/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 */ diff --git a/assets/css/components/emoji/picker.css b/assets/css/components/emoji/picker.css index 49095db9..55333ab4 100644 --- a/assets/css/components/emoji/picker.css +++ b/assets/css/components/emoji/picker.css @@ -9,6 +9,6 @@ } .wdt-emoji-popup { - z-index: 2; + z-index: 1000; margin-top: 7px; } diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js index b00225c7..365f1690 100644 --- a/assets/js/common/utils.js +++ b/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 diff --git a/assets/js/components/conversations/chatWindows.js b/assets/js/components/conversations/chatWindows.js index 642eecdf..5afcfc88 100644 --- a/assets/js/components/conversations/chatWindows.js +++ b/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, diff --git a/assets/js/components/emoji/picker.js b/assets/js/components/emoji/picker.js index 4c21c1e4..950ef989 100644 --- a/assets/js/components/emoji/picker.js +++ b/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'; }