From 0dc43c0cbd73e6c9b981ca2fa3bcaaf377955cbe Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Tue, 23 Mar 2021 12:46:38 +0100
Subject: [PATCH] =?UTF-8?q?On=20utilise=20un=20dropdown=20pour=20les=20par?=
 =?UTF-8?q?am=C3=A8tres?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/elections/election_admin.html   | 122 ++++++++++--------
 shared/templates/base.html                    |  27 +++-
 2 files changed, 93 insertions(+), 56 deletions(-)

diff --git a/elections/templates/elections/election_admin.html b/elections/templates/elections/election_admin.html
index 9abb331..6f81845 100644
--- a/elections/templates/elections/election_admin.html
+++ b/elections/templates/elections/election_admin.html
@@ -21,70 +21,82 @@
     </div>
   </div>
 
+  {% if election.start_date > current_time or election.end_date < current_time %}
   <div class="level-right">
-
-    {# Lien pour la modification et l'upload des votant·e·s #}
-    {% if election.start_date > current_time %}
     <div class="level-item">
-      <a class="button is-light is-outlined is-primary" href="{% url 'election.update' election.pk %}">
-        <span class="icon">
-          <i class="fas fa-edit"></i>
-        </span>
-        <span>{% trans "Modifier" %}</span>
-      </a>
-    </div>
+      <div class="dropdown is-right">
+        <div class="dropdown-trigger">
+          <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+            <span class="icon is-small">
+              <i class="fas fa-cog" aria-hidden="true"></i>
+            </span>
+            <span>{% trans "Paramètres" %}</span>
+          </button>
+        </div>
 
-    {% if election.restricted %}
-    <div class="level-item">
-      <a class="button is-light is-outlined is-primary" href="{% url 'election.upload-voters' election.pk %}">
-        <span class="icon">
-          <i class="fas fa-file-import"></i>
-        </span>
-        <span>{% trans "Gestion de la liste de votant·e·s" %}</span>
-      </a>
-    </div>
-    {% endif %}
+        <div class="dropdown-menu" id="dropdown-menu" role="menu">
+          <div class="dropdown-content">
+            {% if election.start_date > current_time %}
+            {# Modification de l'élection #}
+            <a class="dropdown-item" href="{% url 'election.update' election.pk %}">
+              <span class="icon">
+                <i class="fas fa-edit"></i>
+              </span>
+              <span>{% trans "Modifier" %}</span>
+            </a>
 
-    {% elif election.end_date < current_time %}
+            {# Gestion des votant·e·s #}
+            {% if election.restricted %}
+            <a class="dropdown-item" href="{% url 'election.upload-voters' election.pk %}">
+              <span class="icon">
+                <i class="fas fa-file-import"></i>
+              </span>
+              <span>{% trans "Gestion de la liste de votant·e·s" %}</span>
+            </a>
+            {% endif %}
 
-    {# Lien pour le dépouillement #}
-    {% if not election.tallied %}
-    <div class="level-item">
-      <a class="button is-light is-outlined is-primary" href="{% url 'election.tally' election.pk %}">
-        <span class="icon">
-          <i class="fas fa-poll-h"></i>
-        </span>
-        <span>{% trans "Dépouiller" %}</span>
-      </a>
-    </div>
+            {% elif election.end_date < current_time %}
 
-    {# Lien pour la publication des résultats #}
-    {% else %}
-    <div class="level-item">
-      <a class="button is-outlined is-primary" href="{% url 'election.publish' election.pk %}">
-        <span class="icon">
-          <i class="fas fa-edit"></i>
-        </span>
-        {% if not election.results_public %}
-        <span>{% trans "Publier" %}</span>
-        {% else %}
-        <span>{% trans "Dépublier" %}</span>
-        {% endif %}
-      </a>
-    </div>
+            {# Dépouillement #}
+            {% if not election.tallied %}
+            <a class="dropdown-item" href="{% url 'election.tally' election.pk %}">
+              <span class="icon">
+                <i class="fas fa-poll-h"></i>
+              </span>
+              <span>{% trans "Dépouiller" %}</span>
+            </a>
 
-    {# Lien pour l'archivage #}
-    <div class="level-item">
-      <a class="button is-light is-outlined is-primary" href="{% url 'election.archive' election.pk %}">
-        <span class="icon">
-          <i class="fas fa-edit"></i>
-        </span>
-        <span>{% trans "Archiver" %}</span>
-      </a>
+            {% else %}
+
+            {# Publication des résultats #}
+            <a class="dropdown-item" href="{% url 'election.publish' election.pk %}">
+              <span class="icon">
+                <i class="fas fa-edit"></i>
+              </span>
+              {% if not election.results_public %}
+              <span>{% trans "Publier" %}</span>
+              {% else %}
+              <span>{% trans "Dépublier" %}</span>
+              {% endif %}
+            </a>
+
+            {# Archivage #}
+            <a class="dropdown-item" href="{% url 'election.archive' election.pk %}">
+              <span class="icon">
+                <i class="fas fa-edit"></i>
+              </span>
+              <span>{% trans "Archiver" %}</span>
+            </a>
+            {% endif %}
+
+            {% endif %}
+
+          </div>
+        </div>
+      </div>
     </div>
-    {% endif %}
-    {% endif %}
   </div>
+  {% endif %}
 </div>
 <hr>
 
diff --git a/shared/templates/base.html b/shared/templates/base.html
index 61345d3..bb09bdb 100644
--- a/shared/templates/base.html
+++ b/shared/templates/base.html
@@ -18,9 +18,9 @@
   <script src="{% static 'vendor/jquery/jquery-3.5.1.min.js' %}"></script>
   {# <script src="{% static 'elections/js/main.js' %}"></script> #}
 
-  <!-- Delete notification -->
   <script>
     document.addEventListener('DOMContentLoaded', () => {
+      // Delete notifications
       (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
         var $notification = $delete.parentNode;
 
@@ -28,6 +28,31 @@
           $notification.parentNode.removeChild($notification);
         });
       });
+
+      // Interact with dropdowns
+      var $dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)') || [];
+
+      $dropdowns.forEach(($dropdown) => {
+        $dropdown.addEventListener('click', (event) => {
+          event.stopPropagation();
+          $dropdown.classList.toggle('is-active');
+        });
+      });
+
+      document.addEventListener('click', () => {
+        $dropdowns.forEach(($dropdown) => {
+          $dropdown.classList.remove('is-active');
+        });
+      });
+
+      document.addEventListener('keydown', (event) => {
+        var e = event || window.event;
+        if (e.keyCode === 27) {
+          $dropdowns.forEach(($dropdown) => {
+            $dropdown.classList.remove('is-active');
+          });
+        }
+      });
     });
 
   </script>