From 8212070fa373f66369388dd34eecf65fcc81183f Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Tue, 5 Jun 2018 11:54:49 +0300
Subject: [PATCH] Header: show editing users in format <username>(<opened
browser tabs>)
---
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 =
'<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") %>;" >' +
- '<label class="name"><%= fnEncode(user.get("username")) %></label>' +
- '</div>' +
+ '<div class="user-name">' +
+ '<div class="color" style="background-color: <%= user.get("color") %>;"></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) { %>' +
- '<%= usertpl({user: item, fnEncode: fnEncode}) %>' +
- '<% }); %>' +
+ '<% for (originalId in users) { %>' +
+ '<%= 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({
- 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;
+ }
}
}
}