Make collapsible fieldset look like original UI

This is an alternative for django#17910, with a UI that looks more like the original Django.
MHLut · Apr 29, 2024 · 5a56720 · 5a56720
1 parent c884f36
commit 5a56720
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 17 deletions.
diff --git a/django/contrib/admin/helpers.py b/django/contrib/admin/helpers.py
@@ -1,4 +1,5 @@
 import json
+import random
 
 from django import forms
 from django.contrib.admin.utils import (
@@ -21,6 +22,7 @@
 from django.utils.functional import cached_property
 from django.utils.html import conditional_escape, format_html
 from django.utils.safestring import mark_safe
+from django.utils.text import slugify
 from django.utils.translation import gettext
 from django.utils.translation import gettext_lazy as _
 
@@ -119,6 +121,13 @@ def __init__(
     def media(self):
         return forms.Media()
 
+    @cached_property
+    def heading_id(self):
+        name = "fieldset"
+        if self.name:
+            name = slugify(self.name, allow_unicode=False)
+        return f"{name}-heading-{random.randint(1000, 9999)}"
+
     @cached_property
     def is_collapsible(self):
         if any([field in self.fields for field in self.form.errors]):

diff --git a/django/contrib/admin/static/admin/css/forms.css b/django/contrib/admin/static/admin/css/forms.css
@@ -83,7 +83,8 @@ fieldset legend {
     padding: 0;
 }
 
-fieldset h3 {
+fieldset :not(.inline-related) h3,
+:not(.inline-related) .collapse summary {
     border: 1px solid var(--header-bg);
     margin: 0;
     padding: 8px;
@@ -228,15 +229,18 @@ form div.help ul {
 
 /* COLLAPSIBLE FIELDSETS */
 
-.collapse details {
-    border: 1px solid var(--hairline-color);
-    border-top: none;
-    font-size: 0.8125rem;
-    padding: 10px;
+.collapse details h3,
+.collapse details h4 {
+    background: transparent;
+    border: none;
+    color: currentColor;
+    display: inline;
+    margin: 0;
+    padding: 0;
 }
 
-.collapse details[open] summary {
-    padding-bottom: 10px;
+.collapse details .description {
+    padding-top: 10px;
 }
 
 .collapse .form-row:last-child {
@@ -392,7 +396,8 @@ body.popup .submit-row {
     position: relative;
 }
 
-.inline-related h3 {
+.inline-related h4,
+.inline-related .collapse summary {
     margin: 0;
     color: var(--body-quiet-color);
     padding: 5px;

diff --git a/django/contrib/admin/templates/admin/change_form.html b/django/contrib/admin/templates/admin/change_form.html
@@ -47,7 +47,7 @@
 
 {% block field_sets %}
 {% for fieldset in adminform %}
-  {% include "admin/includes/fieldset.html" %}
+  {% include "admin/includes/fieldset.html" with heading_level=3 %}
 {% endfor %}
 {% endblock %}
 

diff --git a/django/contrib/admin/templates/admin/edit_inline/stacked.html b/django/contrib/admin/templates/admin/edit_inline/stacked.html
@@ -23,7 +23,7 @@ <h3><b>{{ inline_admin_formset.opts.verbose_name|capfirst }}:</b> <span class="i
   </h3>
   {% if inline_admin_form.form.non_field_errors %}{{ inline_admin_form.form.non_field_errors }}{% endif %}
   {% for fieldset in inline_admin_form %}
-    {% include "admin/includes/fieldset.html" %}
+    {% include "admin/includes/fieldset.html" with heading_level=4 %}
   {% endfor %}
   {% if inline_admin_form.needs_explicit_pk_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
   {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}

diff --git a/django/contrib/admin/templates/admin/includes/fieldset.html b/django/contrib/admin/templates/admin/includes/fieldset.html
@@ -1,10 +1,11 @@
 {% load i18n %}
-<fieldset class="module aligned {{ fieldset.classes }}">
+<fieldset class="module aligned {{ fieldset.classes }}" {% if fieldset.name %}aria-labelledby="{{ fieldset.heading_id }}"{% endif %}>
     {% if fieldset.name %}
-        <legend><h3>{{ fieldset.name }}</h3></legend>
-    {% endif %}
-    {% if fieldset.is_collapsible %}
-        <details><summary>{% translate "Fields" context "form fields" %}</summary>
+        {% if fieldset.is_collapsible %}
+            <details><summary><h{{ heading_level|default:3 }} id="{{ fieldset.heading_id }}">{{ fieldset.name }}</h{{ heading_level|default:3 }}></summary>
+        {% else %}
+            <h{{ heading_level|default:3 }} id="{{ fieldset.heading_id }}">{{ fieldset.name }}</h{{ heading_level|default:3 }}>
+        {% endif %}
     {% endif %}
     {% if fieldset.description %}
         <div class="description">{{ fieldset.description|safe }}</div>
@@ -37,7 +38,7 @@
             {% if not line.fields|length == 1 %}</div>{% endif %}
         </div>
     {% endfor %}
-    {% if fieldset.is_collapsible %}
+    {% if fieldset.is_collapsible and fieldset.name %}
         </details>
     {% endif %}
 </fieldset>