[#2030] Add option to upload custom fonts

src/open_inwoner/configurations/admin.py

@@ -25,7 +25,7 @@
 from ..utils.css import ALLOWED_PROPERTIES
 from ..utils.fields import CSSEditorWidget
 from ..utils.iteration import split
-from .models import SiteConfiguration, SiteConfigurationPage
+from .models import CustomFontSet, SiteConfiguration, SiteConfigurationPage
 
 
 @admin.action(description=_("Delete selected websites"))
@@ -60,6 +60,9 @@ def delete_model(self, request, obj):
         else:
             super().delete_model(request, obj)
 
+    class Media:
+        css = {"all": ("css/admin/admin_overrides.css",)}
+
 
 # re-register `Site` with our CustomSiteAdmin
 admin.site.unregister(Site)
@@ -82,6 +85,13 @@ class SiteConfigurationPageInline(OrderedTabularInline):
     autocomplete_fields = ("flatpage",)
 
 
+class FontConfigurationInline(admin.StackedInline):
+    model = CustomFontSet
+    verbose_name = "Fonts"
+    min_num = 1
+    can_delete = False
+
+
 class SiteConfigurationAdminForm(forms.ModelForm):
     class Meta:
         model = SiteConfiguration
@@ -284,7 +294,7 @@ class SiteConfigurationAdmin(OrderedInlineModelAdminMixin, SingletonModelAdmin):
         ),
         (_("Social media"), {"fields": ("display_social",)}),
     )
-    inlines = [SiteConfigurationPageInline]
+    inlines = [SiteConfigurationPageInline, FontConfigurationInline]
     form = SiteConfigurationAdminForm
 
     readonly_fields = [

src/open_inwoner/configurations/choices.py

@@ -10,3 +10,8 @@ class ColorTypeChoices(models.TextChoices):
 class OpenIDDisplayChoices(models.TextChoices):
     admin = "admin", _("Admin")
     regular = "regular", _("Regular user")
+
+
+class CustomFontName(models.TextChoices):
+    body = _("text_body_font"), _("Text body font")
+    heading = _("heading_font"), _("Heading font")

src/open_inwoner/configurations/constants.py

@@ -0,0 +1,7 @@
+from django.db import models
+from django.utils.translation import ugettext_lazy as _
+
+
+class FontFileName(models.TextChoices):
+    body = _("text_body_font"), _("Text body font")
+    heading = _("heading_font"), _("Heading font")

src/open_inwoner/configurations/migrations/0058_customfontset.py

@@ -0,0 +1,69 @@
+# Generated by Django 3.2.23 on 2024-01-29 10:45
+
+import django.core.validators
+import django.db.models.deletion
+from django.db import migrations, models
+
+import open_inwoner.configurations.models
+import open_inwoner.utils.files
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("configurations", "0057_siteconfiguration_theme_stylesheet"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="CustomFontSet",
+            fields=[
+                (
+                    "id",
+                    models.AutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                (
+                    "text_body_font",
+                    open_inwoner.configurations.models.CustomFontField(
+                        blank=True,
+                        help_text="Upload text body font. TTF font types only.",
+                        null=True,
+                        storage=open_inwoner.utils.files.OverwriteStorage(),
+                        upload_to=open_inwoner.configurations.models.CustomFontSet.update_filename_body,
+                        validators=[
+                            django.core.validators.FileExtensionValidator(["ttf"])
+                        ],
+                        verbose_name="Text body font",
+                    ),
+                ),
+                (
+                    "heading_font",
+                    open_inwoner.configurations.models.CustomFontField(
+                        blank=True,
+                        help_text="Upload heading font. TTF font types only.",
+                        null=True,
+                        storage=open_inwoner.utils.files.OverwriteStorage(),
+                        upload_to=open_inwoner.configurations.models.CustomFontSet.update_filename_heading,
+                        validators=[
+                            django.core.validators.FileExtensionValidator(["ttf"])
+                        ],
+                        verbose_name="Heading font",
+                    ),
+                ),
+                (
+                    "site_configuration",
+                    models.OneToOneField(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="custom_fonts",
+                        to="configurations.siteconfiguration",
+                        verbose_name="Configuration",
+                    ),
+                ),
+            ],
+        ),
+    ]

src/open_inwoner/configurations/migrations/0059_merge_20240129_1645.py

@@ -0,0 +1,13 @@
+# Generated by Django 3.2.23 on 2024-01-29 15:45
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("configurations", "0058_customfontset"),
+        ("configurations", "0058_siteconfiguration_recipients_email_digest"),
+    ]
+
+    operations = []

src/open_inwoner/configurations/models.py

@@ -1,22 +1,26 @@
+import os
 from typing import Optional
 
+from django.conf import settings
 from django.contrib.flatpages.models import FlatPage
 from django.core.validators import FileExtensionValidator
 from django.db import models
+from django.db.models.signals import post_save
+from django.dispatch import receiver
 from django.utils.translation import ugettext_lazy as _
 
 from colorfield.fields import ColorField
 from django_better_admin_arrayfield.models.fields import ArrayField
-from filer.fields.file import FilerFileField
 from filer.fields.image import FilerImageField
 from ordered_model.models import OrderedModel, OrderedModelManager
 from solo.models import SingletonModel
 
 from ..utils.colors import hex_to_hsl
 from ..utils.css import clean_stylesheet
 from ..utils.fields import CSSField
+from ..utils.files import OverwriteStorage
 from ..utils.validators import FilerExactImageSizeValidator
-from .choices import ColorTypeChoices, OpenIDDisplayChoices
+from .choices import ColorTypeChoices, CustomFontName, OpenIDDisplayChoices
 from .validators import validate_oidc_config
 
 
@@ -594,6 +598,77 @@ def get_help_text(self, request) -> Optional[str]:
             return ""
 
 
+class CustomFontField(models.FileField):
+    def __init__(self, file_name: str = "", **kwargs):
+        self.file_name = file_name
+        super().__init__(**kwargs)
+
+
+class CustomFontSet(models.Model):
+    def update_filename(self, filename: str, new_name: str, path: str) -> str:
+        ext = filename.split(".")[1]
+        filename = f"{new_name}.{ext}"
+        return "{path}/{filename}".format(path=path, filename=filename)
+
+    def update_filename_body(self, filename: str) -> str:
+        return CustomFontSet.update_filename(
+            self,
+            filename,
+            new_name=CustomFontName.body,
+            path="custom_fonts/",
+        )
+
+    def update_filename_heading(self, filename: str) -> str:
+        return CustomFontSet.update_filename(
+            self,
+            filename,
+            new_name=CustomFontName.heading,
+            path="custom_fonts/",
+        )
+
+    site_configuration = models.OneToOneField(
+        SiteConfiguration,
+        verbose_name=_("Configuration"),
+        related_name="custom_fonts",
+        on_delete=models.CASCADE,
+    )
+    text_body_font = CustomFontField(
+        verbose_name=_("Text body font"),
+        upload_to=update_filename_body,
+        file_name=CustomFontName.body,
+        storage=OverwriteStorage(),
+        validators=[FileExtensionValidator(["ttf"])],
+        blank=True,
+        null=True,
+        help_text=_("Upload text body font. TTF font types only."),
+    )
+    heading_font = CustomFontField(
+        verbose_name=_("Heading font"),
+        upload_to=update_filename_heading,
+        file_name=CustomFontName.heading,
+        storage=OverwriteStorage(),
+        validators=[FileExtensionValidator(["ttf"])],
+        blank=True,
+        null=True,
+        help_text=_("Upload heading font. TTF font types only."),
+    )
+
+
+@receiver(post_save, sender=CustomFontSet)
+def remove_orphan_files(sender, instance, *args, **kwargs):
+    """
+    Remove font files corresponding to `CustomFont` fields that have been cleared
+    """
+    custom_fonts_dir = os.path.join(settings.MEDIA_ROOT, "custom_fonts")
+    font_names = os.listdir(custom_fonts_dir)
+
+    for field in sender._meta.concrete_fields:
+        if isinstance(field, models.FileField) and not getattr(instance, field.name):
+            for font_name in font_names:
+                if font_name.startswith(field.file_name):
+                    os.remove(os.path.join(custom_fonts_dir, font_name))
+
+
 class SiteConfigurationPage(OrderedModel):
     configuration = models.ForeignKey(
         SiteConfiguration,

src/open_inwoner/configurations/tests/test_upload.py

@@ -0,0 +1,71 @@
+from django.urls import reverse
+
+from django_webtest import WebTest
+from webtest import Upload
+
+from open_inwoner.accounts.tests.factories import UserFactory
+
+from ...utils.test import ClearCachesMixin
+from ..models import CustomFontSet, SiteConfiguration
+
+
+class CustomFontsTest(ClearCachesMixin, WebTest):
+    def setUp(self):
+        self.user = UserFactory(is_superuser=True, is_staff=True)
+
+        self.config = SiteConfiguration.get_solo()
+        self.config.custom_fonts = CustomFontSet()
+        self.config.save()
+
+        self.form = self.app.get(
+            reverse("admin:configurations_siteconfiguration_change"), user=self.user
+        ).forms["siteconfiguration_form"]
+
+    def test_upload_font_correct_filetype(self):
+        font_file = Upload("valid.ttf", b"content", content_type="font/ttf")
+        self.form["name"] = "Test"
+        self.form["custom_fonts-0-text_body_font"] = font_file
+        self.form["custom_fonts-0-heading_font"] = font_file
+
+        self.form.submit()
+
+        custom_font_set = CustomFontSet.objects.first()
+        body_font = custom_font_set.text_body_font
+        heading_font = custom_font_set.heading_font
+
+        self.assertEqual(body_font.name, "custom_fonts/text_body_font.ttf")
+        self.assertEqual(heading_font.name, "custom_fonts/heading_font.ttf")
+
+        # test file overwrite: upload again
+        another_font_file = Upload(
+            "valid_encore.ttf", b"content", content_type="font/ttf"
+        )
+        self.form["custom_fonts-0-text_body_font"] = another_font_file
+        self.form["custom_fonts-0-heading_font"] = another_font_file
+
+        self.form.submit()
+
+        self.assertEqual(len(CustomFontSet.objects.all()), 1)
+
+        custom_font_set = CustomFontSet.objects.first()
+        body_font = custom_font_set.text_body_font
+        heading_font = custom_font_set.heading_font
+
+        self.assertEqual(body_font.name, "custom_fonts/text_body_font.ttf")
+        self.assertEqual(heading_font.name, "custom_fonts/heading_font.ttf")
+
+    def test_upload_font_incorrect_filetype(self):
+        font_file = Upload("invalid.svg", b"content", content_type="font/svg")
+        self.form["name"] = "Test"
+        self.form["custom_fonts-0-text_body_font"] = font_file
+
+        response = self.form.submit()
+
+        self.assertEquals(
+            response.context["errors"],
+            [
+                [
+                    "Bestandsextensie ‘svg’ is niet toegestaan. Toegestane extensies zijn: ‘ttf’."
+                ]
+            ],
+        )

src/open_inwoner/scss/admin/admin_overrides.scss

@@ -6,3 +6,8 @@
 @import './app_overrides';
 @import './ck_editor';
 @import '../components/Map/Map.scss';
+
+// hide title from admin.StackedInline
+.inline-related > h3 {
+  display: none;
+}

src/open_inwoner/scss/components/Header/AnchorMenu.scss

@@ -7,6 +7,8 @@
 .h6 {
   scroll-margin-top: 122px;
 
+  font-family: var(--font-family-heading);
+
   @media (min-width: 768px) {
     scroll-margin-top: var(--spacing-medium);
   }

src/open_inwoner/scss/views/App.scss

@@ -253,41 +253,53 @@
   --form-width: 500px;
 }
 
+@font-face {
+  font-family: 'Heading';
+  src: url('/media/custom_fonts/heading_font.ttf') format('truetype'),
+    url('/static/fonts/ubuntu/Ubuntu-M.ttf') format('truetype');
+}
+
 @font-face {
   font-family: 'Heading';
   font-weight: bold;
-  src: url('/static/fonts/ubuntu/Ubuntu-M.ttf') format('truetype');
+  src: url('/media/custom_fonts/heading_font.ttf') format('truetype'),
+    url('/static/fonts/ubuntu/Ubuntu-M.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Heading';
   font-weight: bold;
   font-style: italic;
-  src: url('/static/fonts/ubuntu/Ubuntu-MI.ttf') format('truetype');
+  src: url('/media/custom_fonts/heading_font.ttf') format('truetype'),
+    url('/static/fonts/ubuntu/Ubuntu-MI.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Body';
-  src: url('/static/fonts/lato/Lato-Regular.ttf') format('truetype');
+  src: url('/media/custom_fonts/text_body_font.ttf') format('truetype'),
+    url('/static/fonts/lato/Lato-Regular.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Body';
   font-weight: bold;
-  src: url('/static/fonts/lato/Lato-Bold.ttf') format('truetype');
+  src: url('/media/custom_fonts/heading_font.ttf') format('truetype'),
+    url('/static/fonts/lato/Lato-Bold.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Body';
   font-style: italic;
-  src: url('/static/fonts/lato/Lato-Italic.ttf') format('truetype');
+  src: url('/media/custom_fonts/heading_font.ttf') format('truetype'),
+    url('/static/fonts/lato/Lato-Italic.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Body';
   font-weight: bold;
   font-style: italic;
-  src: url('/static/fonts/lato/Lato-BoldItalic.ttf') format('truetype');
+  src: url('/media/custom_fonts/heading_font.ttf') format('truetype'),
+    url('/static/fonts/lato/Lato-BoldItalic.ttf') format('truetype');
 }
 
 @font-face {