Added foldable apps support. #117

admin_interface/admin.py

@@ -100,6 +100,12 @@ class ThemeAdmin(admin.ModelAdmin):
                 'css_delete_button_text_color',
             )
         }),
+        (_('Navigation Bar'), {
+            'classes': ('wide', ),
+            'fields': (
+                'foldable_apps',
+            )
+        }),
         (_('Related Modal'), {
             'classes': ('wide', ),
             'fields': (

admin_interface/migrations/0023_theme_foldable_apps.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2 on 2021-11-23 16:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('admin_interface', '0022_add_logo_max_width_and_height'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='theme',
+            name='foldable_apps',
+            field=models.BooleanField(default=True, verbose_name='foldable apps'),
+        ),
+    ]

admin_interface/models.py

@@ -313,6 +313,10 @@ class Theme(models.Model):
         default=True,
         verbose_name=_('sticky position'))
 
+    foldable_apps = models.BooleanField(
+        default=True,
+        verbose_name=_('foldable apps'))
+
     recent_actions_visible = models.BooleanField(
         default=True,
         verbose_name=_('visible'))

admin_interface/static/admin_interface/foldable-apps/foldable-apps.css

@@ -0,0 +1,70 @@
+.admin-interface.foldable-apps [class^="app-"].module {
+    visibility: hidden;
+}
+
+.admin-interface.foldable-apps [class^="app-"].module.foldable-apps-ready {
+    visibility: visible;
+}
+
+.admin-interface.foldable-apps [class^="app-"].module > table > caption {
+    position: relative;
+    z-index: 0;
+    /* pointer-events: none; */
+    cursor: pointer;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none;   /* Safari */
+    -khtml-user-select: none;    /* Konqueror HTML */
+    -moz-user-select: none;      /* Firefox */
+    -ms-user-select: none;       /* Internet Explorer/Edge */
+    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
+}
+
+.admin-interface.foldable-apps [class^="app-"].module > table > caption > a {
+    display: inline-block;
+    /* pointer-events: all !important; */
+    margin-right: 30px;
+}
+
+.admin-interface.foldable-apps [class^="app-"].module > table > caption::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+    width: auto;
+    height: 100%;
+    content: "−";
+    font-size: 16px;
+    font-weight: lighter;
+    text-align: center;
+    padding-left: 10px;
+    padding-right: 10px;
+    cursor: pointer;
+    pointer-events: all !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+@media (min-width: 1024px) {
+    .admin-interface.foldable-apps [class^="app-"].module > table > caption::after {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+}
+
+.admin-interface.foldable-apps [class^="app-"].module > table {
+    display: table;
+    width: 100%;
+}
+
+.admin-interface.foldable-apps [class^="app-"].module.collapsed {
+    margin-bottom: 10px;
+}
+
+.admin-interface.foldable-apps [class^="app-"].module.collapsed > table > caption::after {
+    content: "+";
+}
+
+.admin-interface.foldable-apps [class^="app-"].module.collapsed > table > tbody {
+    display: none;
+}

admin_interface/static/admin_interface/foldable-apps/foldable-apps.js

@@ -0,0 +1,35 @@
+(function() {
+    window.onload = function() {
+        for (let moduleEl of document.querySelectorAll('.admin-interface.foldable-apps [class^="app-"].module')) {
+            // apply collapsed value from localstorage value
+            let moduleAppClass = null;
+            let moduleCollapsedClass = 'collapsed';
+            moduleEl.classList.forEach(function(className) {
+                if (className.startsWith('app-')) {
+                    moduleAppClass = className;
+                }
+            });
+            if (moduleAppClass) {
+                let moduleAppKey = 'admin-interface.foldable-apps_' + moduleAppClass + '_collapsed';
+                let moduleCollapsed = Boolean(parseInt((localStorage.getItem(moduleAppKey) || 0)) || 0);
+                if (moduleCollapsed === true) {
+                    moduleEl.classList.add(moduleCollapsedClass);
+                } else {
+                    moduleEl.classList.remove(moduleCollapsedClass);
+                }
+                // attach click for togggle collapsed class
+                for (let captionEl of moduleEl.querySelectorAll('caption')) {
+                    captionEl.onclick = function(event) {
+                        // only when not clicking on the app name link
+                        if (event.target.tagName.toLowerCase() === 'caption') {
+                            moduleEl.classList.toggle(moduleCollapsedClass);
+                            moduleCollapsed = moduleEl.classList.contains(moduleCollapsedClass);
+                            localStorage.setItem(moduleAppKey, (moduleCollapsed ? 1 : 0));
+                        }
+                    };
+                }
+            }
+            moduleEl.classList.add('foldable-apps-ready');
+        }
+    };
+})();

admin_interface/templates/admin/base_site.html

@@ -51,10 +51,11 @@ https://github.com/fabiocaccamo/django-admin-interface
 <link rel="stylesheet" type="text/css" href="{% static 'admin/css/responsive.css' %}?v={{ version }}">
 <link rel="stylesheet" type="text/css" href="{% static 'admin/css/responsive_rtl.css' %}?v={{ version }}" />
 {% include "admin_interface/favicon.html" %}
+{% include "admin_interface/foldable-apps.html" %}
 {% include "admin_interface/related-modal.html" %}
 {% endblock %}
 
-{% block bodyclass %}admin-interface flat-theme {% get_admin_interface_theme as theme %}{% if theme.name %}{{ theme.name|slugify }}-theme{% endif %}{% if theme.form_submit_sticky %} sticky-submit {% endif %}{% if theme.form_pagination_sticky %} sticky-pagination {% endif %}{% endblock %}
+{% block bodyclass %}admin-interface flat-theme {% get_admin_interface_theme as theme %}{% if theme.name %}{{ theme.name|slugify }}-theme{% endif %}{% if theme.foldable_apps %} foldable-apps {% endif %}{% if theme.form_submit_sticky %} sticky-submit {% endif %}{% if theme.form_pagination_sticky %} sticky-pagination {% endif %}{% endblock %}
 
 {% block branding %}
 {% get_admin_interface_theme as theme %}

admin_interface/templates/admin_interface/foldable-apps.html

@@ -0,0 +1,6 @@
+{% load static %}
+
+{% if theme.foldable_apps %}
+<link rel="stylesheet" type="text/css" href="{% static 'admin_interface/foldable-apps/foldable-apps.css' %}?v={{ version }}">
+<script type="text/javascript" src="{% static 'admin_interface/foldable-apps/foldable-apps.js' %}?v={{ version }}"></script>
+{% endif %}