Amélioration du rendu du formulaire

src/agenda_culturel/static/style.scss

@@ -238,4 +238,21 @@ article.day>ul {
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
         }   
     }
+}
+
+article.filter {
+    form>div {
+        padding: 0.5em;
+        [role="button"] {
+            margin: 0.2em;
+            height: 2.6em;
+            line-height: 2.2em;
+            span {
+                margin-right: .6em;
+            }
+            label {
+                display: inline-block;
+            }
+        }
+    }
 }

src/agenda_culturel/templates/agenda_culturel/forms/category-checkbox-option.html

@@ -0,0 +1,4 @@
+<label for="{{ widget.attrs.id }}">
+    {{ widget.label }}
+    {% include "django/forms/widgets/input.html" %}
+</label>

src/agenda_culturel/templates/agenda_culturel/forms/category-checkbox.html

@@ -0,0 +1,6 @@
+{% load cat_extra %}
+<div id="{{ widget.attrs.id }}"{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}>{% for group, options, index in widget.optgroups %}{% if group %}
+  <div><label>{{ group }}</label>{% endif %}{% for widget in options %}<div role="button" class="small-cat contrast">
+    {{ widget.value.instance | circle_cat }}{% include widget.template_name %}</div>{% endfor %}{% if group %}
+  </div>{% endif %}{% endfor %}
+</div>

src/agenda_culturel/templates/agenda_culturel/forms/tag-checkbox.html

@@ -0,0 +1,6 @@
+{% load cat_extra %}
+<div id="{{ widget.attrs.id }}"{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}>{% for group, options, index in widget.optgroups %}{% if group %}
+  <div><label>{{ group }}</label>{% endif %}{% for widget in options %}<div role="button" class="small-cat">
+    {% include widget.template_name %}</div>{% endfor %}{% if group %}
+  </div>{% endif %}{% endfor %}
+</div>

src/agenda_culturel/templatetags/cat_extra.py

@@ -69,14 +69,18 @@ def css_categories():
         result += background_color_adjust_color(adjust_lightness_saturation(c["color"], .2, 0.8), 0.8)
         result += "}"
 
-        result += "*:hover ." + c["css_class"] + " {"
+        result += "*:hover>." + c["css_class"] + " {"
         result += background_color_adjust_color(adjust_lightness_saturation(c["color"], 0.02, 1.0))
         result += "}"
         
+        result += "." + c["css_class"] + ".circ-cat, "
+        result += "form ." + c["css_class"] + ", "
         result += ".selected ." + c["css_class"] + " {"
         result += background_color_adjust_color(c["color"])
         result += "}"
 
+        result += "." + c["css_class"] + ".circ-cat:hover, "
+        result += "form ." + c["css_class"] + ":hover, "
         result += "a.selected:hover ." + c["css_class"] + " {"
         result += background_color_adjust_color(adjust_lightness_saturation(c["color"], 0.2, 1.2))
         result += "}"
@@ -99,9 +103,9 @@ def small_cat(category, url=None, contrast=True, close_url=None):
 @register.filter
 def circle_cat(category):
     if category is None:
-        return mark_safe('<span class="cat ' + Category.default_css_class + '" data-tooltip="' + Category.default_name + '"></span>')
+        return mark_safe('<span class="cat ' + Category.default_css_class + ' circ-cat" data-tooltip="' + Category.default_name + '"></span>')
     else:
-        return mark_safe('<span class="cat ' + category.css_class() + '" data-tooltip="' + category.name + '"></span>')
+        return mark_safe('<span class="cat ' + category.css_class() + ' circ-cat" data-tooltip="' + category.name + '"></span>')
 
 @register.filter
 def small_cat_close(category, close_url=None, contrast=True):

src/agenda_culturel/templatetags/tag_extra.py

@@ -0,0 +1,12 @@
+from django import template
+from django.utils.safestring import mark_safe
+from django.urls import reverse_lazy
+
+register = template.Library()
+
+@register.filter
+def tag_button(tag, link=False):
+    if link:
+        return mark_safe('<a href="' + reverse_lazy('view_tag', {"tag": tag}) +'" role="button" class="small-cat">' +  tag + '</a>')
+    else:
+        return mark_safe('<span role="button" class="small-cat">' +  tag + '</span>')

src/agenda_culturel/views.py

@@ -3,7 +3,7 @@ from django.views.generic import ListView, DetailView, FormView
 from django.views.generic.edit import CreateView, UpdateView, DeleteView
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.http import QueryDict
-
+from django import forms
 
 from .forms import EventSubmissionModelForm
 from .celery import create_event_from_submission
@@ -171,9 +171,25 @@ class CalendarWeek(CalendarList):
         return self.firstdate + timedelta(days=-7)
 
 
+class CategoryCheckboxSelectMultiple(forms.CheckboxSelectMultiple):
+    template_name = 'agenda_culturel/forms/category-checkbox.html'
+    option_template_name = 'agenda_culturel/forms/category-checkbox-option.html'
+
+class TagCheckboxSelectMultiple(forms.CheckboxSelectMultiple):
+    template_name = 'agenda_culturel/forms/tag-checkbox.html'
+
+
 class EventFilter(django_filters.FilterSet):
-    tags = django_filters.MultipleChoiceFilter(choices=[(t, t) for t in Event.get_all_tags()], lookup_expr='icontains', field_name="tags")
-    category = django_filters.ModelMultipleChoiceFilter(field_name="category__id", to_field_name='id', queryset=Category.objects.all())
+    tags = django_filters.MultipleChoiceFilter(label="Étiquettes", 
+        choices=[(t, t) for t in Event.get_all_tags()], 
+        lookup_expr='icontains', 
+        field_name="tags", 
+        widget=TagCheckboxSelectMultiple)
+    category = django_filters.ModelMultipleChoiceFilter(label="Catégories", 
+        field_name="category__id", 
+        to_field_name='id', 
+        queryset=Category.objects.all(), 
+        widget=CategoryCheckboxSelectMultiple)
     
 
 
@@ -185,7 +201,6 @@ class EventFilter(django_filters.FilterSet):
     class Meta:
         model = Event
         fields = ["category", "tags"]
-        field_labels = { 'category': "Catégories", "tags": "Étiquettes" }
 
     def get_url(self):
         if isinstance(self.form.data, QueryDict):