Header: show editing users in format <username>(<opened browser tabs>)
This commit is contained in:
parent
71997cf64e
commit
8212070fa3
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -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
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue