Draw user color in comments, chat, review changes.

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

@@ -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;
+                });
         }
     });
 

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

@@ -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(),

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

@@ -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 (this.userCollection) {
-                if (usersStore) {
+                    user = this.userCollection.findUser(userId);
-                    user = usersStore.findWhere({id: 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,

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

@@ -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> ',

apps/common/main/lib/model/Comment.js

@@ -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,
 

apps/common/main/lib/model/ReviewChange.js

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

apps/common/main/lib/model/User.js

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

apps/common/main/lib/template/Comments.template

@@ -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>

apps/common/main/lib/template/CommentsPopover.template

@@ -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>

apps/common/main/lib/template/ReviewChangesPopover.template

@@ -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">

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

@@ -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>',
                     '<% } %>',

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

@@ -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});
             }

apps/common/main/resources/less/comments-panel.less

@@ -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;

apps/common/main/resources/less/comments.less

@@ -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;