From f0cd2dce1b0a3ebbb91de04d26097974b0a0eb76 Mon Sep 17 00:00:00 2001
From: Alexey Golub <Tyrrrrrr@gmail.com>
Date: Tue, 26 Jun 2018 01:09:23 +0300
Subject: [PATCH] Improve reactions

---
 DiscordChatExporter.Core/Models/Reaction.cs   | 22 +++++++-----------
 .../Resources/ExportTemplates/Html/Core.html  | 12 +++++++---
 .../ExportTemplates/Html/DarkTheme.css        |  6 ++++-
 .../ExportTemplates/Html/LightTheme.css       |  6 ++++-
 .../Resources/ExportTemplates/Html/Shared.css | 23 +++++++++++--------
 .../Services/DataService.Parsers.cs           |  7 +++---
 6 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/DiscordChatExporter.Core/Models/Reaction.cs b/DiscordChatExporter.Core/Models/Reaction.cs
index a1a6595..ed70d4e 100644
--- a/DiscordChatExporter.Core/Models/Reaction.cs
+++ b/DiscordChatExporter.Core/Models/Reaction.cs
@@ -1,26 +1,20 @@
-using System;
-
-namespace DiscordChatExporter.Core.Models
+namespace DiscordChatExporter.Core.Models
 {
+    // https://discordapp.com/developers/docs/resources/channel#reaction-object
+
     public class Reaction
     {
         public int Count { get; }
 
-        public bool Me { get; }
-
-        public string Id { get; }
-
-        public string Name { get; }
+        public string EmojiId { get; }
 
-        public string Emoji { get; }
+        public string EmojiName { get; }
 
-        public Reaction(int count, bool me, string id, string name) 
+        public Reaction(int count, string emojiId, string emojiName) 
         {
             Count = count;
-            Me = me;
-            Id = id;
-            Name = name;
-            Emoji = (id == "" ? name : $"<:{name}:{id}>");
+            EmojiId = emojiId;
+            EmojiName = emojiName;
         }
     }
 }
\ No newline at end of file
diff --git a/DiscordChatExporter.Core/Resources/ExportTemplates/Html/Core.html b/DiscordChatExporter.Core/Resources/ExportTemplates/Html/Core.html
index a5ec55e..01c655d 100644
--- a/DiscordChatExporter.Core/Resources/ExportTemplates/Html/Core.html
+++ b/DiscordChatExporter.Core/Resources/ExportTemplates/Html/Core.html
@@ -184,10 +184,16 @@
 
                     {{~ # Reactions }}
                     <div class="chatlog__reactions">
-                        {{ for reaction in message.Reactions}}
+                        {{ for reaction in message.Reactions }}
                             <div class="chatlog__reaction">
-                                <div class="chatlog__reaction-emoji">{{ reaction.Emoji | FormatContent }}</div>
-                                <div class="chatlog__reaction-count">{{ reaction.Count }}</div>
+                                <span class="chatlog__reaction-emoji">
+                                    {{ if reaction.EmojiId }}
+                                        <img class="emoji emoji--small" title="{{ reaction.EmojiName }}" src="https://cdn.discordapp.com/emojis/{{ reaction.EmojiId }}.png" />
+                                    {{ else }}
+                                        {{ reaction.EmojiName }}
+                                    {{ end }}
+                                </span>
+                                <span class="chatlog__reaction-count">{{ reaction.Count }}</span>
                             </div>
                         {{ end }}
                     </div>
diff --git a/DiscordChatExporter.Core/Resources/ExportTemplates/Html/DarkTheme.css b/DiscordChatExporter.Core/Resources/ExportTemplates/Html/DarkTheme.css
index 1f79b81..6f18370 100644
--- a/DiscordChatExporter.Core/Resources/ExportTemplates/Html/DarkTheme.css
+++ b/DiscordChatExporter.Core/Resources/ExportTemplates/Html/DarkTheme.css
@@ -90,5 +90,9 @@ a {
 }
 
 .chatlog__reaction {
-    background-color: rgba(255, 255, 255, 0.0392157);
+    background-color: #ffffff0a;
+}
+
+.chatlog__reaction-count {
+    color: #ffffff4d;
 }
\ No newline at end of file
diff --git a/DiscordChatExporter.Core/Resources/ExportTemplates/Html/LightTheme.css b/DiscordChatExporter.Core/Resources/ExportTemplates/Html/LightTheme.css
index a113de0..11aaa88 100644
--- a/DiscordChatExporter.Core/Resources/ExportTemplates/Html/LightTheme.css
+++ b/DiscordChatExporter.Core/Resources/ExportTemplates/Html/LightTheme.css
@@ -51,5 +51,9 @@ a {
 }
 
 .chatlog__reaction {
-    background-color: rgba(79, 84, 92, 0.0588235);
+    background-color: #4f545c0f;
+}
+
+.chatlog__reaction-count {
+    color: #99aab5;
 }
\ No newline at end of file
diff --git a/DiscordChatExporter.Core/Resources/ExportTemplates/Html/Shared.css b/DiscordChatExporter.Core/Resources/ExportTemplates/Html/Shared.css
index 4346a03..5acf6d7 100644
--- a/DiscordChatExporter.Core/Resources/ExportTemplates/Html/Shared.css
+++ b/DiscordChatExporter.Core/Resources/ExportTemplates/Html/Shared.css
@@ -38,10 +38,15 @@ img {
     margin-right: 1px;
     width: 24px;
     height: 24px;
-    vertical-align: -.4em;
+    vertical-align: middle;
+}
+
+.emoji--small {
+    width: 16px;
+    height: 16px;
 }
 
-.emoji-jumboable {
+.emoji--large {
     width: 32px;
     height: 32px;
 }
@@ -286,23 +291,21 @@ img {
 }
 
 .chatlog__reactions {
-    display: flex;
+    display: flex;    
 }
 
 .chatlog__reaction {
-    margin: 2px;
+    margin: 6px 2px 2px 2px;
+    padding: 2px 6px 2px 2px;
     border-radius: 3px;
-    display: block;
-    padding-right: 6px;
 }
 
 .chatlog__reaction-emoji {
-    display: inline;
     margin-left: 3px;
-    padding-right: 3px;
-    font-size: large;
+    vertical-align: middle;
 }
 
 .chatlog__reaction-count {
-    display: inline;
+    font-size: .875em;
+    vertical-align: middle;
 }
\ No newline at end of file
diff --git a/DiscordChatExporter.Core/Services/DataService.Parsers.cs b/DiscordChatExporter.Core/Services/DataService.Parsers.cs
index 120c041..11ec971 100644
--- a/DiscordChatExporter.Core/Services/DataService.Parsers.cs
+++ b/DiscordChatExporter.Core/Services/DataService.Parsers.cs
@@ -141,11 +141,10 @@ namespace DiscordChatExporter.Core.Services
         private Reaction ParseReaction(JToken json)
         {
             var count = json["count"].Value<int>();
-            var me = json["me"].Value<bool>();
-            var id = json["emoji"]["id"]?.ToString();
-            var name = json["emoji"]["name"].ToString();
+            var emojiId = json["emoji"]["id"]?.Value<string>();
+            var emojiName = json["emoji"]["name"].Value<string>();
 
-            return new Reaction(count, me, id, name);
+            return new Reaction(count, emojiId, emojiName);
         }
 
         private Message ParseMessage(JToken json)