[HTML] Add indication for pinned messages

Closes #193
5 years ago · 2cdb230b1e
parent 9241b7d2d1
commit 2cdb230b1e
6 changed files with 39 additions and 19 deletions
--- a/DiscordChatExporter.Core.Models/Message.cs
+++ b/DiscordChatExporter.Core.Models/Message.cs
@ -29,9 +29,12 @@ namespace DiscordChatExporter.Core.Models

        public IReadOnlyList<User> MentionedUsers { get; }

+        public bool IsPinned { get; }
+
        public Message(string id, string channelId, MessageType type, User author, DateTimeOffset timestamp,
            DateTimeOffset? editedTimestamp, string content, IReadOnlyList<Attachment> attachments,
-            IReadOnlyList<Embed> embeds, IReadOnlyList<Reaction> reactions, IReadOnlyList<User> mentionedUsers)
+            IReadOnlyList<Embed> embeds, IReadOnlyList<Reaction> reactions, IReadOnlyList<User> mentionedUsers,
+            bool isPinned)
        {
            Id = id;
            ChannelId = channelId;
@ -44,6 +47,7 @@ namespace DiscordChatExporter.Core.Models
            Embeds = embeds;
            Reactions = reactions;
            MentionedUsers = mentionedUsers;
+            IsPinned = isPinned;
        }

        public override string ToString() => Content;
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css
@ -54,6 +54,10 @@ a {
    color: rgba(255, 255, 255, 0.2);
 }

+.chatlog__message--pinned {
+    background-color: rgba(249, 168, 37, 0.05);
+}
+
 .chatlog__edited-timestamp {
    color: rgba(255, 255, 255, 0.2);
 }
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css
@ -55,6 +55,10 @@ a {
    color: #99aab5;
 }

+.chatlog__message--pinned {
+    background-color: rgba(249, 168, 37, 0.05);
+}
+
 .chatlog__edited-timestamp {
    color: #99aab5;
 }
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.css
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.css
@ -65,7 +65,7 @@ img {
    margin-top: 4px;
    padding: 8px;
    border: 2px solid;
-    border-radius: 5px;    
+    border-radius: 5px;
 }

 .pre--inline {
@ -100,7 +100,7 @@ img {
 .info {
    display: flex;
    max-width: 100%;
-    margin: 0 5px 10px 5px;    
+    margin: 0 5px 10px 5px;
 }

 .info__guild-icon-container {
@ -179,8 +179,13 @@ img {
    font-size: .75em;
 }

+.chatlog__message {
+    padding: 2px 5px;
+    margin-right: -5px;
+    margin-left: -5px;
+}
+
 .chatlog__content {
-    padding-top: 5px;
    font-size: .9375em;
    word-wrap: break-word;
 }
@ -190,20 +195,17 @@ img {
    font-size: .8em;
 }

-.chatlog__attachment {
-    margin: 5px 0;
-}
-
 .chatlog__attachment-thumbnail {
+    margin-top: 5px;
    max-width: 50%;
    max-height: 500px;
    border-radius: 3px;
 }

 .chatlog__embed {
+    margin-top: 5px;
    display: flex;
    max-width: 520px;
-    margin-top: 5px;
 }

 .chatlog__embed-color-pill {
@ -301,7 +303,7 @@ img {
    margin-top: 10px;
 }

-.chatlog__embed-image {    
+.chatlog__embed-image {
    max-width: 500px;
    max-height: 400px;
    border-radius: 3px;
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html
@ -27,7 +27,7 @@
    </script>
 </head>
 <body>
-    
+
 {{~ # Info ~}}
 <div class="info">
    <div class="info__guild-icon-container">
@ -36,13 +36,13 @@
    <div class="info__metadata">
        <div class="info__guild-name">{{ Model.Guild.Name | html.escape }}</div>
        <div class="info__channel-name">{{ Model.Channel.Name | html.escape }}</div>
-        
+
        {{~ if Model.Channel.Topic ~}}
            <div class="info__channel-topic">{{ Model.Channel.Topic | html.escape }}</div>
        {{~ end ~}}

        <div class="info__channel-message-count">{{ Model.Messages | array.size | object.format "N0" }} messages</div>
-        
+
        {{~ if Model.After || Model.Before ~}}
            <div class="info__channel-date-range">
                {{~ if Model.After && Model.Before ~}}
@ -64,18 +64,21 @@
            {{~ # Avatar ~}}
            <div class="chatlog__author-avatar-container">
                <img class="chatlog__author-avatar" src="{{ group.Author.AvatarUrl }}" />
-            </div>            
+            </div>
            <div class="chatlog__messages">
                {{~ # Author name and timestamp ~}}
                <span class="chatlog__author-name" title="{{ group.Author.FullName | html.escape }}" data-user-id="{{ group.Author.Id | html.escape }}">{{ group.Author.Name | html.escape }}</span>
+
+                {{~ # Bot tag ~}}
                {{~ if group.Author.IsBot ~}}
                    <span class="chatlog__bot-tag">BOT</span>
                {{~ end ~}}
+
                <span class="chatlog__timestamp">{{ group.Timestamp | FormatDate | html.escape }}</span>

                {{~ # Messages ~}}
                {{~ for message in group.Messages ~}}
-                    <div class="chatlog__message" data-message-id="{{ message.Id }}">
+                    <div class="chatlog__message {{if message.IsPinned }}chatlog__message--pinned{{ end }}" data-message-id="{{ message.Id }}">
                    {{~ # Content ~}}
                    {{~ if message.Content ~}}
                        <div class="chatlog__content">
@ -170,9 +173,9 @@
                                            </a>
                                        </div>
                                    {{~ end ~}}
-                                </div>    
+                                </div>

-                                {{~ # Image ~}} 
+                                {{~ # Image ~}}
                                {{~ if embed.Image ~}}
                                    <div class="chatlog__embed-image-container">
                                        <a class="chatlog__embed-image-link" href="{{ embed.Image.Url }}">
@ -189,7 +192,7 @@
                                                <img class="chatlog__embed-footer-icon" src="{{ embed.Footer.IconUrl }}" />
                                            {{~ end ~}}
                                        {{~ end ~}}
-                                        
+
                                        <span class="chatlog__embed-footer-text">
                                            {{~ if embed.Footer ~}}
                                                {{~ if embed.Footer.Text ~}}
--- a/DiscordChatExporter.Core.Services/DataService.Parsers.cs
+++ b/DiscordChatExporter.Core.Services/DataService.Parsers.cs
@ -201,8 +201,11 @@ namespace DiscordChatExporter.Core.Services
            // Get mentioned users
            var mentionedUsers = json["mentions"].EmptyIfNull().Select(ParseUser).ToArray();

+            // Get whether this message is pinned
+            var isPinned = json["pinned"].Value<bool>();
+
            return new Message(id, channelId, type, author, timestamp, editedTimestamp, content, attachments, embeds,
-                reactions, mentionedUsers);
+                reactions, mentionedUsers, isPinned);
        }
    }
 }