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
2023-05-11 01:33:35 +02:00 · 2023-05-11 01:33:35 +02:00 · a48575e047
parent a8897a942d
commit a48575e047
17 changed files with 322 additions and 22 deletions
--- a/README.md
+++ b/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
--- a/admin_interface/admin.py
+++ b/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",),
+            },
        ),
    )

--- a/admin_interface/locale/de/LC_MESSAGES/django.po
+++ b/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"
--- a/admin_interface/locale/es/LC_MESSAGES/django.po
+++ b/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 ""
--- a/admin_interface/locale/fa/LC_MESSAGES/django.po
+++ b/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 ""
--- a/admin_interface/locale/fr/LC_MESSAGES/django.po
+++ b/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)"
--- a/admin_interface/locale/it/LC_MESSAGES/django.po
+++ b/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 ""
--- a/admin_interface/locale/pl/LC_MESSAGES/django.po
+++ b/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 ""
--- a/admin_interface/locale/pt_BR/LC_MESSAGES/django.po
+++ b/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"
--- a/admin_interface/locale/tr/LC_MESSAGES/django.po
+++ b/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 ""
--- a/admin_interface/migrations/0030_theme_collapsible_stacked_inlines_and_more.py
+++ b/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",
+            ),
+        ),
+    ]
--- a/admin_interface/models.py
+++ b/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"),
--- a/admin_interface/static/admin_interface/collapsible-inlines/collapsible-inlines.js
+++ b/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);
+}
--- a/admin_interface/static/admin_interface/css/admin-interface-fix.css
+++ b/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;
--- a/admin_interface/static/admin_interface/css/admin-interface.css
+++ b/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 {
-    color: var(--admin-interface-module-link-color);
-}
-
-.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 {
+.admin-interface fieldset.collapse a.collapse-toggle,
+.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 {
    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);
 }

--- a/admin_interface/templates/admin/base_site.html
+++ b/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 %}
--- a/admin_interface/templates/admin_interface/collapsible-inlines.html
+++ b/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 %}