Header: show editing users in format <username>(<opened browser tabs>)

apps/common/main/lib/collection/Users.js

@@ -61,12 +61,11 @@ define([
         },
 
         getEditingCount: function() {
-            var count = 0;
+            return this.filter(function(item){return item.get('online') && !item.get('view')}).length;
-            this.each(function(user){
+        },
-                user.get('online') && !user.get('view') && ++count;
-            });
 
-            return count;
+        getEditingOriginalCount: function() {
+            return this.chain().filter(function(item){return item.get('online') && !item.get('view')}).groupBy(function(item) {return item.get('idOriginal');}).size().value();
         },
 
         findUser: function(id) {

apps/common/main/lib/controller/ReviewChanges.js

@@ -691,7 +691,7 @@ define([
 
         onUpdateUsers: function() {
             var users = this.userCollection;
-            this.popoverChanges.each(function (model) {
+            this.popoverChanges && this.popoverChanges.each(function (model) {
                 var user = users.findOriginalUser(model.get('userid'));
                 model.set('usercolor', (user) ? user.get('color') : null);
             });

apps/common/main/lib/view/Header.js

@@ -57,16 +57,18 @@ define([
 
         var templateUserItem =
                 '<li id="<%= user.get("iid") %>" class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">' +
-                    '<div class="color" style="background-color: <%= user.get("color") %>;" >' +
+                    '<div class="user-name">' +
-                        '<label class="name"><%= fnEncode(user.get("username")) %></label>' +
+                        '<div class="color" style="background-color: <%= user.get("color") %>;"></div>'+
-                    '</div>' +
+                        '<label><%= fnEncode(user.get("username")) %></label>' +
+                        '<% if (len>1) { %><label style="margin-left:3px;">(<%=len%>)</label><% } %>' +
+                    '</div>'+
                 '</li>';
 
         var templateUserList = _.template(
                 '<ul>' +
-                    '<% _.each(users, function(item) { %>' +
+                    '<% for (originalId in users) { %>' +
-                        '<%= usertpl({user: item, fnEncode: fnEncode}) %>' +
+                        '<%= usertpl({user: users[originalId][0], fnEncode: fnEncode, len: users[originalId].length}) %>' +
-                    '<% }); %>' +
+                    '<% } %>' +
                 '</ul>');
 
         var templateRightBox = '<section>' +
@@ -115,63 +117,37 @@ define([
                                 '<label id="title-user-name" style="pointer-events: none;"></label>' +
                             '</section>';
 
-        function onAddUser(model, collection, opts) {
-            if ( $userList ) {
-                var $ul = $userList.find('ul');
-                if ( !$ul.length ) {
-                    $userList.html( templateUserList({
-                                        users: collection.models,
-                                        usertpl: _.template(templateUserItem),
-                                        fnEncode: Common.Utils.String.htmlEncode
-                                    })
-                    );
-                } else {
-                    $ul.append( _.template(templateUserItem)({
-                        user: model,
-                        fnEncode: Common.Utils.String.htmlEncode
-                    }) );
-                }
-
-                $userList.scroller && $userList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true});
-            }
-
-            applyUsers( collection.getEditingCount() );
-        };
-
-        function onUsersChanged(model, collection) {
-            if (model.changed.online != undefined && $userList) {
-                $userList.find('#'+ model.get('iid'))[model.changed.online ? 'removeClass' : 'addClass']('offline');
-                $userList.scroller && $userList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true});
-            }
-
-            applyUsers(model.collection.getEditingCount());
-        };
-
         function onResetUsers(collection, opts) {
             var usercount = collection.getEditingCount();
             if ( $userList ) {
                 if ( usercount > 1 || usercount > 0 && appConfig && !appConfig.isEdit && !appConfig.canComments) {
                     $userList.html(templateUserList({
-                        users: collection.models,
+                        users: collection.chain().filter(function(item){return item.get('online') && !item.get('view')}).groupBy(function(item) {return item.get('idOriginal');}).value(),
                         usertpl: _.template(templateUserItem),
                         fnEncode: Common.Utils.String.htmlEncode
                     }));
 
-                    $userList.scroller = new Common.UI.Scroller({
+                    if (!$userList.scroller)
-                        el: $userList.find('ul'),
+                        $userList.scroller = new Common.UI.Scroller({
-                        useKeyboard: true,
+                            el: $userList.find('ul'),
-                        minScrollbarLength: 40,
+                            useKeyboard: true,
-                        alwaysVisibleY: true
+                            minScrollbarLength: 40,
-                    });
+                            alwaysVisibleY: true
+                        });
+                    $userList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true});
                 } else {
                     $userList.empty();
                 }
             }
 
-            applyUsers( usercount );
+            applyUsers( usercount, collection.getEditingOriginalCount() );
         };
 
-        function applyUsers(count) {
+        function onUsersChanged(model) {
+            onResetUsers(model.collection);
+        };
+
+        function applyUsers(count, originalCount) {
             var has_edit_users = count > 1 || count > 0 && appConfig && !appConfig.isEdit && !appConfig.canComments; // has other user(s) who edit document
             if ( has_edit_users ) {
                 $btnUsers
@@ -192,7 +168,7 @@ define([
             $btnUsers.find('.caption')
                 .css({'font-size': ((has_edit_users) ? '12px' : '14px'),
                     'margin-top': ((has_edit_users) ? '0' : '-1px')})
-                .html((has_edit_users) ? count : '&plus;');
+                .html((has_edit_users) ? originalCount : '&plus;');
 
             var usertip = $btnUsers.data('bs.tooltip');
             if ( usertip ) {
@@ -393,7 +369,7 @@ define([
 
                 storeUsers = this.options.storeUsers;
                 storeUsers.bind({
-                    add     : onAddUser,
+                    add     : onUsersChanged,
                     change  : onUsersChanged,
                     reset   : onResetUsers
                 });

apps/common/main/resources/less/header.less

@@ -233,15 +233,22 @@
             display: inline-block;
             vertical-align: middle;
             border: 1px solid @gray-dark;
+            margin: 0 5px 1px 0;
         }
 
-        .name {
+        .user-name {
-            display: block;
+            color: @gray-deep;
-            padding-left: 16px;
+            font-size: 12px;
-            margin-top: -5px;
+            font-weight: bold;
             white-space: nowrap;
-            text-overflow: ellipsis;
+            cursor: default;
-            vertical-align: middle;
+
+            label {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                vertical-align: middle;
+                max-width: 200px;
+            }
         }
     }
 }