Add collapsible inlines support. (#282)

* Improve code formatting.

* Add collapsible inlines frontend support.

* Add collapsible inlines options fields to model and admin.

* Add option classes to body.

* Update translations.

* Update README.md

README.md

@@ -27,6 +27,7 @@ django-admin-interface is a modern **responsive flat admin interface customizabl
 - Language chooser
 - Foldable apps *(accordions in the navigation bar)*
 - [Collapsible fieldsets](https://docs.djangoproject.com/en/4.0/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets) can have their initial state expanded instead of collapsed
+- `NEW` Collapsible inlines
 - `NEW` Tabbed fieldsets and inlines
 - `NEW` List filter removal links
 - `NEW` List filter highlight selected options

admin_interface/admin.py

@@ -133,7 +133,13 @@ class ThemeAdmin(admin.ModelAdmin):
                 ),
             },
         ),
-        (_("Navigation Bar"), {"classes": ("wide",), "fields": ("foldable_apps",)}),
+        (
+            _("Navigation Bar"),
+            {
+                "classes": ("wide",),
+                "fields": ("foldable_apps",),
+            },
+        ),
         (
             _("Related Modal"),
             {
@@ -179,9 +185,24 @@ class ThemeAdmin(admin.ModelAdmin):
                 ),
             },
         ),
+        (
+            _("Inlines"),
+            {
+                "classes": ("wide",),
+                "fields": (
+                    "collapsible_stacked_inlines",
+                    "collapsible_stacked_inlines_collapsed",
+                    "collapsible_tabular_inlines",
+                    "collapsible_tabular_inlines_collapsed",
+                ),
+            },
+        ),
         (
             _("Recent Actions"),
-            {"classes": ("wide",), "fields": ("recent_actions_visible",)},
+            {
+                "classes": ("wide",),
+                "fields": ("recent_actions_visible",),
+            },
         ),
     )
 

admin_interface/locale/de/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-04-18 11:06-0500\n"
+"POT-Creation-Date: 2023-05-10 18:20-0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -78,6 +78,10 @@ msgstr "Filteranzeige"
 msgid "Change Form"
 msgstr "Änderungsformular"
 
+#: admin_interface/admin.py
+msgid "Inlines"
+msgstr ""
+
 #: admin_interface/admin.py
 msgid "Recent Actions"
 msgstr "Neueste Aktionen"
@@ -241,6 +245,22 @@ msgstr "Fieldsets als Tabs"
 msgid "inlines as tabs"
 msgstr "Inlines als Tabs"
 
+#: admin_interface/models.py
+msgid "collapsible stacked inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible stacked inlines collapsed"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines collapsed"
+msgstr ""
+
 #: admin_interface/models.py
 msgid "sticky submit"
 msgstr "angeheftete Schaltfläche"

admin_interface/locale/es/LC_MESSAGES/django.po

@@ -9,7 +9,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: django-admin-interface\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-04-18 11:06-0500\n"
+"POT-Creation-Date: 2023-05-10 18:20-0500\n"
 "PO-Revision-Date: 2018-12-30 19:13-0500\n"
 "Last-Translator: Martin Vuelta <martin.vuelta@softbutterfly.io>\n"
 "Language-Team: Spanish <dev@softbutterfly.io>\n"
@@ -79,6 +79,10 @@ msgstr "Lista de filtros"
 msgid "Change Form"
 msgstr ""
 
+#: admin_interface/admin.py
+msgid "Inlines"
+msgstr ""
+
 #: admin_interface/admin.py
 msgid "Recent Actions"
 msgstr "Acciones recientes"
@@ -245,6 +249,22 @@ msgstr ""
 msgid "inlines as tabs"
 msgstr ""
 
+#: admin_interface/models.py
+msgid "collapsible stacked inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible stacked inlines collapsed"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines collapsed"
+msgstr ""
+
 #: admin_interface/models.py
 msgid "sticky submit"
 msgstr ""

admin_interface/locale/fa/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: django-admin-interface\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-04-18 11:06-0500\n"
+"POT-Creation-Date: 2023-05-10 18:20-0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: Amir Ajorloo <amirajorloo@gmail.com>\n"
 "Language-Team: Farsi <LL@li.org>\n"
@@ -77,6 +77,10 @@ msgstr "فیلترهای لیست"
 msgid "Change Form"
 msgstr ""
 
+#: admin_interface/admin.py
+msgid "Inlines"
+msgstr ""
+
 #: admin_interface/admin.py
 msgid "Recent Actions"
 msgstr "فعالیتهای اخیر"
@@ -244,6 +248,22 @@ msgstr ""
 msgid "inlines as tabs"
 msgstr ""
 
+#: admin_interface/models.py
+msgid "collapsible stacked inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible stacked inlines collapsed"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines collapsed"
+msgstr ""
+
 #: admin_interface/models.py
 msgid "sticky submit"
 msgstr ""

admin_interface/locale/fr/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-04-18 11:06-0500\n"
+"POT-Creation-Date: 2023-05-10 18:20-0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -78,6 +78,10 @@ msgstr "Filtre de liste"
 msgid "Change Form"
 msgstr ""
 
+#: admin_interface/admin.py
+msgid "Inlines"
+msgstr ""
+
 #: admin_interface/admin.py
 msgid "Recent Actions"
 msgstr "Actions récentes"
@@ -243,6 +247,22 @@ msgstr ""
 msgid "inlines as tabs"
 msgstr ""
 
+#: admin_interface/models.py
+msgid "collapsible stacked inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible stacked inlines collapsed"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines collapsed"
+msgstr ""
+
 #: admin_interface/models.py
 msgid "sticky submit"
 msgstr "envoi adhérent (sticky)"

admin_interface/locale/it/LC_MESSAGES/django.po

@@ -9,7 +9,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: django-admin-interface\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-04-18 11:06-0500\n"
+"POT-Creation-Date: 2023-05-10 18:20-0500\n"
 "PO-Revision-Date: 2018-12-30 19:13-0500\n"
 "Last-Translator: Fabio Caccamo <fabio.caccamo@gmail.com>\n"
 "Language-Team: Italian <LL@li.org>\n"
@@ -79,6 +79,10 @@ msgstr "Filtro listato"
 msgid "Change Form"
 msgstr ""
 
+#: admin_interface/admin.py
+msgid "Inlines"
+msgstr ""
+
 #: admin_interface/admin.py
 msgid "Recent Actions"
 msgstr "Azioni recenti"
@@ -247,6 +251,22 @@ msgstr ""
 msgid "inlines as tabs"
 msgstr ""
 
+#: admin_interface/models.py
+msgid "collapsible stacked inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible stacked inlines collapsed"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines collapsed"
+msgstr ""
+
 #: admin_interface/models.py
 msgid "sticky submit"
 msgstr ""

admin_interface/locale/pl/LC_MESSAGES/django.po

@@ -9,7 +9,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: django-admin-interface\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-04-18 11:06-0500\n"
+"POT-Creation-Date: 2023-05-10 18:20-0500\n"
 "PO-Revision-Date: 2022-02-04 19:13-0500\n"
 "Last-Translator: Kamil Paduszyński <kpaduszy@gmail.com>\n"
 "Language-Team: Polish <LL@li.org>\n"
@@ -79,6 +79,10 @@ msgstr "Filtry"
 msgid "Change Form"
 msgstr ""
 
+#: admin_interface/admin.py
+msgid "Inlines"
+msgstr ""
+
 #: admin_interface/admin.py
 msgid "Recent Actions"
 msgstr "Ostatnie działania"
@@ -247,6 +251,22 @@ msgstr ""
 msgid "inlines as tabs"
 msgstr ""
 
+#: admin_interface/models.py
+msgid "collapsible stacked inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible stacked inlines collapsed"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines collapsed"
+msgstr ""
+
 #: admin_interface/models.py
 msgid "sticky submit"
 msgstr ""

admin_interface/locale/pt_BR/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-04-18 11:06-0500\n"
+"POT-Creation-Date: 2023-05-10 18:20-0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -78,6 +78,10 @@ msgstr "Filtro de lista"
 msgid "Change Form"
 msgstr ""
 
+#: admin_interface/admin.py
+msgid "Inlines"
+msgstr ""
+
 #: admin_interface/admin.py
 msgid "Recent Actions"
 msgstr "Ações recentes"
@@ -244,6 +248,22 @@ msgstr ""
 msgid "inlines as tabs"
 msgstr ""
 
+#: admin_interface/models.py
+msgid "collapsible stacked inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible stacked inlines collapsed"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines collapsed"
+msgstr ""
+
 #: admin_interface/models.py
 msgid "sticky submit"
 msgstr "envio fixo"

admin_interface/locale/tr/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: django-admin-interface\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-04-18 11:06-0500\n"
+"POT-Creation-Date: 2023-05-10 18:20-0500\n"
 "PO-Revision-Date: 2020-01-29 04:53+0300\n"
 "Last-Translator: Ishak Okutan <ishak.oktn@gmail.com>\n"
 "Language-Team: \n"
@@ -79,6 +79,10 @@ msgstr "Liste Filtresi"
 msgid "Change Form"
 msgstr ""
 
+#: admin_interface/admin.py
+msgid "Inlines"
+msgstr ""
+
 #: admin_interface/admin.py
 msgid "Recent Actions"
 msgstr "Son İşlemler"
@@ -249,6 +253,22 @@ msgstr ""
 msgid "inlines as tabs"
 msgstr ""
 
+#: admin_interface/models.py
+msgid "collapsible stacked inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible stacked inlines collapsed"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines"
+msgstr ""
+
+#: admin_interface/models.py
+msgid "collapsible tabular inlines collapsed"
+msgstr ""
+
 #: admin_interface/models.py
 msgid "sticky submit"
 msgstr ""

admin_interface/migrations/0030_theme_collapsible_stacked_inlines_and_more.py

@@ -0,0 +1,42 @@
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("admin_interface", "0029_theme_css_generic_link_active_color"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="theme",
+            name="collapsible_stacked_inlines",
+            field=models.BooleanField(
+                default=False,
+                verbose_name="collapsible stacked inlines",
+            ),
+        ),
+        migrations.AddField(
+            model_name="theme",
+            name="collapsible_stacked_inlines_collapsed",
+            field=models.BooleanField(
+                default=True,
+                verbose_name="collapsible stacked inlines collapsed",
+            ),
+        ),
+        migrations.AddField(
+            model_name="theme",
+            name="collapsible_tabular_inlines",
+            field=models.BooleanField(
+                default=False,
+                verbose_name="collapsible tabular inlines",
+            ),
+        ),
+        migrations.AddField(
+            model_name="theme",
+            name="collapsible_tabular_inlines_collapsed",
+            field=models.BooleanField(
+                default=True,
+                verbose_name="collapsible tabular inlines collapsed",
+            ),
+        ),
+    ]

admin_interface/models.py

@@ -368,6 +368,23 @@ class Theme(models.Model):
         verbose_name=_("inlines as tabs"),
     )
 
+    collapsible_stacked_inlines = models.BooleanField(
+        default=False,
+        verbose_name=_("collapsible stacked inlines"),
+    )
+    collapsible_stacked_inlines_collapsed = models.BooleanField(
+        default=True,
+        verbose_name=_("collapsible stacked inlines collapsed"),
+    )
+    collapsible_tabular_inlines = models.BooleanField(
+        default=False,
+        verbose_name=_("collapsible tabular inlines"),
+    )
+    collapsible_tabular_inlines_collapsed = models.BooleanField(
+        default=True,
+        verbose_name=_("collapsible tabular inlines collapsed"),
+    )
+
     recent_actions_visible = models.BooleanField(
         default=True,
         verbose_name=_("visible"),

admin_interface/static/admin_interface/collapsible-inlines/collapsible-inlines.js

@@ -0,0 +1,45 @@
+/** global: django */
+
+if (typeof(django) !== 'undefined' && typeof(django.jQuery) !== 'undefined')
+{
+    (function($) {
+
+        $(document).ready(function(){
+
+            function collapsibleInline(scope, collapsed) {
+                var fieldsetCollapsed = collapsed;
+                var fieldsetEl = $(scope).find('> fieldset.module');
+                fieldsetEl.addClass('collapse');
+                var fieldsetHasErrors = (fieldsetEl.children('.errors').length > 0);
+                if (fieldsetHasErrors === true) {
+                    fieldsetCollapsed = false;
+                }
+                if (fieldsetCollapsed === true) {
+                    fieldsetEl.addClass('collapsed');
+                }
+                var collapseToggleText = (fieldsetCollapsed ? gettext('Show') : gettext('Hide'));
+                var collapseToggleHTML = ' (<a class="collapse-toggle" href="#">' + collapseToggleText + '</a>)';
+                var headerEl = fieldsetEl.find('> h2,> h3');
+                headerEl.append(collapseToggleHTML);
+            }
+
+            var stackedInlinesOptionSel = '.admin-interface.collapsible-stacked-inlines';
+            var stackedInlinesSel = stackedInlinesOptionSel + ' .inline-group[data-inline-type="stacked"]';
+            var stackedInlinesCollapsed = $(stackedInlinesOptionSel).hasClass('collapsible-stacked-inlines-collapsed');
+
+            var tabularInlinesOptionSel = '.admin-interface.collapsible-tabular-inlines';
+            var tabularInlinesSel = tabularInlinesOptionSel + ' .inline-group[data-inline-type="tabular"] .inline-related.tabular';
+            var tabularInlinesCollapsed = $(stackedInlinesOptionSel).hasClass('collapsible-tabular-inlines-collapsed');
+
+            $(stackedInlinesSel).each(function() {
+                collapsibleInline(this, stackedInlinesCollapsed);
+            });
+
+            $(tabularInlinesSel).each(function() {
+                collapsibleInline(this, tabularInlinesCollapsed);
+            });
+
+        });
+
+    })(django.jQuery);
+}

admin_interface/static/admin_interface/css/admin-interface-fix.css

@@ -121,7 +121,9 @@
 }
 
 .admin-interface fieldset.collapse.collapsed a.collapse-toggle,
-.admin-interface fieldset.collapse a.collapse-toggle {
+.admin-interface fieldset.collapse a.collapse-toggle,
+.admin-interface .inline-group .inline-related fieldset.module a.collapse-toggle,
+.admin-interface .inline-group .inline-related fieldset.module.collapsed a.collapse-toggle {
     font-weight: normal;
     text-transform: lowercase;
     font-size: 12px;

admin_interface/static/admin_interface/css/admin-interface.css

@@ -192,21 +192,21 @@
     color: var(--admin-interface-module-link-hover-color);
 }
 
-.admin-interface fieldset.collapse.collapsed a.collapse-toggle {
+.admin-interface fieldset.collapse a.collapse-toggle,
-    color: var(--admin-interface-module-link-color);
+.admin-interface fieldset.collapse.collapsed a.collapse-toggle,
-}
+.admin-interface .inline-group .inline-related fieldset.module a.collapse-toggle,
-
+.admin-interface .inline-group .inline-related fieldset.module.collapsed a.collapse-toggle {
-.admin-interface fieldset.collapse.collapsed a.collapse-toggle:hover,
-.admin-interface fieldset.collapse.collapsed a.collapse-toggle:active {
-    color: var(--admin-interface-module-link-hover-color);
-}
-
-.admin-interface fieldset.collapse a.collapse-toggle {
     color: var(--admin-interface-module-link-color);
 }
 
 .admin-interface fieldset.collapse a.collapse-toggle:hover,
-.admin-interface fieldset.collapse a.collapse-toggle:active {
+.admin-interface fieldset.collapse a.collapse-toggle:active,
+.admin-interface fieldset.collapse.collapsed a.collapse-toggle:hover,
+.admin-interface fieldset.collapse.collapsed a.collapse-toggle:active,
+.admin-interface .inline-group .inline-related fieldset.module a.collapse-toggle:hover,
+.admin-interface .inline-group .inline-related fieldset.module a.collapse-toggle:active,
+.admin-interface .inline-group .inline-related fieldset.module.collapsed a.collapse-toggle:hover,
+.admin-interface .inline-group .inline-related fieldset.module.collapsed a.collapse-toggle:active {
     color: var(--admin-interface-module-link-hover-color);
 }
 

admin_interface/templates/admin/base_site.html

@@ -135,6 +135,7 @@
 {% include "admin_interface/favicon.html" %}
 {% include "admin_interface/foldable-apps.html" %}
 {% include "admin_interface/related-modal.html" %}
+{% include "admin_interface/collapsible-inlines.html" %}
 {% endblock %}
 
 {% block extrahead %}
@@ -150,6 +151,12 @@ flat-theme admin-interface
 {% if theme.form_pagination_sticky %} sticky-pagination {% endif %}
 {% if theme.list_filter_highlight %} list-filter-highlight {% endif %}
 {% if theme.list_filter_sticky %} list-filter-sticky {% endif %}
+{% if theme.collapsible_stacked_inlines %} collapsible-stacked-inlines
+    {% if theme.collapsible_stacked_inlines_collapsed %} collapsible-stacked-inlines-collapsed {% endif %}
+{% endif %}
+{% if theme.collapsible_tabular_inlines %} collapsible-tabular-inlines
+    {% if theme.collapsible_tabular_inlines_collapsed %} collapsible-tabular-inlines-collapsed {% endif %}
+{% endif %}
 {% endblock %}
 
 {% block branding %}

admin_interface/templates/admin_interface/collapsible-inlines.html

@@ -0,0 +1,5 @@
+{% load static %}
+
+{% if theme.collapsible_stacked_inlines or theme.collapsible_tabular_inlines %}
+<script type="text/javascript" src="{% static 'admin_interface/collapsible-inlines/collapsible-inlines.js' %}?nocache={{ version_md5_cache }}"></script>
+{% endif %}