Improved conversations rendering

This commit is contained in:
Pierre 2017-06-13 16:42:09 +02:00
parent 5e3bdad501
commit 3d1dd2cbed
6 changed files with 76 additions and 22 deletions

View File

@ -0,0 +1,11 @@
/**
* Conversations list
*
* @author Pierre HUBERT
*/
.conversations-list-box .last-activity {
margin-left: 5px;
color: #777;
font-size: 10px;
}

View File

@ -367,6 +367,11 @@ var ComunicWeb = {
* Given a query, search for users and return the result
*/
search: function(query, afterSearch){},
/**
* Given user IDs (in an array) the function return their names in a string
*/
getNames: function(usersID, afterNames){},
},
},

View File

@ -49,6 +49,6 @@ function userID(){
* @param {Boolean} forceRequest Force the request to be made
* @return {Boolean} True for a success
*/
function getUsersInfos(usersID, afterGetUserInfos, forceRequest){
function getMultipleUsersInfos(usersID, afterGetUserInfos, forceRequest){
ComunicWeb.user.userInfos.getMultipleUsersInfos(usersID, afterGetUserInfos, forceRequest);
}

View File

@ -22,6 +22,9 @@ ComunicWeb.components.conversations.list = {
//Change box title
listBox.boxTitle.innerHTML = "Conversations";
//Change box root elem class
listBox.rootElem.className += " conversations-list-box";
//Remove footer
listBox.boxFooter.remove();
@ -243,6 +246,19 @@ ComunicWeb.components.conversations.list = {
console.log(conversationInfos); //DEBUG - temporary
//Add conversations last activity
var lastActivityElem = createElem("small", linkElem);
lastActivityElem.className = "pull-right last-activity";
var lastActivityIcon = createElem("i", lastActivityElem);
lastActivityIcon.className = "fa fa-clock-o";
var lastActivityValueElem = createElem("span", lastActivityElem);
//Calculate last conversation activity
var currentTime = ComunicWeb.common.date.time();
lastActivityValueElem.innerHTML = " "+ComunicWeb.common.date.diffToStr(currentTime - conversationInfos.last_active);
//Create the conversation name element
var conversationNameElem = createElem("strong", linkElem);
@ -274,31 +290,17 @@ ComunicWeb.components.conversations.list = {
}
//Get users informations
getUsersInfos(firstMembers, function(usersInfo){
//Prepare conversation name
var conversationName = "";
ComunicWeb.user.userInfos.getNames(firstMembers, function(usersName){
//Process users informations
for(i in usersInfo){
if(usersInfo[i].firstName)
//Add a coma if required
if(conversationName != "")
conversationName += ", ";
conversationName += usersInfo[i].firstName + " " + usersInfo[i].lastName;
}
//For converstions with many members
if(conversationInfos.members.length > 2)
conversationName += ", ...";
//For conversations with many members (more than 3 - we musn't forget current user)
if(conversationInfos.members.length > 3)
usersName += ", ...";
//Apply conversation name
conversationNameElem.innerHTML = conversationName;
})
conversationNameElem.innerHTML = usersName;
});
}
//Success
return true;
}

View File

@ -164,5 +164,40 @@ ComunicWeb.user.userInfos = {
afterSearch(usersInfos);
});
});
}
},
/**
* Given user IDs (in an array) the function return their names in a string
*
* @param {Array} usersID The users to return as a string
* @param {Function} afterNames What to do once we have got the names
* @return {Boolean} True for a success
*/
getNames: function(usersID, afterNames){
//Get users informations
this.getMultipleUsersInfos(usersID, function(usersInfo){
//Check for errors
if(usersInfo.error){
afterNames("Error");
}
//Prepare conversation name
var usersName = "";
//Process users informations
for(i in usersInfo){
if(usersInfo[i].firstName)
//Add a coma if required
if(usersName != "")
usersName += ", ";
usersName += usersInfo[i].firstName + " " + usersInfo[i].lastName;
}
//Perform next action with result
afterNames(usersName);
});
},
}

View File

@ -31,6 +31,7 @@ $config['CSSfiles'] = array(
"%PATH_ASSETS%css/components/friends/friendsBar.css",
"%PATH_ASSETS%css/components/conversations/manager.css",
"%PATH_ASSETS%css/components/conversations/windows.css",
"%PATH_ASSETS%css/components/conversations/list.css",
"%PATH_ASSETS%css/components/userSelect/userSelect.css",
);