Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Draw user color in comments, chat, review changes.

Browse source
This commit is contained in:
Julia Radzhabova 2018-06-04 14:45:22 +03:00
parent 2c08096b17
commit 71997cf64e
14 changed files with 97 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/common/main/lib/collection/Users.js
View file

@ -74,6 +74,13 @@ define([
function(model){
return model.get('id') == id;
});
},
findOriginalUser: function(id) {
return this.find(
function(model){
return model.get('idOriginal') == id;
});
}
});

2
apps/common/main/lib/controller/Chat.js
View file

@ -148,6 +148,7 @@ define([
if (user) {
var usermodel = new Common.Models.User({
id : user.asc_getId(),
idOriginal : user.asc_getIdOriginal(),
username : user.asc_getUserName(),
online : true,
color : user.asc_getColor(),
@ -170,6 +171,7 @@ define([
if (!user) {
usersStore.add(new Common.Models.User({
id : change.asc_getId(),
idOriginal : change.asc_getIdOriginal(),
username : change.asc_getUserName(),
online : change.asc_getState(),
color : change.asc_getColor(),

37
apps/common/main/lib/controller/Comments.js
View file

@ -134,6 +134,10 @@ define([
});
this.view.render();
this.userCollection = this.getApplication().getCollection('Common.Collections.Users');
this.userCollection.on('reset', _.bind(this.onUpdateUsers, this));
this.userCollection.on('add', _.bind(this.onUpdateUsers, this));
this.bindViewEvents(this.view, this.events);
},
setConfig: function (data, api) {
@ -162,7 +166,6 @@ define([
this.api.asc_registerCallback('asc_onShowComment', _.bind(this.onApiShowComment, this));
this.api.asc_registerCallback('asc_onHideComment', _.bind(this.onApiHideComment, this));
this.api.asc_registerCallback('asc_onUpdateCommentPosition', _.bind(this.onApiUpdateCommentPosition, this));
this.api.asc_registerCallback('asc_onDocumentPlaceChanged', _.bind(this.onDocumentPlaceChanged, this));
}
},
@ -703,9 +706,11 @@ define([
date = (data.asc_getOnlyOfficeTime()) ? new Date(this.stringOOToLocalDate(data.asc_getOnlyOfficeTime())) :
((data.asc_getTime() == '') ? new Date() : new Date(this.stringUtcToLocalDate(data.asc_getTime())));
var user = this.userCollection.findOriginalUser(data.asc_getUserId());
comment.set('comment', data.asc_getText());
comment.set('userid', data.asc_getUserId());
comment.set('username', data.asc_getUserName());
comment.set('usercolor', (user) ? user.get('color') : null);
comment.set('resolved', data.asc_getSolved());
comment.set('quote', data.asc_getQuoteText());
comment.set('time', date.getTime());
@ -721,10 +726,12 @@ define([
dateReply = (data.asc_getReply(i).asc_getOnlyOfficeTime()) ? new Date(this.stringOOToLocalDate(data.asc_getReply(i).asc_getOnlyOfficeTime())) :
((data.asc_getReply(i).asc_getTime() == '') ? new Date() : new Date(this.stringUtcToLocalDate(data.asc_getReply(i).asc_getTime())));
user = this.userCollection.findOriginalUser(data.asc_getReply(i).asc_getUserId());
replies.push(new Common.Models.Reply({
id : Common.UI.getId(),
userid : data.asc_getReply(i).asc_getUserId(),
username : data.asc_getReply(i).asc_getUserName(),
usercolor : (user) ? user.get('color') : null,
date : t.dateToLocaleTimeString(dateReply),
reply : data.asc_getReply(i).asc_getText(),
time : dateReply.getTime(),
@ -751,13 +758,11 @@ define([
},
onApiLockComment: function (id,userId) {
var cur = this.findComment(id),
usersStore = null,
user = null;
if (cur) {
usersStore = this.getApplication().getCollection('Common.Collections.Users');
if (usersStore) {
user = usersStore.findWhere({id: userId});
if (this.userCollection) {
user = this.userCollection.findUser(userId);
if (user) {
this.getPopover() && this.getPopover().saveText();
this.view.saveText();
@ -1079,13 +1084,31 @@ define([
// helpers
onUpdateUsers: function() {
var users = this.userCollection;
this.collection.each(function (model) {
var user = users.findOriginalUser(model.get('userid'));
model.set('usercolor', (user) ? user.get('color') : null, {silent: true});
model.get('replys').forEach(function (reply) {
user = users.findOriginalUser(reply.get('userid'));
reply.set('usercolor', (user) ? user.get('color') : null, {silent: true});
});
});
this.updateComments(true);
if (this.getPopover().isVisible())
this.getPopover().update(true);
},
readSDKComment: function (id, data) {
var date = (data.asc_getOnlyOfficeTime()) ? new Date(this.stringOOToLocalDate(data.asc_getOnlyOfficeTime())) :
((data.asc_getTime() == '') ? new Date() : new Date(this.stringUtcToLocalDate(data.asc_getTime())));
var user = this.userCollection.findOriginalUser(data.asc_getUserId());
var comment = new Common.Models.Comment({
uid : id,
userid : data.asc_getUserId(),
username : data.asc_getUserName(),
usercolor : (user) ? user.get('color') : null,
date : this.dateToLocaleTimeString(date),
quote : data.asc_getQuoteText(),
comment : data.asc_getText(),
@ -1121,10 +1144,12 @@ define([
date = (data.asc_getReply(i).asc_getOnlyOfficeTime()) ? new Date(this.stringOOToLocalDate(data.asc_getReply(i).asc_getOnlyOfficeTime())) :
((data.asc_getReply(i).asc_getTime() == '') ? new Date() : new Date(this.stringUtcToLocalDate(data.asc_getReply(i).asc_getTime())));
var user = this.userCollection.findOriginalUser(data.asc_getReply(i).asc_getUserId());
replies.push(new Common.Models.Reply({
id : Common.UI.getId(),
userid : data.asc_getReply(i).asc_getUserId(),
username : data.asc_getReply(i).asc_getUserName(),
usercolor : (user) ? user.get('color') : null,
date : this.dateToLocaleTimeString(date),
reply : data.asc_getReply(i).asc_getText(),
time : date.getTime(),
@ -1157,12 +1182,14 @@ define([
return;
}
var user = this.userCollection.findOriginalUser(this.currentUserId);
var comment = new Common.Models.Comment({
id: -1,
time: date.getTime(),
date: this.dateToLocaleTimeString(date),
userid: this.currentUserId,
username: this.currentUserName,
usercolor: (user) ? user.get('color') : null,
editTextInPopover: true,
showReplyInPopover: false,
hideAddReply: true,

15
apps/common/main/lib/controller/ReviewChanges.js
View file

@ -96,6 +96,9 @@ define([
Common.NotificationCenter.on('spelling:turn', this.onTurnSpelling.bind(this));
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
this.userCollection.on('reset', _.bind(this.onUpdateUsers, this));
this.userCollection.on('add', _.bind(this.onUpdateUsers, this));
},
setConfig: function (data, api) {
this.setApi(api);
@ -386,12 +389,12 @@ define([
}
var date = (item.get_DateTime() == '') ? new Date() : new Date(item.get_DateTime()),
color = item.get_UserColor(),
user = me.userCollection.findOriginalUser(item.get_UserId()),
change = new Common.Models.ReviewChange({
uid : Common.UI.getId(),
userid : item.get_UserId(),
username : item.get_UserName(),
usercolor : '#'+Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
usercolor : (user) ? user.get('color') : null,
date : me.dateToLocaleTimeString(date),
changetext : changetext,
id : Common.UI.getId(),
@ -686,6 +689,14 @@ define([
this.SetDisabled(true);
},
onUpdateUsers: function() {
var users = this.userCollection;
this.popoverChanges.each(function (model) {
var user = users.findOriginalUser(model.get('userid'));
model.set('usercolor', (user) ? user.get('color') : null);
});
},
textInserted: '<b>Inserted:</b>',
textDeleted: '<b>Deleted:</b>',
textParaInserted: '<b>Paragraph Inserted</b> ',

2
apps/common/main/lib/model/Comment.js
View file

@ -55,6 +55,7 @@ define([
uid : 0, // asc
userid : 0,
username : 'Guest',
usercolor : null,
date : undefined,
quote : '',
comment : '',
@ -84,6 +85,7 @@ define([
time : 0, // acs
userid : 0,
username : 'Guest',
usercolor : null,
reply : '',
date : undefined,

2
apps/common/main/lib/model/ReviewChange.js
View file

@ -55,7 +55,7 @@ define([
uid : 0, // asc
userid : 0,
username : 'Guest',
usercolor : '#ee3525',
usercolor : null,
date : undefined,
changetext : '',
lock : false,

1
apps/common/main/lib/model/User.js
View file

@ -57,6 +57,7 @@ define([
return {
iid : Common.UI.getId(), // internal id for rendering
id : undefined,
idOriginal : undefined,
username : 'Guest',
color : '#fff',
colorval : null,

8
apps/common/main/lib/template/Comments.template
View file

@ -3,7 +3,9 @@
<!-- comment block -->
<div class="user-name"><%=scope.getUserName(username)%></div>
<div class="user-name">
<div class="color" style="display: inline-block; background-color: <% if (usercolor!==null) { %><%=usercolor%><% } else { %> #cfcfcf <% } %>; " ></div><%= scope.getUserName(username) %>
</div>
<div class="user-date"><%=date%></div>
<% if (quote!==null && quote!=='') { %>
<div class="user-quote"><%=scope.getFixedQuote(quote)%></div>
@ -24,7 +26,9 @@
<div class="reply-arrow img-commonctrl"></div>
<% _.each(replys, function (item) { %>
<div class="reply-item-ct">
<div class="user-name"><%=scope.getUserName(item.get("username"))%></div>
<div class="user-name">
<div class="color" style="display: inline-block; background-color: <% if (item.get("usercolor")!==null) { %><%=item.get("usercolor")%><% } else { %> #cfcfcf <% } %>; " ></div><%= scope.getUserName(item.get("username")) %>
</div>
<div class="user-date"><%=item.get("date")%></div>
<% if (!item.get("editText")) { %>
<div class="user-message" data-can-copy="true"><%=scope.pickLink(item.get("reply"))%></div>

8
apps/common/main/lib/template/CommentsPopover.template
View file

@ -2,7 +2,9 @@
<!-- comment block -->
<div class="user-name"><%=scope.getUserName(username)%></div>
<div class="user-name">
<div class="color" style="display: inline-block; background-color: <% if (usercolor!==null) { %><%=usercolor%><% } else { %> #cfcfcf <% } %>; " ></div><%= scope.getUserName(username) %>
</div>
<div class="user-date"><%=date%></div>
<% if (!editTextInPopover || hint) { %>
<div oo_editor_input="true" tabindex="-1" class="user-message user-select"><%=scope.pickLink(comment)%></div>
@ -24,7 +26,9 @@
<div class="reply-arrow img-commonctrl"></div>
<% _.each(replys, function (item) { %>
<div class="reply-item-ct">
<div class="user-name"><%=scope.getUserName(item.get("username"))%></div>
<div class="user-name">
<div class="color" style="display: inline-block; background-color: <% if (item.get("usercolor")!==null) { %><%=item.get("usercolor")%><% } else { %> #cfcfcf <% } %>; " ></div><%= scope.getUserName(item.get("username")) %>
</div>
<div class="user-date"><%=item.get("date")%></div>
<% if (!item.get("editTextInPopover")) { %>
<div oo_editor_input="true" tabindex="-1" class="user-message user-select"><%=scope.pickLink(item.get("reply"))%></div>

4
apps/common/main/lib/template/ReviewChangesPopover.template
View file

@ -1,5 +1,7 @@
<div id="<%=id%>" class="user-comment-item">
<div class="user-name-colored"><span style="background-color:<%=usercolor%>;"><%=scope.getUserName(username)%></span></div>
<div class="user-name">
<div class="color" style="display: inline-block; background-color: <% if (usercolor!==null) { %><%=usercolor%><% } else { %> #cfcfcf <% } %>; " ></div><%= scope.getUserName(username) %>
</div>
<div class="user-date"><%=date%></div>
<div class="user-message limit-height"><%=changetext%></div>
<div class="edit-ct">

2
apps/common/main/lib/view/Chat.js
View file

@ -76,7 +76,7 @@ define([
'<div class="message service" data-can-copy="true"><%= msg.get("message") %></div>',
'<% } else { %>',
'<div class="user-name" data-can-copy="true">',
'<% if (msg.get("usercolor")!==null) { %><div class="color" style="display: inline-block; background-color: <%=msg.get("usercolor")%>; " ></div><% } %><%= scope.getUserName(msg.get("username")) %>',
'<div class="color" style="display: inline-block; background-color: <% if (msg.get("usercolor")!==null) { %><%=msg.get("usercolor")%><% } else { %> #cfcfcf <% } %>; " ></div><%= scope.getUserName(msg.get("username")) %>',
'</div>',
'<label class="message user-select" data-can-copy="true"><%= msg.get("message") %></label>',
'<% } %>',

4
apps/common/main/lib/view/Comments.js
View file

@ -539,7 +539,9 @@ define([
// CommentsPopover
update: function () {
update: function (needRender) {
if (this.commentsView && needRender)
this.commentsView.onResetItems();
if (this.commentsView && this.commentsView.scroller) {
this.commentsView.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true});
}

11
apps/common/main/resources/less/comments-panel.less
View file

@ -11,7 +11,8 @@
}
.user-name {
color: @gray-darker;
color: @gray-deep;
font-size: 12px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
@ -22,6 +23,14 @@
max-width: 155px;
}
.color {
width: 12px;
height: 12px;
border: 1px solid @gray-dark;
margin: 0 5px 3px 0;
vertical-align: middle;
}
.user-date {
color: @gray-darker;
font-size: 10px;

10
apps/common/main/resources/less/comments.less
View file

@ -109,6 +109,8 @@
}
.user-name {
color: @gray-deep;
font-size: 12px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
@ -118,6 +120,14 @@
cursor: default;
}
.color {
width: 12px;
height: 12px;
border: 1px solid @gray-dark;
margin: 0 5px 3px 0;
vertical-align: middle;
}
.user-name-colored {
padding: 10px 0px 0 0px;
cursor: default;