Add CSS class to items in the autocomplete list for mentions

The CSS rules specific to the autocomplete list for mentions in the chat
view were applied to any other autocomplete list. In the main Talk UI
this is not a problem, as that is the only autocomplete list, but it
could be when using the Talk chat view in other components, like the
Files app.

The autocomplete list is created as a child of the body element itself,
so to limit the CSS rules only to the chat view it is not possible to
just prepend "#chatView" to the rules. Instead, now each item has a CSS
class (hopefully :-) ) unique to the chat view.

Unfortunately, it does not seem to be possible to ensure that the rules
defined in "autocomplete.scss" will not collide/override rules defined
in other apps, as customizing the CSS classes in ".atwho-view" so the
rules are applied only when it belongs to the chat view does not seem to
be possible (except, maybe, with some hacks).

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

css/comments.scss

@@ -93,7 +93,7 @@
 }
 
 #chatView .comment .avatar,
-.atwho-view-ul * .avatar{
+.atwho-view-ul .chat-view-mention-autocomplete .avatar{
 	width: 32px;
 	height: 32px;
 	line-height: 32px;
@@ -101,7 +101,7 @@
 }
 
 #chatView .comment .message .avatar,
-.atwho-view-ul * .avatar
+.atwho-view-ul .chat-view-mention-autocomplete .avatar
 {
 	display: inline-block;
 }
@@ -146,7 +146,7 @@
 	display: none !important;
 }
 
-.atwho-view-ul * .avatar-name-wrapper,
+.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper,
 #chatView .comment .authorRow {
 	position: relative;
 	display: inline-flex;
@@ -166,13 +166,13 @@ body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.gues
 	}
 }
 
-.atwho-view-ul .avatar-name-wrapper,
-.atwho-view-ul .avatar-name-wrapper .avatar,
-.atwho-view-ul .avatar-name-wrapper .avatar img {
+.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper,
+.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar,
+.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar img {
 	cursor: pointer;
 }
 
-.atwho-view-ul * .avatar-name-wrapper {
+.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper {
 	white-space: nowrap;
 }
 

js/views/chatview.js

@@ -89,7 +89,7 @@
 					sorter: function (q, items) { return items; }
 				},
 				displayTpl: function (item) {
-					return '<li>' +
+					return '<li class="chat-view-mention-autocomplete">' +
 						'<span class="avatar-name-wrapper">' +
 							'<span class="avatar" ' +
 									'data-user-id="' + escapeHTML(item.id) + '" ' +