forked from mirrors/bookwyrm
Merge pull request #1736 from bookwyrm-social/new-modals-bright-futures
Switch old modals to new modals
This commit is contained in:
commit
e5c5dd8f98
26 changed files with 219 additions and 184 deletions
|
@ -41,6 +41,7 @@ let BookWyrm = new (class {
|
|||
document
|
||||
.querySelectorAll("[data-duplicate]")
|
||||
.forEach((node) => node.addEventListener("click", this.duplicateInput.bind(this)));
|
||||
|
||||
document
|
||||
.querySelectorAll("details.dropdown")
|
||||
.forEach((node) =>
|
||||
|
@ -60,6 +61,9 @@ let BookWyrm = new (class {
|
|||
.querySelectorAll('input[type="file"]')
|
||||
.forEach(bookwyrm.disableIfTooLarge.bind(bookwyrm));
|
||||
document.querySelectorAll("[data-copytext]").forEach(bookwyrm.copyText.bind(bookwyrm));
|
||||
document
|
||||
.querySelectorAll(".modal.is-active")
|
||||
.forEach(bookwyrm.handleActiveModal.bind(bookwyrm));
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -405,7 +409,7 @@ let BookWyrm = new (class {
|
|||
}
|
||||
|
||||
/**
|
||||
* Handle the modal component.
|
||||
* Handle the modal component with a button trigger.
|
||||
*
|
||||
* @param {Event} event - Event fired by an element
|
||||
* with the `data-modal-open` attribute
|
||||
|
@ -416,6 +420,7 @@ let BookWyrm = new (class {
|
|||
* for information about using the modal.
|
||||
*/
|
||||
handleModalButton(event) {
|
||||
const { handleFocusTrap } = this;
|
||||
const modalButton = event.currentTarget;
|
||||
const targetModalId = modalButton.dataset.modalOpen;
|
||||
const htmlElement = document.querySelector("html");
|
||||
|
@ -427,6 +432,8 @@ let BookWyrm = new (class {
|
|||
|
||||
// Helper functions
|
||||
function handleModalOpen(modalElement) {
|
||||
event.preventDefault();
|
||||
|
||||
htmlElement.classList.add("is-clipped");
|
||||
modalElement.classList.add("is-active");
|
||||
modalElement.getElementsByClassName("modal-card")[0].focus();
|
||||
|
@ -455,40 +462,46 @@ let BookWyrm = new (class {
|
|||
modalButton.focus();
|
||||
}
|
||||
|
||||
function handleFocusTrap(event) {
|
||||
if (event.key !== "Tab") {
|
||||
// Open modal
|
||||
handleModalOpen(modal);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle the modal component when opened at page load.
|
||||
*
|
||||
* @param {Element} modalElement - Active modal element
|
||||
* @return {undefined}
|
||||
*
|
||||
*/
|
||||
handleActiveModal(modalElement) {
|
||||
if (!modalElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const focusableEls = event.currentTarget.querySelectorAll(
|
||||
[
|
||||
"a[href]:not([disabled])",
|
||||
"button:not([disabled])",
|
||||
"textarea:not([disabled])",
|
||||
'input:not([type="hidden"]):not([disabled])',
|
||||
"select:not([disabled])",
|
||||
"details:not([disabled])",
|
||||
'[tabindex]:not([tabindex="-1"]):not([disabled])',
|
||||
].join(",")
|
||||
);
|
||||
const firstFocusableEl = focusableEls[0];
|
||||
const lastFocusableEl = focusableEls[focusableEls.length - 1];
|
||||
const { handleFocusTrap } = this;
|
||||
|
||||
if (event.shiftKey) {
|
||||
/* Shift + tab */ if (document.activeElement === firstFocusableEl) {
|
||||
lastFocusableEl.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
} /* Tab */ else {
|
||||
if (document.activeElement === lastFocusableEl) {
|
||||
firstFocusableEl.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
modalElement.getElementsByClassName("modal-card")[0].focus();
|
||||
|
||||
// Open modal
|
||||
handleModalOpen(modal);
|
||||
const closeButtons = modalElement.querySelectorAll("[data-modal-close]");
|
||||
|
||||
closeButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
handleModalClose(modalElement);
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Escape") {
|
||||
handleModalClose(modalElement);
|
||||
}
|
||||
});
|
||||
|
||||
modalElement.addEventListener("keydown", handleFocusTrap);
|
||||
|
||||
function handleModalClose(modalElement) {
|
||||
modalElement.removeEventListener("keydown", handleFocusTrap);
|
||||
history.back();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -92,10 +92,11 @@
|
|||
{% trans "View on OpenLibrary" %}
|
||||
</a>
|
||||
{% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
|
||||
{% with controls_text="ol_sync" controls_uid=author.id %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_ol_sync" class="is-small" icon_with_text="download" %}
|
||||
{% include "author/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" %}
|
||||
{% endwith %}
|
||||
<button class="button is-small" type="button" data-modal-open="openlibrary_sync">
|
||||
<span class="icon icon-download" title="{{ button_text }}"></span>
|
||||
<span class="is-sr-only-mobile">{{ button_text }}</span>
|
||||
</button>
|
||||
{% include "author/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" id="openlibrary_sync" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
@ -107,10 +108,11 @@
|
|||
</a>
|
||||
|
||||
{% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
|
||||
{% with controls_text="iv_sync" controls_uid=author.id %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_iv_sync" class="is-small" icon_with_text="download" %}
|
||||
{% include "author/sync_modal.html" with source="inventaire.io" source_name="Inventaire" %}
|
||||
{% endwith %}
|
||||
<button class="button is-small" type="button" data-modal-open="inventaire_sync">
|
||||
<span class="icon icon-download" title="{{ button_text }}"></span>
|
||||
<span class="is-sr-only-mobile">{{ button_text }}</span>
|
||||
</button>
|
||||
{% include "author/sync_modal.html" with source="inventaire.io" source_name="Inventaire" id="inventaire_sync" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
@ -19,12 +19,8 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block modal-footer %}
|
||||
<button class="button is-primary" type="submit">
|
||||
<span>{% trans "Confirm" %}</span>
|
||||
</button>
|
||||
|
||||
{% trans "Cancel" as button_text %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with text=button_text %}
|
||||
<button class="button is-primary" type="submit">{% trans "Confirm" %}</button>
|
||||
<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-form-close %}</form>{% endblock %}
|
||||
|
|
|
@ -63,7 +63,11 @@
|
|||
<div class="column is-one-fifth">
|
||||
{% if not book.cover %}
|
||||
{% if user_authenticated %}
|
||||
<button type="button" data-controls="add_cover_{{ book.id }}" data-focus-target="modal_title_add_cover_{{ book.id }}" aria-pressed="false" class="cover-container no-cover is-h-m-mobile">
|
||||
<button
|
||||
type="button"
|
||||
class="cover-container no-cover is-h-m-mobile"
|
||||
data-modal-open="add_cover_{{ book.id }}"
|
||||
>
|
||||
<img
|
||||
class="book-cover"
|
||||
src="{% static "images/no_cover.jpg" %}"
|
||||
|
@ -78,7 +82,8 @@
|
|||
{% trans "Click to add cover" %}
|
||||
</span>
|
||||
</button>
|
||||
{% include 'book/cover_add_modal.html' with book=book controls_text="add_cover" controls_uid=book.id %}
|
||||
{% join "add_cover" book.id as modal_id %}
|
||||
{% include 'book/cover_add_modal.html' with id=modal_id %}
|
||||
{% if request.GET.cover_error %}
|
||||
<p class="help is-danger">{% trans "Failed to load cover" %}</p>
|
||||
{% endif %}
|
||||
|
@ -117,23 +122,30 @@
|
|||
{% trans "Load data" as button_text %}
|
||||
{% if book.openlibrary_key %}
|
||||
<p>
|
||||
<a href="{{ book.openlibrary_link }}" target="_blank" rel="noopener">{% trans "View on OpenLibrary" %}</a>
|
||||
<a href="{{ book.openlibrary_link }}" target="_blank" rel="noopener">
|
||||
{% trans "View on OpenLibrary" %}
|
||||
</a>
|
||||
{% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
|
||||
{% with controls_text="ol_sync" controls_uid=book.id %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_ol_sync" class="is-small" icon_with_text="download" %}
|
||||
{% include "book/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" %}
|
||||
{% endwith %}
|
||||
<button class="button is-small" type="button" data-modal-open="openlibrary_sync">
|
||||
<span class="icon icon-download" title="{{ button_text }}"></span>
|
||||
<span class="is-sr-only-mobile">{{ button_text }}</span>
|
||||
</button>
|
||||
{% include "book/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" id="openlibrary_sync" %}
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if book.inventaire_id %}
|
||||
<p>
|
||||
<a href="{{ book.inventaire_link }}" target="_blank" rel="noopener">{% trans "View on Inventaire" %}</a>
|
||||
<a href="{{ book.inventaire_link }}" target="_blank" rel="noopener">
|
||||
{% trans "View on Inventaire" %}
|
||||
</a>
|
||||
|
||||
{% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
|
||||
{% with controls_text="iv_sync" controls_uid=book.id %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_iv_sync" class="is-small" icon_with_text="download" %}
|
||||
{% include "book/sync_modal.html" with source="inventaire.io" source_name="Inventaire" %}
|
||||
{% endwith %}
|
||||
<button class="button is-small" type="button" data-modal-open="inventaire_sync">
|
||||
<span class="icon icon-download" title="{{ button_text }}"></span>
|
||||
<span class="is-sr-only-mobile">{{ button_text }}</span>
|
||||
</button>
|
||||
{% include "book/sync_modal.html" with source="inventaire.io" source_name="Inventaire" id="inventaire_sync" %}
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
|
|
@ -29,8 +29,7 @@
|
|||
|
||||
{% block modal-footer %}
|
||||
<button class="button is-primary" type="submit">{% trans "Add" %}</button>
|
||||
{% trans "Cancel" as button_text %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with text=button_text %}
|
||||
<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
|
||||
{% endblock %}
|
||||
{% block modal-form-close %}</form>{% endblock %}
|
||||
|
||||
{% block modal-form-close %}</form>{% endblock %}
|
||||
|
|
|
@ -2,11 +2,17 @@
|
|||
{% load i18n %}
|
||||
|
||||
{% block modal-title %}{% trans "Delete these read dates?" %}{% endblock %}
|
||||
|
||||
{% block modal-body %}
|
||||
{% if readthrough.progress_updates|length > 0 %}
|
||||
{% blocktrans with count=readthrough.progress_updates|length %}You are deleting this readthrough and its {{ count }} associated progress updates.{% endblocktrans %}
|
||||
{% blocktrans trimmed with count=readthrough.progress_updates|length %}
|
||||
You are deleting this readthrough and its {{ count }} associated progress updates.
|
||||
{% endblocktrans %}
|
||||
{% else %}
|
||||
{% trans "This action cannot be un-done" %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-footer %}
|
||||
<form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
|
||||
{% csrf_token %}
|
||||
|
@ -14,7 +20,6 @@
|
|||
<button class="button is-danger" type="submit">
|
||||
{% trans "Delete" %}
|
||||
</button>
|
||||
{% trans "Cancel" as button_text %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="delete_readthrough" controls_uid=readthrough.id %}
|
||||
<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
|
||||
</form>
|
||||
{% endblock %}
|
|
@ -1,6 +1,7 @@
|
|||
{% load i18n %}
|
||||
{% load humanize %}
|
||||
{% load tz %}
|
||||
{% load utilities %}
|
||||
<div class="content">
|
||||
<div id="hide_edit_readthrough_{{ readthrough.id }}" class="box is-shadowless has-background-white-bis">
|
||||
<div class="columns">
|
||||
|
@ -47,6 +48,7 @@
|
|||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if readthrough.start_date %}
|
||||
<li>{{ readthrough.start_date | localtime | naturalday }}: {% trans "started" %}</li>
|
||||
{% endif %}
|
||||
|
@ -60,7 +62,11 @@
|
|||
</div>
|
||||
<div class="control">
|
||||
{% trans "Delete these read dates" as button_text %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with class="is-small" text=button_text icon="x" controls_text="delete_readthrough" controls_uid=readthrough.id focus="modal_title_delete_readthrough" %}
|
||||
<button class="button is-small" type="button" data-modal-open="delete_readthrough_{{ readthrough.id }}">
|
||||
<span class="icon icon-x" title="{{ button_text }}">
|
||||
<span class="is-sr-only">{{ button_text }}</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -79,4 +85,5 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% include 'snippets/delete_readthrough_modal.html' with controls_text="delete_readthrough" controls_uid=readthrough.id no_body=True %}
|
||||
{% join "delete_readthrough" readthrough.id as modal_id %}
|
||||
{% include 'book/delete_readthrough_modal.html' with id=modal_id %}
|
||||
|
|
|
@ -19,12 +19,8 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block modal-footer %}
|
||||
<button class="button is-primary" type="submit">
|
||||
<span>{% trans "Confirm" %}</span>
|
||||
</button>
|
||||
|
||||
{% trans "Cancel" as button_text %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with text=button_text %}
|
||||
<button class="button is-primary" type="submit">{% trans "Confirm" %}</button>
|
||||
<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-form-close %}</form>{% endblock %}
|
||||
|
|
|
@ -1,40 +1,33 @@
|
|||
{% load i18n %}
|
||||
<div
|
||||
role="dialog"
|
||||
class="modal {% if active %}is-active{% else %}is-hidden{% endif %}"
|
||||
id="{{ controls_text }}_{{ controls_uid }}"
|
||||
aria-labelledby="modal_card_title_{{ controls_text }}_{{ controls_uid }}"
|
||||
aria-modal="true"
|
||||
>
|
||||
{# @todo Implement focus traps to prevent tabbing out of the modal. #}
|
||||
<div class="modal-background"></div>
|
||||
{% trans "Close" as label %}
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head" tabindex="0" id="modal_title_{{ controls_text }}_{{ controls_uid }}">
|
||||
<h2 class="modal-card-title is-flex-shrink-1" id="modal_card_title_{{ controls_text }}_{{ controls_uid }}">
|
||||
|
||||
<div class="modal {% if active %}is-active{% endif %}" id="{{ id }}">
|
||||
<div class="modal-background" data-modal-close></div>
|
||||
<div class="modal-card" role="dialog" aria-modal="true" tabindex="-1" aria-described-by="{{ id }}_header">
|
||||
<header class="modal-card-head">
|
||||
<h2 class="modal-card-title mb-0" id="{{ id }}_header">
|
||||
{% block modal-title %}{% endblock %}
|
||||
</h2>
|
||||
{% if static %}
|
||||
<a href="/" class="delete">{{ label }}</a>
|
||||
{% else %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with label=label class="delete" nonbutton=True %}
|
||||
{% endif %}
|
||||
<button
|
||||
type="button"
|
||||
class="delete"
|
||||
aria-label="{% trans 'Close' %}"
|
||||
data-modal-close
|
||||
></button>
|
||||
</header>
|
||||
|
||||
{% block modal-form-open %}{% endblock %}
|
||||
{% if not no_body %}
|
||||
<section class="modal-card-body">
|
||||
{% block modal-body %}{% endblock %}
|
||||
</section>
|
||||
{% endif %}
|
||||
<footer class="modal-card-foot">
|
||||
{% block modal-footer %}{% endblock %}
|
||||
</footer>
|
||||
{% block modal-form-close %}{% endblock %}
|
||||
</div>
|
||||
{% if static %}
|
||||
<a href="/" class="modal-close is-large">{{ label }}</a>
|
||||
{% else %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with label=label class="modal-close is-large" nonbutton=True %}
|
||||
{% endif %}
|
||||
<button
|
||||
type="button"
|
||||
class="modal-close is-large"
|
||||
aria-label="{% trans 'Close' %}"
|
||||
data-modal-close
|
||||
></button>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -1,31 +0,0 @@
|
|||
{% 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>
|
|
@ -14,8 +14,7 @@
|
|||
<button class="button is-danger" type="submit">
|
||||
{% trans "Delete" %}
|
||||
</button>
|
||||
{% trans "Cancel" as button_text %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="delete_group" controls_uid=group.id %}
|
||||
<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
@ -9,5 +9,5 @@
|
|||
<form name="edit-group" method="post" action="{% url 'group' group.id %}">
|
||||
{% include 'groups/form.html' %}
|
||||
</form>
|
||||
{% include "groups/delete_group_modal.html" with controls_text="delete_group" controls_uid=group.id %}
|
||||
{% include "groups/delete_group_modal.html" with id="delete_group" %}
|
||||
{% endblock %}
|
||||
|
|
|
@ -14,8 +14,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">
|
||||
<div class="is-flex">
|
||||
{% if group.id %}
|
||||
<div class="is-flex-grow-1">
|
||||
<button type="button" data-modal-open="delete_group" class="button is-danger">
|
||||
{% trans "Delete group" %}
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
{% include 'snippets/privacy_select_no_followers.html' with current=group.privacy %}
|
||||
|
@ -24,11 +30,4 @@
|
|||
<button type="submit" class="button is-primary">{% trans "Save" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if group.id %}
|
||||
<div class="column is-narrow">
|
||||
{% trans "Delete group" as button_text %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with class="is-danger" text=button_text icon_with_text="x" controls_text="delete_group" controls_uid=group.id focus="modal_title_delete_group" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
{% extends 'components/new_modal.html' %}
|
||||
{% extends 'components/modal.html' %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block modal-title %}{% trans "Delete this list?" %}{% endblock %}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
type="number"
|
||||
name="progress"
|
||||
class="input"
|
||||
id="id_progress_{{ readthrough.id }}{{ controls_uid }}"
|
||||
id="{{ field_id }}"
|
||||
value="{{ readthrough.progress }}"
|
||||
{% if progress_required %}required{% endif %}
|
||||
>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
{% extends 'snippets/reading_modals/layout.html' %}
|
||||
{% load i18n %}
|
||||
{% load utilities %}
|
||||
|
||||
{% block modal-title %}
|
||||
{% trans "Update progress" %}
|
||||
|
@ -12,8 +13,9 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block reading-dates %}
|
||||
<label for="id_progress_{{ readthrough.id }}{{ controls_uid }}" class="label">{% trans "Progress:" %}</label>
|
||||
{% include "snippets/progress_field.html" with progress_required=True %}
|
||||
{% join "id_progress" uuid as field_id %}
|
||||
<label for="{{ field_id }}" class="label">{% trans "Progress:" %}</label>
|
||||
{% include "snippets/progress_field.html" with progress_required=True id=field_id %}
|
||||
{% endblock %}
|
||||
|
||||
{% block form %}
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
{% load i18n %}
|
||||
{% load utilities %}
|
||||
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
||||
<input type="hidden" name="book" value="{{ book.id }}">
|
||||
|
@ -10,10 +12,11 @@
|
|||
</div>
|
||||
{# Only show progress for editing existing readthroughs #}
|
||||
{% if readthrough.id and not readthrough.finish_date %}
|
||||
<label class="label" for="id_progress_{{ readthrough.id }}{{ controls_uid }}">
|
||||
{% join "id_progress" readthrough.id as field_id %}
|
||||
<label class="label" for="{{ field_id }}">
|
||||
{% trans "Progress" %}
|
||||
</label>
|
||||
{% include "snippets/progress_field.html" %}
|
||||
{% include "snippets/progress_field.html" with id=field_id %}
|
||||
{% endif %}
|
||||
<div class="field">
|
||||
<label class="label" for="id_finish_date_{{ readthrough.id }}">
|
||||
|
|
|
@ -3,9 +3,15 @@
|
|||
|
||||
{% with 0|uuid as report_uuid %}
|
||||
|
||||
{% trans "Report" as button_text %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with class="is-danger is-light is-small is-fullwidth" text=button_text controls_text="report" controls_uid=report_uuid focus="modal_title_report" disabled=is_current %}
|
||||
|
||||
{% include 'snippets/report_modal.html' with user=user reporter=request.user controls_text="report" controls_uid=report_uuid %}
|
||||
{% join "report" report_uuid as modal_id %}
|
||||
<button
|
||||
class="button is-small is-danger is-light is-fullwidth"
|
||||
type="button"
|
||||
data-modal-open="{{ modal_id }}"
|
||||
{% if is_current %}disabled{% endif %}
|
||||
>
|
||||
{% trans "Report" %}
|
||||
</button>
|
||||
{% include 'snippets/report_modal.html' with user=user reporter=request.user id=modal_id %}
|
||||
|
||||
{% endwith %}
|
||||
|
|
|
@ -21,8 +21,12 @@
|
|||
|
||||
<section class="content">
|
||||
<p>{% blocktrans with site_name=site.name %}This report will be sent to {{ site_name }}'s moderators for review.{% endblocktrans %}</p>
|
||||
<label class="label" for="id_{{ controls_uid }}_report_note">{% trans "More info about this report:" %}</label>
|
||||
<div class="control">
|
||||
<label class="label" for="id_{{ controls_uid }}_report_note">
|
||||
{% trans "More info about this report:" %}
|
||||
</label>
|
||||
<textarea class="textarea" name="note" id="id_{{ controls_uid }}_report_note"></textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
|
@ -31,9 +35,9 @@
|
|||
{% block modal-footer %}
|
||||
|
||||
<button class="button is-success" type="submit">{% trans "Submit" %}</button>
|
||||
{% trans "Cancel" as button_text %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="report" controls_uid=report_uuid class="" %}
|
||||
<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-form-close %}</form>{% endblock %}
|
||||
|
||||
|
|
|
@ -88,11 +88,14 @@
|
|||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book controls_text="want_to_read" controls_uid=uuid move_from=current.id refresh=True class="" %}
|
||||
{% join "want_to_read" uuid as modal_id %}
|
||||
{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book id=modal_id move_from=current.id refresh=True class="" %}
|
||||
|
||||
{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book controls_text="start_reading" controls_uid=uuid move_from=current.id refresh=True class="" %}
|
||||
{% join "start_reading" uuid as modal_id %}
|
||||
{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book id=modal_id move_from=current.id refresh=True class="" %}
|
||||
|
||||
{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book controls_text="finish_reading" controls_uid=uuid move_from=current.id readthrough=readthrough refresh=True class="" %}
|
||||
{% join "finish_reading" uuid as modal_id %}
|
||||
{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book id=modal_id move_from=current.id readthrough=readthrough refresh=True class="" %}
|
||||
|
||||
{% endwith %}
|
||||
{% endblock %}
|
||||
|
|
10
bookwyrm/templates/snippets/shelve_button/modal_button.html
Normal file
10
bookwyrm/templates/snippets/shelve_button/modal_button.html
Normal file
|
@ -0,0 +1,10 @@
|
|||
{% load utilities %}
|
||||
<form name="fallback_form_{{ 0|uuid }}" method="GET" action="{{ fallback_url }}" autocomplete="off">
|
||||
<button
|
||||
type="submit"
|
||||
class="button {{ class }}"
|
||||
data-modal-open="{{ modal_id }}"
|
||||
>
|
||||
{{ button_text }}
|
||||
</button>
|
||||
</form>
|
|
@ -6,7 +6,7 @@
|
|||
{% with book.id|uuid as uuid %}
|
||||
{% active_shelf book as active_shelf %}
|
||||
{% latest_read_through book request.user as readthrough %}
|
||||
<div class="field has-addons mb-0" data-shelve-button-book="{{ book.id }}">
|
||||
<div class="field has-addons mb-0 has-text-weight-normal" data-shelve-button-book="{{ book.id }}">
|
||||
{% if switch_mode and active_shelf.book != book %}
|
||||
<div class="control">
|
||||
{% include 'snippets/switch_edition_button.html' with edition=book size='is-small' %}
|
||||
|
@ -19,13 +19,17 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book controls_text="want_to_read" controls_uid=uuid %}
|
||||
{% join "want_to_read" uuid as modal_id %}
|
||||
{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book id=modal_id class="" %}
|
||||
|
||||
{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book controls_text="start_reading" controls_uid=uuid %}
|
||||
{% join "start_reading" uuid as modal_id %}
|
||||
{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book id=modal_id class="" %}
|
||||
|
||||
{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book controls_text="finish_reading" controls_uid=uuid readthrough=readthrough %}
|
||||
{% join "finish_reading" uuid as modal_id %}
|
||||
{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book id=modal_id readthrough=readthrough class="" %}
|
||||
|
||||
{% include 'snippets/reading_modals/progress_update_modal.html' with book=active_shelf.book controls_text="progress_update" controls_uid=uuid readthrough=readthrough %}
|
||||
{% join "progress_update" uuid as modal_id %}
|
||||
{% include 'snippets/reading_modals/progress_update_modal.html' with book=active_shelf.book id=modal_id readthrough=readthrough class="" %}
|
||||
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
|
|
|
@ -16,19 +16,22 @@
|
|||
|
||||
{% trans "Start reading" as button_text %}
|
||||
{% url 'reading-status' 'start' book.id as fallback_url %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="start_reading" controls_uid=button_uuid focus="modal_title_start_reading" disabled=is_current fallback_url=fallback_url %}
|
||||
{% join "start_reading" button_uuid as modal_id %}
|
||||
{% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
|
||||
|
||||
{% elif shelf.identifier == 'read' %}
|
||||
|
||||
{% trans "Read" as button_text %}
|
||||
{% url 'reading-status' 'finish' book.id as fallback_url %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="finish_reading" controls_uid=button_uuid focus="modal_title_finish_reading" disabled=is_current fallback_url=fallback_url %}
|
||||
{% join "finish_reading" button_uuid as modal_id %}
|
||||
{% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
|
||||
|
||||
{% elif shelf.identifier == 'to-read' %}
|
||||
|
||||
{% trans "Want to read" as button_text %}
|
||||
{% url 'reading-status' 'want' book.id as fallback_url %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="want_to_read" controls_uid=button_uuid focus="modal_title_want_to_read" disabled=is_current fallback_url=fallback_url %}
|
||||
{% join "want_to_read" button_uuid as modal_id %}
|
||||
{% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
|
||||
|
||||
{% elif shelf.editable %}
|
||||
|
||||
|
@ -47,8 +50,9 @@
|
|||
|
||||
{% if readthrough and active_shelf.shelf.identifier != 'read' %}
|
||||
<li role="menuitem" class="dropdown-item p-0" data-extra-options>
|
||||
{% trans "Update progress" as button_text %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="progress_update" controls_uid=button_uuid focus="modal_title_progress_update" %}
|
||||
<button type="submit" class="button {{ class }}" data-modal-open="progress_update_{{ button_uuid }}">
|
||||
{% trans "Update progress" %}
|
||||
</button>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
@ -23,19 +23,22 @@
|
|||
|
||||
{% trans "Start reading" as button_text %}
|
||||
{% url 'reading-status' 'start' book.id as fallback_url %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="start_reading" controls_uid=button_uuid focus="modal_title_start_reading" fallback_url=fallback_url %}
|
||||
{% join "start_reading" button_uuid as modal_id %}
|
||||
{% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
|
||||
|
||||
{% elif shelf.identifier == 'read' %}
|
||||
|
||||
{% trans "Finish reading" as button_text %}
|
||||
{% url 'reading-status' 'finish' book.id as fallback_url %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="finish_reading" controls_uid=button_uuid focus="modal_title_finish_reading" fallback_url=fallback_url %}
|
||||
{% join "finish_reading" button_uuid as modal_id %}
|
||||
{% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
|
||||
|
||||
{% elif shelf.identifier == 'to-read' %}
|
||||
|
||||
{% trans "Want to read" as button_text %}
|
||||
{% url 'reading-status' 'want' book.id as fallback_url %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="want_to_read" controls_uid=button_uuid focus="modal_title_want_to_read" fallback_url=fallback_url %}
|
||||
{% join "want_to_read" button_uuid as modal_id %}
|
||||
{% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
|
||||
|
||||
{% elif shelf.editable %}
|
||||
|
||||
|
|
|
@ -17,6 +17,12 @@ def get_uuid(identifier):
|
|||
return f"{identifier}{uuid4()}"
|
||||
|
||||
|
||||
@register.simple_tag(takes_context=False)
|
||||
def join(*args):
|
||||
"""concatenate an arbitary set of values"""
|
||||
return "_".join(str(a) for a in args)
|
||||
|
||||
|
||||
@register.filter(name="username")
|
||||
def get_user_identifier(user):
|
||||
"""use localname for local users, username for remote"""
|
||||
|
|
Loading…
Reference in a new issue