From 9080948f7c2a706cc2279e1a6e58ccc3ca5b4ee4 Mon Sep 17 00:00:00 2001
From: Fabio Caccamo <fabio.caccamo@gmail.com>
Date: Tue, 10 Nov 2015 17:35:54 +0100
Subject: [PATCH] Added support to dropdown list filter

---
 admin_interface/admin.py                      |   4 +
 .../templates/admin/base_site.html            | 262 +++++++++++-------
 admin_interface/templates/admin/filter.html   |  26 ++
 .../admin_interface/dropdown_filter.html      |  13 +
 4 files changed, 207 insertions(+), 98 deletions(-)
 create mode 100644 admin_interface/templates/admin/filter.html
 create mode 100644 admin_interface/templates/admin_interface/dropdown_filter.html

diff --git a/admin_interface/admin.py b/admin_interface/admin.py
index f845d05..bc73180 100644
--- a/admin_interface/admin.py
+++ b/admin_interface/admin.py
@@ -43,6 +43,10 @@ class ThemeAdmin(admin.ModelAdmin):
             'classes': ('wide', ),
             'fields': ('css_delete_button_background_color', 'css_delete_button_background_hover_color', 'css_delete_button_text_color', )
         }),
+        ('Extras', {
+            'classes': ('wide', ),
+            'fields': ('list_filter_dropdown', )
+        }),
     )
     
     save_on_top = True
diff --git a/admin_interface/templates/admin/base_site.html b/admin_interface/templates/admin/base_site.html
index 2dc421d..fb08604 100644
--- a/admin_interface/templates/admin/base_site.html
+++ b/admin_interface/templates/admin/base_site.html
@@ -4,14 +4,14 @@
 {% block extrastyle %}
 {% get_admin_interface_theme as theme %}
 <style type="text/css">
-    
+
 {% if theme.active %}
     
     #header { 
-        height: auto; 
-        min-height: 40px; 
-        background: {{ theme.css_header_background_color }};
-        color: {{ theme.css_header_text_color }};
+        height:auto; 
+        min-height:40px; 
+        background:{{ theme.css_header_background_color }};
+        color:{{ theme.css_header_text_color }};
     }
     
     #header #user-tools a {
@@ -21,14 +21,14 @@
     #header #user-tools a:hover, 
     #header #user-tools a:active {
         color:{{ theme.css_header_link_hover_color }};
-        border-bottom-color: rgba(255, 255, 255, 0.5);
+        border-bottom-color:rgba(255, 255, 255, 0.5);
     }
     
     #branding h1 img.logo { 
-        max-height: 100px; 
-        margin-top: 10px; 
-        margin-bottom: 10px; 
-        margin-right: 15px;
+        max-height:100px; 
+        margin-top:10px; 
+        margin-bottom:10px; 
+        margin-right:15px;
     }
     
     #branding h1 {
@@ -36,7 +36,7 @@
     }
     
     #branding h1 img+span {
-        white-space: nowrap;
+        white-space:nowrap;
     }
     
     .module h2, 
@@ -45,147 +45,147 @@
     .module.filtered h2, 
     .inline-group h2, 
     div.breadcrumbs {
-        background: {{ theme.css_module_background_color }};
-        color: {{ theme.css_module_text_color }};
+        background:{{ theme.css_module_background_color }};
+        color:{{ theme.css_module_text_color }};
     }
     
     div.breadcrumbs a {
-        color: {{ theme.css_module_link_color }};
+        color:{{ theme.css_module_link_color }};
     }
     
     div.breadcrumbs a:hover, 
     div.breadcrumbs a:active, 
     fieldset a.collapse-toggle:hover {
-        color: {{ theme.css_module_link_hover_color }} !important;
+        color:{{ theme.css_module_link_hover_color }} !important;
     }
     
     fieldset.collapsed a.collapse-toggle {
-        color: {{ theme.css_module_background_color }} !important;
+        color:{{ theme.css_module_background_color }} !important;
     }
     
     /* same color as above, but this requires !important */
     /* support for modeltranslation tabs */
     .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, 
     .selector-chosen h2 {
-        background: {{ theme.css_module_background_color }} !important;
-        color: {{ theme.css_module_text_color }} !important;
+        background:{{ theme.css_module_background_color }} !important;
+        color:{{ theme.css_module_text_color }} !important;
     }
     
     a:link, a:visited {
-        color: {{ theme.css_generic_link_color }};
+        color:{{ theme.css_generic_link_color }};
     }
     
     a:hover {
-        color: {{ theme.css_generic_link_hover_color }};
+        color:{{ theme.css_generic_link_hover_color }};
     }
     
     .button, input[type=submit], input[type=button], .submit-row input, a.button {
-        background: {{ theme.css_save_button_background_color }};
-        color: {{ theme.css_save_button_text_color }};
+        background:{{ theme.css_save_button_background_color }};
+        color:{{ theme.css_save_button_text_color }};
     }
     
     .button:active, input[type=submit]:active, input[type=button]:active,
     .button:hover, input[type=submit]:hover, input[type=button]:hover {
-        background: {{ theme.css_save_button_background_hover_color }};
-        color: {{ theme.css_save_button_text_color }};
+        background:{{ theme.css_save_button_background_hover_color }};
+        color:{{ theme.css_save_button_text_color }};
     }
     
     .button.default, input[type=submit].default, .submit-row input.default {
-        background: {{ theme.css_save_button_background_color }};
-        color: {{ theme.css_save_button_text_color }};
+        background:{{ theme.css_save_button_background_color }};
+        color:{{ theme.css_save_button_text_color }};
     }
     
     .button.default:active, input[type=submit].default:active,
     .button.default:hover, input[type=submit].default:hover {
-        background: {{ theme.css_save_button_background_hover_color }};
-        color: {{ theme.css_save_button_text_color }};
+        background:{{ theme.css_save_button_background_hover_color }};
+        color:{{ theme.css_save_button_text_color }};
     }
     
     .submit-row a.deletelink:link, 
     .submit-row a.deletelink:visited {
-        background: {{ theme.css_delete_button_background_color }};
-        color: {{ theme.css_delete_button_text_color }};
+        background:{{ theme.css_delete_button_background_color }};
+        color:{{ theme.css_delete_button_text_color }};
     }
     
     .submit-row a.deletelink:hover {
-        background: {{ theme.css_delete_button_background_hover_color }} !important;
-        color: {{ theme.css_delete_button_text_color }};
+        background:{{ theme.css_delete_button_background_hover_color }} !important;
+        color:{{ theme.css_delete_button_text_color }};
     }
     
     /*
     #changelist table tbody tr.selected {
-        background-color: #FFFFCC;
+        background-color:#FFFFCC;
     }
     */
     
     #changelist .paginator {
-        margin-top: -1px !important; /* merge 2 borders into 1 */
-        line-height: 42px;
+        margin-top:-1px !important; /* merge 2 borders into 1 */
+        line-height:42px;
     }
     
     .paginator a, 
     .paginator a:link, 
     .paginator a:visited,
     .paginator .this-page {
-        padding: 7px 12px !important;
-        {% if theme.css_module_rounded_corners %}border-radius: 4px;{% endif %}
+        padding:7px 12px !important;
+        {% if theme.css_module_rounded_corners %}border-radius:4px;{% endif %}
     }
     
     .paginator a, 
     .paginator a:link, 
     .paginator a:visited {
-        background-color: #ffffff !important; 
-        color: {{ theme.css_generic_link_color }} !important;
+        background-color:#ffffff !important; 
+        color:{{ theme.css_generic_link_color }} !important;
     }
     
     .paginator a:hover, 
     .paginator a:active {
-        background-color: #f8f8f8 !important;
-        color: {{ theme.css_generic_link_hover_color }} !important;
+        background-color:#f8f8f8 !important;
+        color:{{ theme.css_generic_link_hover_color }} !important;
     }
     
     .paginator .this-page {
-        background-color: {{ theme.css_module_background_color }} !important;
-        color: {{ theme.css_module_link_color }} !important;
+        background-color:{{ theme.css_module_background_color }} !important;
+        color:{{ theme.css_module_link_color }} !important;
     }
     
     .paginator a, 
     .paginator .this-page {
-        margin-left: 0px;
+        margin-left:0px;
     }
     
     .paginator .this-page, 
     .paginator a.end {
-        margin-right: 25px;
+        margin-right:25px;
     }
     
     .paginator .this-page + a:not(.showall)  {
-        margin-left: -25px !important;
+        margin-left:-25px !important;
     }
     
     body .paginator a.showall, 
     body .paginator a.showall:link, 
     body .paginator a.showall:visited {
-        margin-left: 20px;
-        color: {{ theme.css_generic_link_color }} !important;
+        margin-left:20px;
+        color:{{ theme.css_generic_link_color }} !important;
     }
     
     body .paginator a.showall:hover, 
     body .paginator a.showall:active {
-        color: {{ theme.css_generic_link_hover_color }} !important;
+        color:{{ theme.css_generic_link_hover_color }} !important;
     }
     
     /* OTHER FIXES */
     
     /* reduced width */
     .login #container {
-        width: 320px !important;
-        min-width: 320px !important;
+        width:320px !important;
+        min-width:320px !important;
     }
     
     /* same lateral padding as in logged view */
     .login #header {
-        padding: 10px 25px !important;
+        padding:10px 25px !important;
     }
     
     /* login button right aligned */
@@ -195,35 +195,44 @@
     
     /* login button right aligned */
     .login .submit-row {
-        padding-left: 0 !important;
-        text-align: right !important;
+        padding-left:0 !important;
+        text-align:right !important;
     }
     
     /* top-right buttons color on hover -> just a lighten grey */
     .object-tools a:hover, 
     .object-tools li:hover a {
-        background-color: #AAAAAA;
+        background-color:#AAAAAA;
     } 
     
     /* fix help text icon on newline */
     .inline-group thead th {
-        white-space: nowrap;
+        white-space:nowrap;
+    }
+    
+    .inline-group thead th img {
+        vertical-align: -2px;
+        margin-left: 5px;
+    }
+    
+    form .form-row p.file-upload > a {
+        margin-right:10px;    
     }
     
     form .form-row p.file-upload .clearable-file-input { 
-        margin-left:15px; 
+        display:inline-block;
     }
     
     form .wide p.help {
-        padding-left: 10px !important;
+        padding-left:10px !important;
     }
     
     textarea.tinymce ~ p.help {
-        margin-top: 5px !important;
+        margin-top:5px !important;
     }
     
     .aligned p.file-upload {
-        display: table;
+        display:table;
     }
     
     /* fix lateral padding to align text with field labels */
@@ -232,26 +241,26 @@
     .inline-group h2, 
     .module.filtered h2, 
     .inline-group h2 {
-        padding: 8px 10px; 
-        {% if theme.css_module_rounded_corners %}border-radius: 4px;{% endif %}
+        padding:8px 10px; 
+        {% if theme.css_module_rounded_corners %}border-radius:4px;{% endif %}
     }
     
     .module.filtered h2 {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+        border-bottom-left-radius:0;
+        border-bottom-right-radius:0;
     }
     
     .module.filtered #changelist-filter {
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
+        border-bottom-left-radius:4px;
+        border-bottom-right-radius:4px;
     }
     
     .module.filtered #changelist-filter select {
-        background-color: #ffffff;
+        background-color:#ffffff;
     }
     
     #content-related {
-        {% if theme.css_module_rounded_corners %}border-radius: 4px;{% endif %}
+        {% if theme.css_module_rounded_corners %}border-radius:4px;{% endif %}
     }
     
     /* selector chooseall / clearall color on hover -> just a lighten grey */
@@ -260,7 +269,7 @@
     }
     
     .inline-related h3 {
-        padding: 6px 10px !important;
+        padding:6px 10px !important;
     }
     
     /*
@@ -271,78 +280,135 @@
     
     /*.inline-group .tabular tr.has_original td.original,	*/
     .inline-group .tabular tr td.delete {
-        vertical-align: middle !important;
-        text-align: center !important;
+        vertical-align:middle !important;
+        text-align:center !important;
     }
     
     .inline-group .tabular tr td.delete a.inline-deletelink {
-        float: none;
-        display: inline-block;
+        float:none;
+        display:inline-block;
     }
     
     /* improve django-modeltranslation support - https://github.com/deschler/django-modeltranslation/pull/313/commits */
 
     #content h1 select {
-        text-transform: uppercase;
-        margin-left: 15px;  
+        text-transform:uppercase;
+        margin-left:15px;  
     }
     
     .ui-tabs .ui-tabs-nav {
-        padding: 10px 0 0 10px !important;
+        padding:10px 0 0 10px !important;
     }
     
     .ui-tabs .ui-tabs-nav li {
-        margin-left: -1px !important;
+        margin-left:-1px !important;
     }
     
     .ui-tabs .ui-tabs-nav li a {
-        outline: none;
-        background-color: #f8f8f8 !important;
-        border: 1px solid #eeeeee !important;
-        border-bottom: none !important;
-        text-transform: uppercase;
+        outline:none;
+        background-color:#f8f8f8 !important;
+        border:1px solid #eeeeee !important;
+        border-bottom:none !important;
+        text-transform:uppercase;
         
-        padding: 7px 14px 8px 14px !important;
-        margin-top: 1px !important;
+        padding:7px 14px 8px 14px !important;
+        margin-top:1px !important;
         
     }
     
     .ui-tabs .ui-tabs-nav li.ui-tabs-active a, 
     .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
         
-        padding: 8px 14px 8px 14px !important;
-        margin-top: 0px !important;
+        padding:8px 14px 8px 14px !important;
+        margin-top:0px !important;
         
-        margin-bottom: -1px !important;
+        margin-bottom:-1px !important;
         
-        background-color: #FFFFFF !important;
-        color: {{ theme.css_module_background_color }} !important;
+        background-color:#FFFFFF !important;
+        color:{{ theme.css_module_background_color }} !important;
         
-        border-bottom: 1px solid #FFFFFF !important;
+        border-bottom:1px solid #FFFFFF !important;
     }
     
     .inline-group .tabular .ui-tabs .ui-tabs-panel {
-        padding: 8px !important;
+        padding:8px !important;
     }
     
     #changelist .row1:not(.selected):hover, 
     #changelist .row2:not(.selected):hover {
-        background: #f9f9f9;
+        background:#f9f9f9;
     }
     
     .row2 {
-        background: #fcfcfc;
+        background:#fcfcfc;
     }
     
     .row2 .ui-tabs .ui-tabs-nav li a {
-        background-color: #f5f5f5 !important;
-        border: 1px solid #ebebeb !important;
+        background-color:#f5f5f5 !important;
+        border:1px solid #ebebeb !important;
     }
     
     .row2 .ui-tabs .ui-tabs-nav li.ui-tabs-active a, 
     .row2 .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
-        background-color: #fcfcfc !important;
-        border-bottom: 1px solid #fcfcfc !important;
+        background-color:#fcfcfc !important;
+        border-bottom:1px solid #fcfcfc !important;
+    }
+    
+    .list-filter-dropdown {
+        margin-top:10px; 
+        margin-bottom:20px;
+    }
+    
+    .list-filter-dropdown select {
+        width:90%; 
+        margin-right:5%;
+    }
+    
+    
+    /* ckeditor + light theme - https://github.com/Ikimea/ckeditor-light-theme */
+    
+    .cke_inner, .cke_wysiwyg_frame {
+        border-top-left-radius: 4px !important;
+        border-top-right-radius: 4px !important;
+        border-bottom-left-radius: 4px !important;
+        border-bottom-right-radius: 4px !important;
+    }
+    
+    .cke_top {
+        background: #f6f6f6 !important;  
+        border-top: none;
+        
+        border-top-left-radius: 4px !important;
+        border-top-right-radius: 4px !important;
+        
+        -moz-box-shadow: none !important;
+        -webkit-box-shadow: none !important;
+        box-shadow: none !important;
+    }
+    
+    .cke_bottom {
+        background: #f6f6f6 !important;
+        border-top: 1px solid #efefef !important;
+        
+        border-bottom-left-radius: 4px !important;
+        border-bottom-right-radius: 4px !important;
+    }
+    
+    .cke_source {
+        padding: 13px 15px !important;
+        box-sizing: border-box !important;
+    }
+    
+    a.cke_button_on {
+        -moz-box-shadow: none !important;
+        -webkit-box-shadow: none !important;
+        box-shadow: none !important;
+        background-color: rgba(0,0,0,0.1) !important;
+        border-radius: 4px !important;
+    }
+    
+    .cke_resizer {
+        border-color: transparent #999 transparent transparent !important;
     }
     
     {% if theme.css %}
@@ -352,7 +418,7 @@
 {% else %}
     
     #branding h1 img.logo {
-        display: none;
+        display:none;
     }
     
 {% endif %}
diff --git a/admin_interface/templates/admin/filter.html b/admin_interface/templates/admin/filter.html
new file mode 100644
index 0000000..61efc4c
--- /dev/null
+++ b/admin_interface/templates/admin/filter.html
@@ -0,0 +1,26 @@
+{% load i18n admin_interface_tags %}
+
+{% get_admin_interface_theme as theme %}
+
+{% if theme.list_filter_dropdown %}
+
+    {% include "admin_interface/dropdown_filter.html" %}
+    
+{% else %}
+    
+    {% comment %}
+    
+    Use the default list filter template -> https://github.com/django/django/blob/master/django/contrib/admin/templates/admin/filter.html
+    
+    {% endcomment %}
+    
+    <h3>{% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktrans %}</h3>
+    <ul>
+    {% for choice in choices %}
+        <li{% if choice.selected %} class="selected"{% endif %}>
+        <a href="{{ choice.query_string|iriencode }}">{{ choice.display }}</a></li>
+    {% endfor %}
+    </ul>
+
+{% endif %}
+
diff --git a/admin_interface/templates/admin_interface/dropdown_filter.html b/admin_interface/templates/admin_interface/dropdown_filter.html
new file mode 100644
index 0000000..deb9cac
--- /dev/null
+++ b/admin_interface/templates/admin_interface/dropdown_filter.html
@@ -0,0 +1,13 @@
+{% load i18n admin_interface_tags %}
+
+<div class="list-filter-dropdown">
+    <h3>{% 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 %}
+            <option {% if choice.selected %}selected{% endif %} value="{{ choice.query_string|iriencode }}">{{ choice.display }}</option>
+        {% endfor %}
+        </select>
+    </div>
+</div>
+