Add following label to userListPopover (avatar list)

Until now user was reporting not fully understanding all the
features that user userListPopover offers. Namely, not knowing
that not only is possible to follow the editor (checkbox) but
that it is also possible to follow a specific user from the list

Make it easier to understand what's the current following status
by adding "Following" under the selected user name in the list

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I0beba5df06f2cc7a9a349ef8f93db6b403befb9b

2 files changed, 25 insertions, 1 deletions

diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index 4baa9d7a9e..fb3fc5ea94 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -1265,6 +1265,8 @@ html[dir='rtl'] #userListPopover::after {
 
 #userListPopover .user-list-item.selected-user {
 	background-color: var(--color-background-dark);
+	display: grid;
+	grid-template-columns: 0fr 1fr;
 }
 
 #userListPopover #follow-editor {
@@ -1281,6 +1283,22 @@ html[dir='rtl'] #userListPopover::after {
 	background-position: center;
 }
 
+#userListPopover .user-list-item:not(.selected-user) .user-list-item--following-label {
+	display: none;
+}
+
+#userListPopover .user-list-item.selected-user .user-list-item--following-label {
+	display: flex;
+	padding-inline-start: 8px;
+	font-size: var(--default-font-size);
+	padding-block-end: 4px;
+	color: var(--color-text-lighter);
+}
+
+#userListPopover .user-list-item.selected-user .user-list-item--name {
+	padding: 4px 0 0 8px;
+}
+
 @media only screen and (max-width: 600px) {
 	#userListSummary,
 	#userListHeader
diff --git a/browser/src/control/Control.UserList.js b/browser/src/control/Control.UserList.js
index 3dacd7e1de..8dd6791591 100644
--- a/browser/src/control/Control.UserList.js
+++ b/browser/src/control/Control.UserList.js
@@ -155,11 +155,17 @@ L.Control.UserList = L.Control.extend({
 			var userLabel = L.DomUtil.create('div', 'user-list-item--name');
 			userLabel.innerText = user.userName;
 
+			var userFollowingLabel = L.DomUtil.create('div', 'user-list-item--following-label');
+			userFollowingLabel.innerText = _('Following');
+			var userLabelContainer = L.DomUtil.create('div', 'user-list-item--name-container');
+			userLabelContainer.appendChild(userLabel);
+			userLabelContainer.appendChild(userFollowingLabel);
+
 			var listItem = L.DomUtil.create('div', 'user-list-item');
 			listItem.setAttribute('data-view-id', user.viewId);
 			listItem.setAttribute('role', 'button');
 			listItem.appendChild(L.control.createAvatar(user.viewId, user.userName, user.extraInfo, user.color));
-			listItem.appendChild(userLabel);
+			listItem.appendChild(userLabelContainer);
 			listItem.addEventListener('click', function () {
 				that.followUser(user.viewId);
 			}, false);