On utilise un dropdown pour les paramètres

This commit is contained in:
Tom Hubrecht 2021-03-23 12:46:38 +01:00
parent 80ff6c130c
commit 0dc43c0cbd
2 changed files with 93 additions and 56 deletions

View file

@ -21,70 +21,82 @@
</div> </div>
</div> </div>
{% if election.start_date > current_time or election.end_date < current_time %}
<div class="level-right"> <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"> <div class="level-item">
<a class="button is-light is-outlined is-primary" href="{% url 'election.update' election.pk %}"> <div class="dropdown is-right">
<span class="icon"> <div class="dropdown-trigger">
<i class="fas fa-edit"></i> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
</span> <span class="icon is-small">
<span>{% trans "Modifier" %}</span> <i class="fas fa-cog" aria-hidden="true"></i>
</a> </span>
</div> <span>{% trans "Paramètres" %}</span>
</button>
</div>
{% if election.restricted %} <div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="level-item"> <div class="dropdown-content">
<a class="button is-light is-outlined is-primary" href="{% url 'election.upload-voters' election.pk %}"> {% if election.start_date > current_time %}
<span class="icon"> {# Modification de l'élection #}
<i class="fas fa-file-import"></i> <a class="dropdown-item" href="{% url 'election.update' election.pk %}">
</span> <span class="icon">
<span>{% trans "Gestion de la liste de votant·e·s" %}</span> <i class="fas fa-edit"></i>
</a> </span>
</div> <span>{% trans "Modifier" %}</span>
{% endif %} </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 #} {% elif election.end_date < current_time %}
{% 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>
{# Lien pour la publication des résultats #} {# Dépouillement #}
{% else %} {% if not election.tallied %}
<div class="level-item"> <a class="dropdown-item" href="{% url 'election.tally' election.pk %}">
<a class="button is-outlined is-primary" href="{% url 'election.publish' election.pk %}"> <span class="icon">
<span class="icon"> <i class="fas fa-poll-h"></i>
<i class="fas fa-edit"></i> </span>
</span> <span>{% trans "Dépouiller" %}</span>
{% if not election.results_public %} </a>
<span>{% trans "Publier" %}</span>
{% else %}
<span>{% trans "Dépublier" %}</span>
{% endif %}
</a>
</div>
{# Lien pour l'archivage #} {% else %}
<div class="level-item">
<a class="button is-light is-outlined is-primary" href="{% url 'election.archive' election.pk %}"> {# Publication des résultats #}
<span class="icon"> <a class="dropdown-item" href="{% url 'election.publish' election.pk %}">
<i class="fas fa-edit"></i> <span class="icon">
</span> <i class="fas fa-edit"></i>
<span>{% trans "Archiver" %}</span> </span>
</a> {% 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> </div>
{% endif %}
{% endif %}
</div> </div>
{% endif %}
</div> </div>
<hr> <hr>

View file

@ -18,9 +18,9 @@
<script src="{% static 'vendor/jquery/jquery-3.5.1.min.js' %}"></script> <script src="{% static 'vendor/jquery/jquery-3.5.1.min.js' %}"></script>
{# <script src="{% static 'elections/js/main.js' %}"></script> #} {# <script src="{% static 'elections/js/main.js' %}"></script> #}
<!-- Delete notification -->
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// Delete notifications
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => { (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
var $notification = $delete.parentNode; var $notification = $delete.parentNode;
@ -28,6 +28,31 @@
$notification.parentNode.removeChild($notification); $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> </script>