Merge pull request #304 from python-discord/deleted-messages-visible-line-endings

Make newlines visible in deleted messages

4 files changed, 53 insertions, 10 deletions

diff --git a/pydis_site/apps/staff/templatetags/deletedmessage_filters.py b/pydis_site/apps/staff/templatetags/deletedmessage_filters.py
index f950870f..8e14ced6 100644
--- a/pydis_site/apps/staff/templatetags/deletedmessage_filters.py
+++ b/pydis_site/apps/staff/templatetags/deletedmessage_filters.py
@@ -7,11 +7,22 @@ register = template.Library()
 
 @register.filter
 def hex_colour(color: int) -> str:
-    """Converts an integer representation of a colour to the RGB hex value."""
-    return f"#{color:0>6X}"
+    """
+    Converts an integer representation of a colour to the RGB hex value.
+
+    As we are using a Discord dark theme analogue, black colours are returned as white instead.
+    """
+    colour = f"#{color:0>6X}"
+    return colour if colour != "#000000" else "#FFFFFF"
 
 
 @register.filter
 def footer_datetime(timestamp: str) -> datetime:
     """Takes an embed timestamp and returns a timezone-aware datetime object."""
     return datetime.fromisoformat(timestamp)
+
+
[email protected]
+def visible_newlines(text: str) -> str:
+    """Takes an embed timestamp and returns a timezone-aware datetime object."""
+    return text.replace("\n", " <span class='has-text-grey'>↵</span><br>")
diff --git a/pydis_site/apps/staff/tests/test_deletedmessage_filters.py b/pydis_site/apps/staff/tests/test_deletedmessage_filters.py
index d9179044..31215784 100644
--- a/pydis_site/apps/staff/tests/test_deletedmessage_filters.py
+++ b/pydis_site/apps/staff/tests/test_deletedmessage_filters.py
@@ -18,16 +18,49 @@ class Colour(enum.IntEnum):
 
 class DeletedMessageFilterTests(TestCase):
     def test_hex_colour_filter(self):
-        self.assertEqual(deletedmessage_filters.hex_colour(Colour.BLACK), "#000000")
-        self.assertEqual(deletedmessage_filters.hex_colour(Colour.BLUE), "#0000FF")
-        self.assertEqual(deletedmessage_filters.hex_colour(Colour.GREEN), "#00FF00")
-        self.assertEqual(deletedmessage_filters.hex_colour(Colour.RED), "#FF0000")
-        self.assertEqual(deletedmessage_filters.hex_colour(Colour.WHITE), "#FFFFFF")
+        """The filter should produce the correct hex values from the integer representations."""
+        test_values = (
+            (Colour.BLUE, "#0000FF"),
+            (Colour.GREEN, "#00FF00"),
+            (Colour.RED, "#FF0000"),
+            (Colour.WHITE, "#FFFFFF"),
+
+            # Since we're using a "Discord dark theme"-like front-end, show black text as white.
+            (Colour.BLACK, "#FFFFFF"),
+        )
+
+        for colour, hex_value in test_values:
+            with self.subTest(colour=colour, hex_value=hex_value):
+                self.assertEqual(deletedmessage_filters.hex_colour(colour), hex_value)
 
     def test_footer_datetime_filter(self):
+        """The filter should parse the ISO-datetime string and return a timezone-aware datetime."""
         datetime_aware = timezone.now()
         iso_string = datetime_aware.isoformat()
 
         datetime_returned = deletedmessage_filters.footer_datetime(iso_string)
         self.assertTrue(timezone.is_aware(datetime_returned))
         self.assertEqual(datetime_aware, datetime_returned)
+
+    def test_visual_newlines_filter(self):
+        """The filter should replace newline characters by newline character and html linebreak."""
+        html_br = " <span class='has-text-grey'>↵</span><br>"
+
+        test_values = (
+            (
+                "Hello, this line does not contain a linebreak",
+                "Hello, this line does not contain a linebreak"
+            ),
+            (
+                "A single linebreak\nin a string",
+                f"A single linebreak{html_br}in a string"
+            ),
+            (
+                "Consecutive linebreaks\n\n\nwork, too",
+                f"Consecutive linebreaks{html_br}{html_br}{html_br}work, too"
+            )
+        )
+
+        for input_, expected_output in test_values:
+            with self.subTest(input=input_, expected_output=expected_output):
+                self.assertEqual(deletedmessage_filters.visible_newlines(input_), expected_output)
diff --git a/pydis_site/static/css/staff/logs.css b/pydis_site/static/css/staff/logs.css
index d7bb04cf..acf4f1f7 100644
--- a/pydis_site/static/css/staff/logs.css
+++ b/pydis_site/static/css/staff/logs.css
@@ -39,7 +39,6 @@ main.site-content {
 }
 
 .discord-message-metadata {
-    color: hsla(0, 0%, 100%, .2);
     font-size: 0.75rem;
     font-weight: 400;
     margin: 0 .3rem;
diff --git a/pydis_site/templates/staff/logs.html b/pydis_site/templates/staff/logs.html
index a0bfa2a7..8c92836a 100644
--- a/pydis_site/templates/staff/logs.html
+++ b/pydis_site/templates/staff/logs.html
@@ -19,10 +19,10 @@
             <div class="discord-message-header">
                 <span class="discord-username"
                       style="color: {{ message.author.top_role.colour | hex_colour }}">{{ message.author }}</span><span
-                    class="discord-message-metadata">{{ message.timestamp }} | User ID: {{ message.author.id }}</span>
+                    class="discord-message-metadata has-text-grey">{{ message.timestamp }} | User ID: {{ message.author.id }}</span>
             </div>
             <div class="discord-message-content">
-                {{ message.content|linebreaks }}
+                {{ message.content | escape | visible_newlines | safe }}
             </div>
             <div class="discord-message-attachments">
                 {% for attachment in message.attachments %}