Add option to make active list filters more visible. #178

* add option to make active list filters more visible

* fix margins and border radius for selected filters

admin_interface/migrations/0026_theme_list_filter_highlight.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.0.7 on 2022-09-28 17:38
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('admin_interface', '0025_theme_language_chooser_control'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='theme',
+            name='list_filter_highlight',
+            field=models.BooleanField(default=True, verbose_name='highlight active'),
+        ),
+    ]

admin_interface/models.py

@@ -331,6 +331,9 @@ class Theme(models.Model):
         default=True, verbose_name=_("close button visible")
     )
 
+    list_filter_highlight = models.BooleanField(
+        default=True, verbose_name=_("highlight active")
+    )
     list_filter_dropdown = models.BooleanField(
         default=True, verbose_name=_("use dropdown")
     )

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

@@ -388,12 +388,35 @@
     text-decoration: none;
 }
 
+.admin-interface.list-filter-highlight .module.filtered #changelist-filter h3.active {
+    font-weight: bold;
+}
+
+.admin-interface.list-filter-highlight .module.filtered #changelist-filter ul.active li.selected {
+    color: var(--admin-interface-module-text-color);
+    background: var(--admin-interface-module-background-color);
+    margin-left: -10px;
+    padding-left: 5px;
+    margin-right: -10px;
+    border-left: 5px solid var(--admin-interface-module-background-color);
+    border-right: 5px solid var(--admin-interface-module-background-color);
+    border-radius: var(--admin-interface-module-border-radius);
+}
+
+.admin-interface.list-filter-highlight .module.filtered #changelist-filter ul.active li.selected a,
+.admin-interface.list-filter-highlight .module.filtered #changelist-filter ul.active li.selected a:link,
+.admin-interface.list-filter-highlight .module.filtered #changelist-filter ul.active li.selected a:visited,
+.admin-interface.list-filter-highlight .module.filtered #changelist-filter ul.active li.selected a:focus,
+.admin-interface.list-filter-highlight .module.filtered #changelist-filter ul.active li.selected a:hover {
+    background: inherit;
+    color: inherit;
+}
+
 .admin-interface .module.filtered #changelist-filter li.selected a,
 .admin-interface .module.filtered #changelist-filter li.selected a:link,
 .admin-interface .module.filtered #changelist-filter li.selected a:visited,
 .admin-interface .module.filtered #changelist-filter li.selected a:focus,
 .admin-interface .module.filtered #changelist-filter li.selected a:hover {
-    /* color: #666; */
     color: var(--admin-interface-generic-link-hover-color);
 }
 

admin_interface/static/admin_interface/css/list-filter-dropdown.css

@@ -16,3 +16,7 @@ list-filter-dropdown
     width: calc(100% - 30px);
     margin-right: 15px;
 }
+
+.admin-interface.list-filter-highlight .list-filter-dropdown h3.active + div select {
+    font-weight: bold;
+}

admin_interface/templates/admin/base_site.html

@@ -142,6 +142,7 @@ flat-theme admin-interface
 {% if theme.foldable_apps %} foldable-apps {% endif %}
 {% if theme.form_submit_sticky %} sticky-submit {% endif %}
 {% 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 %}
 {% endblock %}
 

admin_interface/templates/admin/filter.html

@@ -8,10 +8,10 @@
 
 {% else %}
 
-    {# Use the default list filter template -> https://github.com/django/django/blob/master/django/contrib/admin/templates/admin/filter.html #}
+    {# Use a changed default list filter template -> https://github.com/django/django/blob/master/django/contrib/admin/templates/admin/filter.html #}
 
-    <h3>{% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktrans %}</h3>
-    <ul>
+    <h3 {% if spec.lookup_val or spec.value %}class="active"{% endif %}>{% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktrans %}</h3>
+    <ul {% if spec.lookup_val or spec.value %}class="active"{% endif %}>
     {% for choice in choices %}
         <li{% if choice.selected %} class="selected"{% endif %}>
         <a href="{{ choice.query_string|iriencode }}">{{ choice.display }}</a></li>
@@ -19,4 +19,3 @@
     </ul>
 
 {% endif %}
-

admin_interface/templates/admin_interface/dropdown_filter.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 
 <div class="list-filter-dropdown">
-    <h3>{% blocktrans with title as filter_title %} By {{ filter_title }} {% endblocktrans %}</h3>
+    <h3 {% if spec.lookup_val or spec.value %}class="active"{% endif %}>{% blocktrans with title as filter_title %} By {{ filter_title }} {% endblocktrans %}</h3>
     <div align="right">
         <select onChange="javascript:window.location = this.options[this.selectedIndex].value;">
         {% for choice in choices %}