diff options
| author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2018-11-28 09:46:54 +0100 |
|---|---|---|
| committer | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2018-11-28 15:25:47 +0100 |
| commit | 41d28ddf19f622a1b28bda9aff739e8be738cd5f (patch) | |
| tree | 7ebc5a3a9d83df7517514eda404f028d60f677e2 | |
| parent | ba798aba862542a59d52a0595be9036a8c0acaeb (diff) | |
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>
| -rw-r--r-- | css/comments.scss | 14 | ||||
| -rw-r--r-- | js/views/chatview.js | 2 |
2 files changed, 8 insertions, 8 deletions
diff --git a/css/comments.scss b/css/comments.scss index 3ecaafd38..98d613288 100644 --- a/css/comments.scss +++ b/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; } diff --git a/js/views/chatview.js b/js/views/chatview.js index bf2e6750e..bc0c14d60 100644 --- a/js/views/chatview.js +++ b/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) + '" ' + |