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>
{% 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>

View file

@ -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>