Add option for adding custom CSS

sissbruecker · Mar 16, 2024 · fb74aa6 · fb74aa6
1 parent 39782e7
commit fb74aa6
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 2 deletions.
diff --git a/bookmarks/models.py b/bookmarks/models.py
@@ -331,6 +331,7 @@ class UserProfile(models.Model):
     enable_favicons = models.BooleanField(default=False, null=False)
     display_url = models.BooleanField(default=False, null=False)
     permanent_notes = models.BooleanField(default=False, null=False)
+    custom_css = models.TextField(blank=True, null=False)
     search_preferences = models.JSONField(default=dict, null=False)
 
 
@@ -348,6 +349,7 @@ class Meta:
             "enable_favicons",
             "display_url",
             "permanent_notes",
+            "custom_css",
         ]
 
 

diff --git a/bookmarks/styles/settings.scss b/bookmarks/styles/settings.scss
@@ -7,6 +7,10 @@
     }
   }
 
+  textarea.custom-css {
+    font-family: monospace;
+  }
+
   .input-group > input[type=submit] {
     height: auto;
   }

diff --git a/bookmarks/templates/bookmarks/layout.html b/bookmarks/templates/bookmarks/layout.html
@@ -34,6 +34,9 @@
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#161822">
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="#5856e0">
   {% endif %}
+  {% if request.user_profile.custom_css %}
+    <style>{{ request.user_profile.custom_css }}</style>
+  {% endif %}
 </head>
 <body ld-global-shortcuts>
 

diff --git a/bookmarks/templates/settings/general.html b/bookmarks/templates/settings/general.html
@@ -124,6 +124,18 @@ <h2>Profile</h2>
               href="{% url 'bookmarks:shared' %}">shared bookmarks page</a>.
           </div>
         </div>
+      <div class="form-group">
+        <details {% if form.custom_css.value %}open{% endif %}>
+          <summary>Custom CSS</summary>
+          <label for="{{ form.custom_css.id_for_label }}" class="text-assistive">Custom CSS</label>
+          <div class="mt-2">
+            {{ form.custom_css|add_class:"form-input custom-css"|attr:"rows:6" }}
+          </div>
+        </details>
+        <div class="form-input-hint">
+          Allows to add custom CSS to the page.
+        </div>
+      </div>
         <div class="form-group">
           <input type="submit" name="update_profile" value="Save" class="btn btn-primary mt-2">
           {% if update_profile_success_message %}

diff --git a/bookmarks/tests/test_custom_css.py b/bookmarks/tests/test_custom_css.py
@@ -0,0 +1,21 @@
+from django.test import TestCase
+from django.urls import reverse
+
+from bookmarks.tests.helpers import BookmarkFactoryMixin
+
+
+class CustomCssTestCase(TestCase, BookmarkFactoryMixin):
+    def setUp(self):
+        self.client.force_login(self.get_or_create_test_user())
+
+    def test_does_not_render_custom_style_tag_by_default(self):
+        response = self.client.get(reverse("bookmarks:index"))
+        self.assertNotContains(response, "<style>")
+
+    def test_renders_custom_style_tag_if_user_has_custom_css(self):
+        profile = self.get_or_create_test_user().profile
+        profile.custom_css = "body { background-color: red; }"
+        profile.save()
+
+        response = self.client.get(reverse("bookmarks:index"))
+        self.assertContains(response, "<style>body { background-color: red; }</style>")
diff --git a/bookmarks/tests/test_settings_general_view.py b/bookmarks/tests/test_settings_general_view.py
@@ -32,6 +32,7 @@ def create_profile_form_data(self, overrides=None):
             "tag_search": UserProfile.TAG_SEARCH_STRICT,
             "display_url": False,
             "permanent_notes": False,
+            "custom_css": "",
         }
 
         return {**form_data, **overrides}
@@ -63,6 +64,7 @@ def test_update_profile(self):
             "tag_search": UserProfile.TAG_SEARCH_LAX,
             "display_url": True,
             "permanent_notes": True,
+            "custom_css": "body { background-color: #000; }",
         }
         response = self.client.post(reverse("bookmarks:settings.general"), form_data)
         html = response.content.decode()
@@ -93,6 +95,7 @@ def test_update_profile(self):
         self.assertEqual(
             self.user.profile.permanent_notes, form_data["permanent_notes"]
         )
+        self.assertEqual(self.user.profile.custom_css, form_data["custom_css"])
         self.assertInHTML(
             """
                 <p class="form-input-hint">Profile updated</p>

diff --git a/siteroot/settings/base.py b/siteroot/settings/base.py
@@ -131,8 +131,6 @@
 
 # Turn off SASS compilation by default
 SASS_PROCESSOR_ENABLED = False
-# Location where generated CSS files are saved
-SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, "bookmarks", "static")
 
 # Add SASS preprocessor finder to resolve generated CSS
 STATICFILES_FINDERS = [