Group online users into dropdown menu when more than 3

services/web/app/views/project/editor/header.jade

@@ -57,15 +57,34 @@ header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading")
 			ng-show="onlineUsersArray.length > 0"
 			ng-controller="OnlineUsersController"
 		)
-			span.online-user(
-				ng-repeat="user in onlineUsersArray",
-				ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
-				popover="{{ user.name }}"
-				popover-placement="bottom"
-				popover-append-to-body="true"
-				popover-trigger="mouseenter"
-				ng-click="gotoUser(user)"
-			) {{ user.name.slice(0,1) }}
+			span(ng-if="onlineUsersArray.length < 4")
+				span.online-user(
+					ng-repeat="user in onlineUsersArray",
+					ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
+					popover="{{ user.name }}"
+					popover-placement="bottom"
+					popover-append-to-body="true"
+					popover-trigger="mouseenter"
+					ng-click="gotoUser(user)"
+				) {{ user.name.slice(0,1) }}
+			
+			span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4")
+				span.online-user.online-user-multi(
+					dropdown-toggle,
+					tooltip="#{translate('connected_users')}",
+					tooltip-placement="left"
+				)
+					strong {{ onlineUsersArray.length }}
+					i.fa.fa-fw.fa-user
+				ul.dropdown-menu.pull-right
+					li.dropdown-header #{translate('connected_users')}
+					li(ng-repeat="user in onlineUsersArray")
+						a(href, ng-click="gotoUser(user)")
+							span.online-user(
+								ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }"
+							) {{ user.name.slice(0,1) }}
+							| {{ user.name }}
+
 	
 		a.btn.btn-full-height(
 			href,

services/web/public/coffee/ide/online-users/OnlineUsersManager.coffee

@@ -56,7 +56,11 @@ define [
 					user.doc = @ide.fileTreeManager.findEntityById(user.doc_id)
 
 				if user.name?.trim().length == 0
-					user.name = user.email
+					user.name = user.email.trim()
+				
+				user.initial = user.name?[0]
+				if !user.initial or user.initial == " "
+					user.initial = "?"
 
 				@$scope.onlineUsersArray.push user
 

services/web/public/stylesheets/app/editor/online-users.less

@@ -1,6 +1,8 @@
+@online-user-color: rgb(0, 170, 255);
+
 .online-users {
 	.online-user {
-		background-color: rgb(0, 170, 255);
+		background-color: @online-user-color;
 		width: 24px;
 		display: inline-block;
 		height: 24px;
@@ -11,4 +13,27 @@
 		border-radius: 3px;
 		cursor: pointer;
 	}
+	
+	.online-user-multi {
+		width: auto;
+		min-width: 24px;
+		padding-left: 8px;
+		padding-right: 5px;
+	}
+	
+	.dropdown-menu {
+		a {
+			// Override toolbar link styles
+			display: block;
+			padding: 4px 10px 5px;
+			margin: 1px 2px;
+			color: @text-color;
+			&:hover, &:active {
+				color: @text-color;
+				background-color: @gray-lightest;
+				text-shadow: none;
+				.box-shadow(none);
+			}
+		}
+	}
 }