Uses new modal component for delete list modal

This commit is contained in:
Mouse Reeve 2021-12-30 13:18:06 -08:00
parent 80f7c253de
commit 04476d253e
4 changed files with 39 additions and 6 deletions

View file

@ -0,0 +1,31 @@
{% load i18n %}
<div class="modal" id="{{ id }}">
<div class="modal-background" data-modal-close></div>
<div class="modal-card is-thin" role="dialog" aria-modal="true" tabindex="-1">
<header class="modal-card-head">
<h2 class="modal-card-title mb-0">
{% block modal-title %}{% endblock %}
</h2>
<button
type="button"
class="delete"
aria-label="{% trans 'Close' %}"
data-modal-close
></button>
</header>
<section class="modal-card-body">
{% block modal-body %}{% endblock %}
</section>
<footer class="modal-card-foot">
{% block modal-footer %}{% endblock %}
</footer>
</div>
<button
type="button"
class="modal-close is-large"
aria-label="{% trans 'Close' %}"
data-modal-close
></button>
</div>

View file

@ -1,4 +1,4 @@
{% extends 'components/modal.html' %} {% extends 'components/new_modal.html' %}
{% load i18n %} {% load i18n %}
{% block modal-title %}{% trans "Delete this list?" %}{% endblock %} {% block modal-title %}{% trans "Delete this list?" %}{% endblock %}
@ -14,8 +14,9 @@
<button class="button is-danger" type="submit"> <button class="button is-danger" type="submit">
{% trans "Delete" %} {% trans "Delete" %}
</button> </button>
{% trans "Cancel" as button_text %} <button type="button" class="button" data-modal-close>
{% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="delete_list" controls_uid=list.id %} {% trans "Cancel" %}
</button>
</form> </form>
{% endblock %} {% endblock %}

View file

@ -9,5 +9,5 @@
<form name="edit-list" method="post" action="{% url 'list' list.id %}"> <form name="edit-list" method="post" action="{% url 'list' list.id %}">
{% include 'lists/form.html' %} {% include 'lists/form.html' %}
</form> </form>
{% include "lists/delete_list_modal.html" with controls_text="delete_list" controls_uid=list.id %} {% include "lists/delete_list_modal.html" with id="delete_list" %}
{% endblock %} {% endblock %}

View file

@ -117,8 +117,9 @@
<div class="is-flex"> <div class="is-flex">
{% if list.id %} {% if list.id %}
<div class="is-flex-grow-1"> <div class="is-flex-grow-1">
{% trans "Delete list" as button_text %} <button type="button" data-modal-open="delete_list" class="button is-danger">
{% include 'snippets/toggle/toggle_button.html' with class="is-danger" text=button_text icon_with_text="x" controls_text="delete_list" controls_uid=list.id focus="modal_title_delete_list" %} {% trans "Delete list" %}
</button>
</div> </div>
{% endif %} {% endif %}
<div class="field has-addons"> <div class="field has-addons">