diff --git a/assets/css/components/conversations/writingNotifier.css b/assets/css/components/conversations/writingNotifier.css new file mode 100644 index 00000000..cc109e7e --- /dev/null +++ b/assets/css/components/conversations/writingNotifier.css @@ -0,0 +1,12 @@ +/** + * Conversation message writing notifier + */ + +.user-writing-message { + font-size: 80%; + font-style: italic; +} + +#conversationsElem .user-writing-message { + margin-top: -12px; +} \ No newline at end of file diff --git a/assets/js/common/ws.js b/assets/js/common/ws.js index b3084258..e33668ee 100644 --- a/assets/js/common/ws.js +++ b/assets/js/common/ws.js @@ -197,6 +197,10 @@ class UserWebSocket { SendEvent("newNumberUnreadConvs", msg.data) break; + case "writing_message_in_conv": + SendEvent("WritingMessageInConv", msg.data); + break; + case "new_conv_message": SendEvent("newConvMessage", msg.data); break; diff --git a/assets/js/components/conversations/chatWindows.js b/assets/js/components/conversations/chatWindows.js index 6b3c08da..e3d43e10 100644 --- a/assets/js/components/conversations/chatWindows.js +++ b/assets/js/components/conversations/chatWindows.js @@ -130,6 +130,8 @@ const ConvChatWindow = { class: "create-message-form" }); + new ConversationWritingNotifier(conversationFormContainer, infosBox.conversationID) + //Create input group var inputGroup = createElem2({ appendTo: conversationFormContainer, diff --git a/assets/js/components/conversations/writingNotifier.js b/assets/js/components/conversations/writingNotifier.js new file mode 100644 index 00000000..e100b7d7 --- /dev/null +++ b/assets/js/components/conversations/writingNotifier.js @@ -0,0 +1,31 @@ +/** + * Notify when a user is writing a new message + * in a conversation + * + * @author Pierre Hubert + */ + +class ConversationWritingNotifier { + constructor(target, convID) { + this.messageArea = createElem2({ + appendTo: target, + type: "div", + class: "user-writing-message" + }) + + this.setText("hello world for conv " + convID) + } + + /** + * Update message. If message is empty, hide the area + * + * @param {String} msg + */ + setText(msg) { + if(msg.length == 0) + return this.messageArea.style.display = "none"; + + this.messageArea.style.display = "block"; + this.messageArea.innerHTML = msg; + } +} \ No newline at end of file diff --git a/assets/js/pages/conversations/conversation.js b/assets/js/pages/conversations/conversation.js index e54e7c0d..2d2c266d 100644 --- a/assets/js/pages/conversations/conversation.js +++ b/assets/js/pages/conversations/conversation.js @@ -407,6 +407,8 @@ const ConversationPageConvPart = { emptyElem(formContainer); } + new ConversationWritingNotifier(formContainer, this._conv_info.id) + //Add message input var inputGroup = createElem2({ appendTo: formContainer, diff --git a/system/config/dev.config.php b/system/config/dev.config.php index cdc59c63..0824471d 100644 --- a/system/config/dev.config.php +++ b/system/config/dev.config.php @@ -208,6 +208,7 @@ class Dev { "css/components/conversations/windows.css", "css/components/conversations/list.css", "css/components/conversations/unreadDropdown.css", + "css/components/conversations/writingNotifier.css", //User selector stylesheet "css/components/userSelect/userSelect.css", @@ -405,6 +406,7 @@ class Dev { "js/components/conversations/utils.js", "js/components/conversations/unreadDropdown.js", "js/components/conversations/messageEditor.js", + "js/components/conversations/writingNotifier.js", //User selector "js/components/userSelect/userSelect.js",