From 8212070fa373f66369388dd34eecf65fcc81183f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 5 Jun 2018 11:54:49 +0300 Subject: [PATCH] Header: show editing users in format () --- apps/common/main/lib/collection/Users.js | 9 +-- .../main/lib/controller/ReviewChanges.js | 2 +- apps/common/main/lib/view/Header.js | 74 +++++++------------ apps/common/main/resources/less/header.less | 19 +++-- 4 files changed, 43 insertions(+), 61 deletions(-) diff --git a/apps/common/main/lib/collection/Users.js b/apps/common/main/lib/collection/Users.js index 935224dcf..e3fa41a23 100644 --- a/apps/common/main/lib/collection/Users.js +++ b/apps/common/main/lib/collection/Users.js @@ -61,12 +61,11 @@ define([ }, getEditingCount: function() { - var count = 0; - this.each(function(user){ - user.get('online') && !user.get('view') && ++count; - }); + return this.filter(function(item){return item.get('online') && !item.get('view')}).length; + }, - 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) { diff --git a/apps/common/main/lib/controller/ReviewChanges.js b/apps/common/main/lib/controller/ReviewChanges.js index 161a4013d..12243cd9c 100644 --- a/apps/common/main/lib/controller/ReviewChanges.js +++ b/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); }); diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js index 1d8986488..97ccdeb4a 100644 --- a/apps/common/main/lib/view/Header.js +++ b/apps/common/main/lib/view/Header.js @@ -57,16 +57,18 @@ define([ var templateUserItem = '
  • " class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">' + - '
    ;" >' + - '' + - '
    ' + + '
    ' + + '
    ;">
    '+ + '' + + '<% if (len>1) { %><% } %>' + + '
    '+ '
    • '; var templateUserList = _.template( '
      ' + - '<% _.each(users, function(item) { %>' + - '<%= usertpl({user: item, fnEncode: fnEncode}) %>' + - '<% }); %>' + + '<% for (originalId in users) { %>' + + '<%= usertpl({user: users[originalId][0], fnEncode: fnEncode, len: users[originalId].length}) %>' + + '<% } %>' + '
    '); var templateRightBox = '
    ' + @@ -115,63 +117,37 @@ define([ '' + '
    '; - 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({ - el: $userList.find('ul'), - useKeyboard: true, - minScrollbarLength: 40, - alwaysVisibleY: true - }); + if (!$userList.scroller) + $userList.scroller = new Common.UI.Scroller({ + el: $userList.find('ul'), + useKeyboard: 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 : '+'); + .html((has_edit_users) ? originalCount : '+'); 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 }); diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less index 4566602cc..9fae156cd 100644 --- a/apps/common/main/resources/less/header.less +++ b/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 { - display: block; - padding-left: 16px; - margin-top: -5px; + .user-name { + color: @gray-deep; + font-size: 12px; + font-weight: bold; white-space: nowrap; - text-overflow: ellipsis; - vertical-align: middle; + cursor: default; + + label { + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + max-width: 200px; + } } } }