Show group basic information

assets/css/components/sidebar.css

@@ -1,8 +1,8 @@
 /**
- * Sidebar stylesheet
+* Sidebar stylesheet
- *
+*
- * @author Pierre HUBERT
+* @author Pierre HUBERT
- */
+*/
 
 .main-sidebar > .sidebar {
 	display: flex;
@@ -31,8 +31,10 @@ body.sidebar-collapse .main-sidebar > .sidebar .hide-on-collapse {
 	overflow: hidden;
 }
 
-body.sidebar-collapse .memberships-list {
+body.sidebar-collapse .memberships-list,
-	overflow: unset;
+body.sidebar-collapse .slimScrollDiv,
+body.sidebar-collapse .sidebar-menu {
+	overflow: unset !important;
 }
 
 .main-sidebar .memberships-list img {
@@ -41,6 +43,28 @@ body.sidebar-collapse .memberships-list {
 	margin-left: -4px;
 }
 
+.main-sidebar .memberships-list .subinfo {
+	margin-left: 24px;
+	font-size: 90%;
+}
+
+body.sidebar-collapse .main-sidebar .memberships-list .subinfo {
+	display: none;
+}
+
+body.sidebar-collapse .main-sidebar .memberships-list li:hover .subinfo {
+	display: block;
+	background: #2c3b41;
+	position: absolute;
+	width: 180px;
+	left: 50px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	border-bottom-right-radius: 4px;
+	margin: 7px -3px;
+	padding-left: 20px;
+}
+
 .main-sidebar .recents-conversations-list {
 	flex: 1;
 }

assets/js/common/shorcuts.js

@@ -183,4 +183,15 @@ function getInfoGroup(id, callback){
  */
 function getInfoMultipleGroups(IDs, callback, force){
     ComunicWeb.components.groups.info.getInfoMultiple(IDs, callback, force);
+}
+
+/**
+ * Get the difference of time from now to a specified
+ * timestamp and return it as a string
+ * 
+ * @param {Integer} time The base time
+ * @return {String} Computed difference
+ */
+function timeDiffToStr(time) {
+    return ComunicWeb.common.date.timeDiffToStr(time);
 }

assets/js/components/sidebar/main.js

@@ -254,5 +254,27 @@ ComunicWeb.components.sideBar.main = {
 			innerHTML: group.name
 		});
 
+		let subInfoEl = createElem2({
+			appendTo: a,
+			type: "div",
+			class: "subinfo",
+			onclick: (e) => e.stopImmediatePropagation()
+		});
+
+		if(group.membership == "pending") {
+
+			// Show requested state
+			subInfoEl.innerHTML = "Requested";
+		}
+		else if(group.membership == "invited") {
+
+			// Show invited state
+			subInfoEl.innerHTML = "<i class='fa fa-question'></i> Invited";
+			
+		}
+		else
+			// Group last activity
+			subInfoEl.innerHTML = timeDiffToStr(lastactive);
+
 	},
 }