Updated visuals for mentions

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index 973115b20dd799336e6c3520f44413940dad75c6..ac556360d4b19c016be00f57401931f2e10a719e 100644 (file)
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -1,11 +1,23 @@
 <style>
        woltlab-mention {
-               background-color: rgb(240, 248, 255);
-               border: 1px solid rgb(52, 152, 219);
+               background-color: rgb(241, 246, 251);
+               border: 1px solid rgb(176, 200, 224);
+               border-radius: 2px;
                display: inline-block;
                margin: 0 3px;
                padding: 0 2px;
        }
+       
+       woltlab-mention::before {
+               color: rgb(125, 130, 135);
+               content: "@";
+               padding-right: 2px;
+       }
+       
+       woltlab-mention::after {
+               color: rgb(44, 62, 80);
+               content: attr(data-username);
+       }
 </style>
 
 <script data-relocate="true">

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Mention.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Mention.js
index b23defc07f74d6f6bf83717bc84fd4e37bf23a08..a86ac9a55948ec481f9062cf6b802807e2aa970f 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Mention.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Mention.js
@@ -1,6 +1,8 @@
 define(['Ajax', 'Environment', 'EventHandler', 'Ui/Alignment'], function(Ajax, Environment, EventHandler, UiAlignment) {
        "use strict";
        
+       var _dropdownContainer = null;
+       
        function UiRedactorMention(redactor) { this.init(redactor); }
        UiRedactorMention.prototype = {
                init: function(redactor) {
@@ -145,7 +147,6 @@ define(['Ajax', 'Environment', 'EventHandler', 'Ui/Alignment'], function(Ajax, E
                        elAttr(mention, 'contenteditable', 'false');
                        elData(mention, 'user-id', elData(item, 'user-id'));
                        elData(mention, 'username', elData(item, 'username'));
-                       mention.textContent = elData(item, 'username');
                        
                        // U+200C = zero width non-joiner
                        var text = document.createTextNode('\u200c');
@@ -231,7 +232,14 @@ define(['Ajax', 'Environment', 'EventHandler', 'Ui/Alignment'], function(Ajax, E
                        if (this._dropdownMenu === null) {
                                this._dropdownMenu = elCreate('ol');
                                this._dropdownMenu.className = 'dropdownMenu';
-                               elById('dropdownMenuContainer').appendChild(this._dropdownMenu);
+                               
+                               if (_dropdownContainer === null) {
+                                       _dropdownContainer = elCreate('div');
+                                       _dropdownContainer.className = 'dropdownMenuContainer';
+                                       document.body.appendChild(_dropdownContainer);
+                               }
+                               
+                               _dropdownContainer.appendChild(this._dropdownMenu);
                        }
                        
                        this._dropdownMenu.innerHTML = '';