diff --git a/admin_interface/admin.py b/admin_interface/admin.py index 53a428f..e60811f 100644 --- a/admin_interface/admin.py +++ b/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': ( diff --git a/admin_interface/migrations/0023_theme_foldable_apps.py b/admin_interface/migrations/0023_theme_foldable_apps.py new file mode 100644 index 0000000..046247e --- /dev/null +++ b/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'), + ), + ] diff --git a/admin_interface/models.py b/admin_interface/models.py index f36a1ec..1ffa80a 100644 --- a/admin_interface/models.py +++ b/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')) diff --git a/admin_interface/static/admin_interface/foldable-apps/foldable-apps.css b/admin_interface/static/admin_interface/foldable-apps/foldable-apps.css new file mode 100644 index 0000000..59a3744 --- /dev/null +++ b/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; +} diff --git a/admin_interface/static/admin_interface/foldable-apps/foldable-apps.js b/admin_interface/static/admin_interface/foldable-apps/foldable-apps.js new file mode 100644 index 0000000..28a7342 --- /dev/null +++ b/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'); + } + }; +})(); \ No newline at end of file diff --git a/admin_interface/templates/admin/base_site.html b/admin_interface/templates/admin/base_site.html index 60f78d9..250933e 100644 --- a/admin_interface/templates/admin/base_site.html +++ b/admin_interface/templates/admin/base_site.html @@ -51,10 +51,11 @@ https://github.com/fabiocaccamo/django-admin-interface {% 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 %} diff --git a/admin_interface/templates/admin_interface/foldable-apps.html b/admin_interface/templates/admin_interface/foldable-apps.html new file mode 100644 index 0000000..b66fc04 --- /dev/null +++ b/admin_interface/templates/admin_interface/foldable-apps.html @@ -0,0 +1,6 @@ +{% load static %} + +{% if theme.foldable_apps %} + + +{% endif %}