Improve reaction tooltips

packages/rocketchat-lib/i18n/ar.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "السماح بالشهادات غير الصالحة الموقعة ذاتيا",
   "Allow_Invalid_SelfSigned_Certs_Description" : "السماح لشهادة SSL غير صحيحة وموقعة ذاتيا للتأكد من صحة الرابط ومعاينات.",
   "and" : "و",
-  "And_more" : "وأكثر من ذلك __length __...",
+  "And_more" : "وأكثر من ذلك __length __",
   "Animals_and_Nature" : "حيوانات و طبيعة",
   "API" : "API",
   "API_Analytics" : "التحليلات",

packages/rocketchat-lib/i18n/cs.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Umožnit nevalidní či self-signed certifikáty",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Umožňují použít neplatné/vlastní podepsané SSL certifikáty pro ověření spojení a náhledy.",
   "and" : "a",
-  "And_more" : "A další __length __...",
+  "And_more" : "A další __length __",
   "Animals_and_Nature" : "Zvířata & Příroda",
   "API" : "API",
   "API_Analytics" : "Analytika",

packages/rocketchat-lib/i18n/de.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Ungültige und selbstsignierte SSL-Zertifikate erlauben",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Ungültige und selbstsignierte SSL-Zertifikate für die Link-Validierung und die Vorschau zulassen",
   "and" : "und",
-  "And_more" : "Und mehr __length__...",
+  "And_more" : "Und mehr __length__",
   "Animals_and_Nature" : "Tiere & Natur",
   "API" : "API",
   "API_Analytics" : "Analytics",

packages/rocketchat-lib/i18n/el.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Επιτρέψτε Άκυρη Self-Υπεγράφη Certs",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Επιτρέψτε άκυρη και αυτο-υπογεγραμμένο το πιστοποιητικό SSL για την επικύρωση σύνδεσμο και προεπισκοπήσεις.",
   "and" : "και",
-  "And_more" : "Και πιο __length __...",
+  "And_more" : "Και πιο __length __",
   "Animals_and_Nature" : "Ζώα και Φύση",
   "API" : "API",
   "API_Analytics" : "Analytics",

packages/rocketchat-lib/i18n/en.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Allow Invalid Self-Signed Certs",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Allow invalid and self-signed SSL certificate's for link validation and previews.",
   "and" : "and",
-  "And_more" : "And more __length__...",
+  "And_more" : "And more __length__",
   "Animals_and_Nature" : "Animals & Nature",
   "API" : "API",
   "API_Analytics" : "Analytics",
@@ -813,6 +813,7 @@
   "quote" : "quote",
   "Quote" : "Quote",
   "Random" : "Random",
+  "Reacted_with" : "Reacted with",
   "Reactions" : "Reactions",
   "Record" : "Record",
   "Redirect_URI" : "Redirect URI",
@@ -1146,6 +1147,7 @@
   "Yes_leave_it" : "Yes, leave it!",
   "Yes_mute_user" : "Yes, mute user!",
   "Yes_remove_user" : "Yes, remove user!",
+  "You" : "You",
   "you_are_in_preview_mode_of" : "You are in preview mode of channel #<strong>__room_name__</strong>",
   "You_are_logged_in_as" : "You are logged in as",
   "You_are_not_authorized_to_view_this_page" : "You are not authorized to view this page.",

packages/rocketchat-lib/i18n/es.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Permitir Certificados Auto-Firmados Invalidos",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Permitir certificados SSL autofirmados e invalidos para validacion de enlaces y vistas previas.",
   "and" : "y",
-  "And_more" : "Y más __length __...",
+  "And_more" : "Y más __length __",
   "Animals_and_Nature" : "Animales y Naturaleza",
   "API" : "API",
   "API_Analytics" : "Datos Analiticos",

packages/rocketchat-lib/i18n/fa.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "اجازه می دهد نامعتبر خود امضا Certs ارسل",
   "Allow_Invalid_SelfSigned_Certs_Description" : "اجازه می دهد به گواهینامه SSL نامعتبر و خود امضا برای اعتبار سنجی لینک و پیش نمایش.",
   "and" : "و",
-  "And_more" : "و __length بیشتر __...",
+  "And_more" : "و __length بیشتر __",
   "Animals_and_Nature" : "حیوانات و طبیعت",
   "API" : "API",
   "API_Analytics" : "تجزیه و تحلیل ترافیک",

packages/rocketchat-lib/i18n/fi.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Salli virheelliset ja itse allekirjoitetut SSL varmenteet linkin validointiin ja esikatseluihin",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Hyväksy virheelliset ja itse allekirjoitetut SSL-varmenteet linkkien validoinnissa ja esikatselussa.",
   "and" : "ja",
-  "And_more" : "Ja lisää __length __...",
+  "And_more" : "Ja lisää __length __",
   "Animals_and_Nature" : "Kasvit ja eläimet",
   "API" : "API",
   "API_Analytics" : "Analytics",

packages/rocketchat-lib/i18n/fr.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Autoriser les certificats auto-signés invalides",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Autoriser les certificats SSL invalides et auto-signés pour la validation des liens et extraits.",
   "and" : "et",
-  "And_more" : "et plus de __lenght__...",
+  "And_more" : "et plus de __lenght__",
   "Animals_and_Nature" : "Faune & Flore",
   "API" : "API",
   "API_Analytics" : "Analytique",

packages/rocketchat-lib/i18n/he.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "אפשר תעודות לא תקינות בחתימה עצמית",
   "Allow_Invalid_SelfSigned_Certs_Description" : "אפשר תעודות SSL שנחתמו לא ע\"י CA תקין עבור אימות לינקים ותצוגות מקדימות.",
   "and" : "ו",
-  "And_more" : "ועוד __length __...",
+  "And_more" : "ועוד __length __",
   "Animals_and_Nature" : "בעלי חיים וטבע",
   "API" : "API",
   "API_Analytics" : "סטטיסטיקה",

packages/rocketchat-lib/i18n/hr.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Dopusti Pogrešna samopotpisan Certifikati",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Dopusti nevažeće i samopotpisane SSL certifikata za vezu validaciju i pregledima.",
   "and" : "i",
-  "And_more" : "I više __length __...",
+  "And_more" : "I više __length __",
   "Animals_and_Nature" : "Životinje i priroda",
   "API" : "API",
   "API_Analytics" : "Analitika",

packages/rocketchat-lib/i18n/hu.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Az érvénytelen Önaláíró Certs",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Az érvénytelen és önaláíró SSL tanúsítvány a kapcsolatot a hitelesítésre és előzetesek.",
   "and" : "és",
-  "And_more" : "És még __length __...",
+  "And_more" : "És még __length __",
   "Animals_and_Nature" : "Állatok és Természet",
   "API" : "API",
   "API_Analytics" : "Analitika",

packages/rocketchat-lib/i18n/it.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Consentire valido autofirmato Certs",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Consentire di certificati SSL non validi e auto-firmato per la validazione di collegamento e anteprime.",
   "and" : "e",
-  "And_more" : "E più __length __...",
+  "And_more" : "E più __length __",
   "Animals_and_Nature" : "Animali & Natura",
   "API" : "API",
   "API_Analytics" : "analitica",

packages/rocketchat-lib/i18n/ja.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "無効な自己署名証明書を許可する",
   "Allow_Invalid_SelfSigned_Certs_Description" : "リンク検証とプレビューに不正な自己署名証明書を許可する。",
   "and" : "と",
-  "And_more" : "さらに __length__...",
+  "And_more" : "さらに __length__",
   "Animals_and_Nature" : "動物と自然",
   "API" : "API",
   "API_Analytics" : "アナリティクス",

packages/rocketchat-lib/i18n/km.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "អនុញ្ញាតិឲ្យវិញ្ញាបនប័ត្រមិនត្រឹមត្រូវ និងចុះហត្ថលេខាខ្លួនឯង សម្រាប់តំណភ្ជាប់ត្រួតពិនិត្យ និងមើលជាមុន",
   "Allow_Invalid_SelfSigned_Certs_Description" : "អនុញ្ញាតឱ្យរបស់វិញ្ញាបនបត្រ SSL សុពលភាពនិងបានចុះហត្ថលេខាដោយខ្លួនឯងសម្រាប់តំណនិងការមើលជាមុនសុពលភាព។",
   "and" : "និង",
-  "And_more" : "និង __length ច្រើនទៀត __...",
+  "And_more" : "និង __length ច្រើនទៀត __",
   "Animals_and_Nature" : "សត្វនិងធម្មជាតិ",
   "API" : "ប្រើ API",
   "API_Analytics" : "វិភាគ",

packages/rocketchat-lib/i18n/ko.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "잘못된 Self-Signed Certs 허용",
   "Allow_Invalid_SelfSigned_Certs_Description" : "링크 확인 및 미리보기 무효 및 자체 서명 된 SSL 인증서의 허용.",
   "and" : "그리고",
-  "And_more" : "그리고 더 __length __...",
+  "And_more" : "그리고 더 __length __",
   "Animals_and_Nature" : "동물과 자연",
   "API" : "API",
   "API_Analytics" : "분석",

packages/rocketchat-lib/i18n/ku.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Destûrê bide Invalid Self-Îmze Certs",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Destûrê ya sertîfîkayê SSL invalid û-bixwe hatiye îmzekirin ji bo mabesta link û previews.",
   "and" : "و",
-  "And_more" : "Û __length zêdetir __...",
+  "And_more" : "Û __length zêdetir __",
   "Animals_and_Nature" : "Animals & Nature",
   "API" : "API",
   "API_Analytics" : "analytics",

packages/rocketchat-lib/i18n/lo.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "ອະນຸຍາດໃຫ້ຖືກຕ້ອງດ້ວຍຕົນເອງໄດ້ເຊັນໃບຮັບຮອງ",
   "Allow_Invalid_SelfSigned_Certs_Description" : "ອະນຸຍາດໃຫ້ບໍ່ຖືກຕ້ອງແລະຕົນເອງລົງນາມຂອງໃບຢັ້ງຢືນການ SSL ສໍາລັບການກວດສອບການເຊື່ອມຕໍ່ແລະຕົວຢ່າງ.",
   "and" : "ແລະ",
-  "And_more" : "ແລະ __length ຫຼາຍ __...",
+  "And_more" : "ແລະ __length ຫຼາຍ __",
   "Animals_and_Nature" : "ສັດແລະທໍາມະຊາດ",
   "API" : "API",
   "API_Analytics" : "ການວິເຄາະ",

packages/rocketchat-lib/i18n/ms-MY.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Benarkan sah sendiri Ditandatangani CERT",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Benarkan sijil SSL tidak sah dan ditandatangani sendiri untuk pengesahan link dan tinjauan.",
   "and" : "dan",
-  "And_more" : "Dan lebih __length __...",
+  "And_more" : "Dan lebih __length __",
   "Animals_and_Nature" : "Animals & Nature",
   "API" : "API",
   "API_Analytics" : "Analisis",

packages/rocketchat-lib/i18n/nl.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Sta Ongeldige Self-Signed Certs toe",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Allow invalid and self-signed SSL certificate's for link validation and previews.",
   "and" : "en",
-  "And_more" : "En meer __length __...",
+  "And_more" : "En meer __length __",
   "Animals_and_Nature" : "Planten en dieren",
   "API" : "API",
   "API_Analytics" : "Analytics",

packages/rocketchat-lib/i18n/pl.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Pozwól na nieprawidłowe certyfikaty",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Pozwól na nieprawidłowe i samodzielnie podpisane certyfikaty SSL podczas walidacji linków i podglądów",
   "and" : "i",
-  "And_more" : "I więcej __length __...",
+  "And_more" : "I więcej __length __",
   "Animals_and_Nature" : "Fauna & Flora",
   "API" : "API",
   "API_Analytics" : "Analytics",

packages/rocketchat-lib/i18n/pt.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Permitir certificados inválidos e auto-assinados para validação de links e previews",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Permitir certificado SSL inválidos e auto-assinados para validação de link e previews.",
   "and" : "e",
-  "And_more" : "E mais __length __...",
+  "And_more" : "E mais __length__",
   "Animals_and_Nature" : "Animais e Natureza",
   "API" : "API",
   "API_Analytics" : "Analytics",
@@ -807,6 +807,7 @@
   "quote" : "citação",
   "Quote" : "Citar",
   "Random" : "Aleatória",
+  "Reacted_with" : "Reagiu com",
   "Reactions" : "Reações",
   "Record" : "Gravar",
   "Redirect_URI" : "URI de redirecionamento",
@@ -1135,6 +1136,7 @@
   "Yes_leave_it" : "Sim, sair!",
   "Yes_mute_user" : "Sim, silenciar o usuário!",
   "Yes_remove_user" : "Sim, remover usuário!",
+  "You" : "Você",
   "you_are_in_preview_mode_of" : "Esta é uma prévia do canal #<strong>__room_name__</strong>",
   "You_are_logged_in_as" : "Vocês está logado como",
   "You_are_not_authorized_to_view_this_page" : "Você não possui permissão para visualizar esta página.",

packages/rocketchat-lib/i18n/ro.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Permiteți Certificate Self-Signed Certs",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Permiteți certificat SSL invalid și auto-semnat pentru validarea link-urilor și previzualizări.",
   "and" : "și",
-  "And_more" : "Și mai mult __length __...",
+  "And_more" : "Și mai mult __length __",
   "Animals_and_Nature" : "Animale și natură",
   "API" : "API",
   "API_Analytics" : "Analytics",

packages/rocketchat-lib/i18n/ru.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Разрешить недействительные самоподписанные сертификаты",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Разрешить некорректные и самоподписанные SSL сертификаты.",
   "and" : "и",
-  "And_more" : "И еще __length__...",
+  "And_more" : "И еще __length__",
   "Animals_and_Nature" : "Животные и природа",
   "API" : "Интерфейс приложения",
   "API_Analytics" : "Аналитика",

packages/rocketchat-lib/i18n/sq.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Lejo Invalid Self-Signed Certs",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Lejo të pavlefshme dhe të vetë-nënshkruar-së certifikatë SSL për vlefshmërinë Lidhje dhe previews.",
   "and" : "dhe",
-  "And_more" : "Dhe më shumë __length __...",
+  "And_more" : "Dhe më shumë __length __",
   "Animals_and_Nature" : "Animals & Natyra",
   "API" : "API",
   "API_Analytics" : "Analitikë",

packages/rocketchat-lib/i18n/sr.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Дозволите Погрешна селф-сигнед Цертс",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Дозволите неважеће и само-потписан ССЛ сертификата за линк валидацију и прегледима.",
   "and" : "и",
-  "And_more" : "И још __ленгтх __...",
+  "And_more" : "И још __ленгтх __",
   "Animals_and_Nature" : "Животиње и Природа",
   "API" : "АПИ за",
   "API_Analytics" : "аналитика",

packages/rocketchat-lib/i18n/sv.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Tillåt Ogiltig självsignerat Cert",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Tillåt ogiltiga och självsignerade SSL-certifikat är för länk validering och förhandsvisningar.",
   "and" : "och",
-  "And_more" : "Och mer __length __...",
+  "And_more" : "Och mer __length __",
   "Animals_and_Nature" : "Djur & natur",
   "API" : "API",
   "API_Analytics" : "Analytics",

packages/rocketchat-lib/i18n/ta-IN.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "அனுமதி தவறான சுய கையொப்பம் சான்றிதழ்களையும்",
   "Allow_Invalid_SelfSigned_Certs_Description" : "இணைப்பு சரிபார்த்தல் மற்றும் முன்னோட்டங்கள் தவறான மற்றும் சுய கையொப்பம் SSL சான்றிதழ் தான் அனுமதி.",
   "and" : "மற்றும்",
-  "And_more" : "மேலும் __length __...",
+  "And_more" : "மேலும் __length __",
   "Animals_and_Nature" : "விலங்குகள் மற்றும் இயற்கை",
   "API" : "ஏபிஐ",
   "API_Analytics" : "அனலிட்டிக்ஸ்",

packages/rocketchat-lib/i18n/tr.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "İzin geçersiz Sertifikaları Kendinden İmzalı",
   "Allow_Invalid_SelfSigned_Certs_Description" : "bağlantı doğrulama ve önizleme için geçersiz ve kendinden imzalı SSL sertifikası 's izin verin.",
   "and" : "ve",
-  "And_more" : "Ve daha __length __...",
+  "And_more" : "Ve daha __length __",
   "Animals_and_Nature" : "Hayvanlar ve Doğa",
   "API" : "API",
   "API_Analytics" : "Analiz",

packages/rocketchat-lib/i18n/uk.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "Дозволити Invalid Самоподпісним Certs",
   "Allow_Invalid_SelfSigned_Certs_Description" : "Дозволити недійсні і самозаверенние SSL свідоцтво, для перевірки посилань і попередніх переглядів.",
   "and" : "і",
-  "And_more" : "І ще __length __...",
+  "And_more" : "І ще __length __",
   "Animals_and_Nature" : "Тварини і Природа",
   "API" : "API",
   "API_Analytics" : "аналітика",

packages/rocketchat-lib/i18n/zh-TW.i18n.json

@@ -128,7 +128,7 @@
   "Allow_Invalid_SelfSigned_Certs" : "允许无效，自签名的SSL证书进行链路验证和预览",
   "Allow_Invalid_SelfSigned_Certs_Description" : "允許使用無效的和自簽署的SSL證書的鏈路驗證和預覽。",
   "and" : "和",
-  "And_more" : "而更多的__length __...",
+  "And_more" : "而更多的__length __",
   "Animals_and_Nature" : "動物與自然",
   "API" : "API",
   "API_Analytics" : "分析",

packages/rocketchat-tooltip/rocketchat-tooltip.html

@@ -2,5 +2,6 @@
 	<div class="tooltip">
 		<div class="content">
 		</div>
+		<div class="tooltip-arrow"></div>
 	</div>
 </template>

packages/rocketchat-tooltip/rocketchat-tooltip.js

@@ -3,6 +3,7 @@ RocketChat.tooltip = {
 	source: null,
 	initiated: false,
 	opened: false,
+
 	init() {
 		if (this.initiated) {
 			return;
@@ -11,6 +12,7 @@ RocketChat.tooltip = {
 
 		Blaze.render(Template.rocketchatTooltip, document.body);
 	},
+
 	showElement(element, source) {
 		if (this.opened) {
 			return;
@@ -24,7 +26,7 @@ RocketChat.tooltip = {
 			this.timeout = null;
 			this.source = source;
 
-			$('.tooltip').empty().append($(element).clone().show());
+			$('.tooltip .content').empty().append($(element).clone().show());
 
 			this.setPosition().addClass('show');
 
@@ -32,16 +34,19 @@ RocketChat.tooltip = {
 		}, 300);
 
 	},
+
 	hide() {
 		if (this.timeout) {
 			clearTimeout(this.timeout);
 		}
 
 		if (this.opened) {
-			$('.tooltip').removeClass('show').empty();
+			$('.tooltip').removeClass('show');
+			$('.tooltip .content').empty();
 			this.opened = false;
 		}
 	},
+
 	setPosition() {
 		let sourcePos = $(this.source).offset();
 
@@ -55,6 +60,9 @@ RocketChat.tooltip = {
 		left = left + (sourceWidth / 2) - (tip.outerWidth() / 2);
 
 		if (left < 0) {
+			$('.tooltip .tooltip-arrow').css({
+				'margin-left': (left - 5) + 'px'
+			});
 			left = 0;
 		}
 

packages/rocketchat-tooltip/tooltip.less

@@ -5,9 +5,11 @@
 	border-radius: 5px;
 	z-index: 300;
 	color: white;
-	padding: 4px;
+	padding: 8px 10px;
 	font-size: 0.8rem;
 	opacity: 0;
+	max-width: 400px;
+	text-align: center;
 
 	.transition(opacity 0.3s ease);
 
@@ -16,8 +18,7 @@
 		opacity: 0.9;
 	}
 
-	&:after {
-		content: '';
+	.tooltip-arrow {
 		position: absolute;
 		top: 100%;
 		left: 50%;
@@ -30,7 +31,7 @@
 	}
 
 	&.bellow {
-		&:after {
+		.tooltip-arrow {
 			top: -5px;
 			border-top: none;
 			border-bottom: 5px solid #000;

packages/rocketchat-ui-message/message/message.coffee

@@ -94,19 +94,28 @@ Template.message.helpers
 
 	reactions: ->
 		msgReactions = []
+		userUsername = Meteor.user().username
 
 		for emoji, reaction of @reactions
 			total = reaction.usernames.length
-			usernames = reaction.usernames.sort().slice(0, 15)
+			usernames = '@' + reaction.usernames.slice(0, 15).join(', @')
+
+			usernames = usernames.replace('@'+userUsername, t('You').toLowerCase())
 
 			if total > 15
-				usernames.push t('And_more', { length: total - 15 })
+				usernames = usernames + ' ' + t('And_more', { length: total - 15 }).toLowerCase()
+			else
+				usernames = usernames.replace(/,([^,]+)$/, ' '+t('and')+'$1')
+
+			if usernames[0] isnt '@'
+				usernames = usernames[0].toUpperCase() + usernames.substr(1)
 
 			msgReactions.push
 				emoji: emoji
 				count: reaction.usernames.length
 				usernames: usernames
-				userReacted: reaction.usernames.indexOf(Meteor.user().username) > -1
+				reaction: ' ' + t('Reacted_with').toLowerCase() + ' ' + emoji
+				userReacted: reaction.usernames.indexOf(userUsername) > -1
 
 		return msgReactions
 

packages/rocketchat-ui-message/message/message.html

@@ -76,9 +76,9 @@
 					<span class="reaction-emoji">{{> emojione reaction.emoji}}</span>
 					<span class="reaction-count">{{reaction.count}}</span>
 					<ul class="people">
-						{{#each reaction.usernames}}
-							<li>{{.}}</li>
-						{{/each}}
+						<span style="font-weight: bold;">
+							{{reaction.usernames}} <span style="color: #aaa;">{{reaction.reaction}}</span>
+						</span>
 					</ul>
 				</li>
 			{{/each}}