From 4fdfe3868ed9c2837c9d83cd48d9fbf3bb60f1d2 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 12 Aug 2016 00:18:11 +0200
Subject: [PATCH] Updated visuals for mentions

---
 com.woltlab.wcf/templates/wysiwyg.tpl            | 16 ++++++++++++++--
 .../js/WoltLabSuite/Core/Ui/Redactor/Mention.js  | 12 ++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index 973115b20d..ac556360d4 100644
--- 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 b23defc07f..a86ac9a559 100644
--- 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 = '';
-- 
2.20.1