From dea79bdce1abcb65cdd0c4a2dffb2940e7036a8d Mon Sep 17 00:00:00 2001 From: Pierre Date: Sat, 17 Jun 2017 11:20:54 +0200 Subject: [PATCH] Created conversation settings pane --- .../css/components/conversations/windows.css | 26 +++++++++++ assets/js/common/utils.js | 5 +++ .../components/conversations/chatWindows.js | 45 ++++++++++++++++++- assets/js/components/conversations/manager.js | 4 ++ 4 files changed, 79 insertions(+), 1 deletion(-) diff --git a/assets/css/components/conversations/windows.css b/assets/css/components/conversations/windows.css index f5930635..85965882 100644 --- a/assets/css/components/conversations/windows.css +++ b/assets/css/components/conversations/windows.css @@ -13,4 +13,30 @@ margin-left: 5px; text-align: justify; margin-bottom: 0px; +} + + +/** + * Conversation settings pane + */ +#conversationsElem .conversation-settings-pane { + -webkit-transform: translate(101%, 0); + -ms-transform: translate(101%, 0); + -o-transform: translate(101%, 0); + transform: translate(101%, 0); + position: absolute; + top: 0; + bottom: 0; + height: 250px; + width: 100%; + background: #d2d6de; + overflow: auto; + transition: transform .5s cubic-bezier(.22,.61,.36,1); +} + +#conversationsElem .conversation-settings-pane.open { + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); } \ No newline at end of file diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js index fb565a95..74de5f0e 100644 --- a/assets/js/common/utils.js +++ b/assets/js/common/utils.js @@ -32,6 +32,7 @@ function createElem(nodeType, appendTo){ * @info {HTMLElement} id The ID of the new element * @info {HTMLElement} title The title of the new element * @info {HTMLElement} src The src attribute of the new element + * @info {HTMLElement} type The type of the new element * @info {HTMLElement} innerHTML Specify the html content of the newly created element * @return {HTMLElement} The newly created element */ @@ -63,6 +64,10 @@ function createElem2(infos){ if(infos.src) newElem.src = infos.src; + //Specify element type + if(infos.type) + newElem.type = infos.type; + //Specify node content if(infos.innerHTML) newElem.innerHTML = infos.innerHTML; diff --git a/assets/js/components/conversations/chatWindows.js b/assets/js/components/conversations/chatWindows.js index c2faa8ee..0b57c1e2 100644 --- a/assets/js/components/conversations/chatWindows.js +++ b/assets/js/components/conversations/chatWindows.js @@ -155,6 +155,49 @@ ComunicWeb.components.conversations.chatWindows = { //Success return true; - } + }, + + /** + * Show conversation settings (button + pane) + * + * @param {Object} infos Informations about the conversation + * @return {Boolean} True for a success + */ + showConversationSettings: function(infos){ + console.log(infos); + //Create and display conversation settings button wheel + infos.box.settingsButton = createElem2({ + type: "button", + insertBefore: infos.box.membersButton, + class: "btn btn-box-tool", + type: "button" + }); + + //Add button icon + createElem2({ + type: "i", + appendTo: infos.box.settingsButton, + class: "fa fa-gear", + }); + + //Create settings pane + var settingsPane = createElem2({ + type: "div", + appendTo: infos.box.boxBody, + class: "conversation-settings-pane", + innerHTML: "

Welcome to settings world

", + }); + + //Make the settings button lives + infos.box.settingsButton.onclick = function(){ + if(settingsPane.className.includes(" open")) + settingsPane.className = settingsPane.className.replace(" open", ""); //Close the pane + else + settingsPane.className += " open"; //Open the pane + }; + + //Success + return true; + }, } \ No newline at end of file diff --git a/assets/js/components/conversations/manager.js b/assets/js/components/conversations/manager.js index 27d95658..a6f78a57 100644 --- a/assets/js/components/conversations/manager.js +++ b/assets/js/components/conversations/manager.js @@ -184,6 +184,10 @@ ComunicWeb.components.conversations.manager = { //Update conversation members informations ComunicWeb.components.conversations.chatWindows.updateMembersList(conversationInfos); + + //Display conversation settings pane + ComunicWeb.components.conversations.chatWindows.showConversationSettings(conversationInfos); + }); });