Change user name in chat panel

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

@@ -75,7 +75,9 @@ define([
                     '<% if (msg.get("type")==1) { %>',
                         '<div class="message service" data-can-copy="true"><%= msg.get("message") %></div>',
                     '<% } else { %>',
-                        '<div class="user" data-can-copy="true" style="color: <%= msg.get("usercolor") %>;"><%= scope.getUserName(msg.get("username")) %></div>',
+                        '<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>',
                         '<label class="message user-select" data-can-copy="true"><%= msg.get("message") %></label>',
                     '<% } %>',
             '</li>'].join(''),
@@ -219,7 +221,7 @@ define([
         _prepareMessage: function(m) {
             var user    = this.storeUsers.findUser(m.get('userid'));
             m.set({
-                usercolor   : user ? user.get('color') : '#000',
+                usercolor   : user ? user.get('color') : null,
                 message     : this._pickLink(Common.Utils.String.htmlEncode(m.get('message')))
             }, {silent:true});
         },

apps/common/main/resources/less/chat.less

@@ -62,6 +62,7 @@
         }
 
         .name {
+            font-size: 12px;
             display: block;
             position: relative;
             padding: 0 10px 0 16px;
@@ -69,7 +70,6 @@
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
-            font-weight: bold;
         }
     }
 
@@ -100,6 +100,23 @@
                     text-overflow: ellipsis;
                 }
 
+                .user-name {
+                    color: @gray-deep;
+                    font-size: 12px;
+                    font-weight: bold;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+
+                .color {
+                    width: 12px;
+                    height: 12px;
+                    border: 1px solid @gray-dark;
+                    margin: 0 5px 3px 0;
+                    vertical-align: middle;
+                }
+
                 .message {
                     word-wrap: break-word;
                     width: 100%;

apps/common/main/resources/less/history.less

@@ -119,8 +119,8 @@
             white-space: nowrap;
             overflow: hidden;
             font-size: 12px;
+            font-weight: bold;
             cursor: pointer;
-            color: @gray-darker;
             text-overflow: ellipsis;
             padding-right: 35px;
         }