rafaelcaricio/moviewyrm
1
0
Fork 0
forked from mirrors/bookwyrm
Code Issues 4 Pull requests Projects Releases Wiki Activity

Merge pull request #1738 from bookwyrm-social/reading-modals

Browse source 
Refactors reading modals
This commit is contained in:
Mouse Reeve 2021-12-31 10:40:17 -08:00 committed by GitHub
commit 3c1552d435
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 68 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bookwyrm/static/js/bookwyrm.js
View file

@ -427,6 +427,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();

2
bookwyrm/templates/author/sync_modal.html
View file

@ -1,4 +1,4 @@
{% extends 'components/new_modal.html' %}
{% extends 'components/modal.html' %}
{% load i18n %}
{% block modal-title %}

2
bookwyrm/templates/book/cover_add_modal.html
View file

@ -1,4 +1,4 @@
{% extends 'components/new_modal.html' %}
{% extends 'components/modal.html' %}
{% load i18n %}
{% block modal-title %}

2
bookwyrm/templates/book/delete_readthrough_modal.html
View file

@ -1,4 +1,4 @@
{% extends 'components/new_modal.html' %}
{% extends 'components/modal.html' %}
{% load i18n %}
{% block modal-title %}{% trans "Delete these read dates?" %}{% endblock %}

2
bookwyrm/templates/book/sync_modal.html
View file

@ -1,4 +1,4 @@
{% extends 'components/new_modal.html' %}
{% extends 'components/modal.html' %}
{% load i18n %}
{% block modal-title %}

45
bookwyrm/templates/components/modal.html
View file

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

33
bookwyrm/templates/components/new_modal.html
View file

@ -1,33 +0,0 @@
{% load i18n %}
<div class="modal" id="{{ id }}">
<div class="modal-background" data-modal-close></div>
<div class="modal-card" 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>
{% block modal-form-open %}{% endblock %}
<section class="modal-card-body">
{% block modal-body %}{% endblock %}
</section>
<footer class="modal-card-foot">
{% block modal-footer %}{% endblock %}
</footer>
{% block modal-form-close %}{% endblock %}
</div>
<button
type="button"
class="modal-close is-large"
aria-label="{% trans 'Close' %}"
data-modal-close
></button>
</div>

2
bookwyrm/templates/groups/delete_group_modal.html
View file

@ -1,4 +1,4 @@
{% extends 'components/new_modal.html' %}
{% extends 'components/modal.html' %}
{% load i18n %}
{% block modal-title %}{% trans "Delete this group?" %}{% endblock %}

2
bookwyrm/templates/lists/delete_list_modal.html
View file

@ -1,4 +1,4 @@
{% extends 'components/new_modal.html' %}
{% extends 'components/modal.html' %}
{% load i18n %}
{% block modal-title %}{% trans "Delete this list?" %}{% endblock %}

2
bookwyrm/templates/snippets/report_modal.html
View file

@ -1,4 +1,4 @@
{% extends 'components/new_modal.html' %}
{% extends 'components/modal.html' %}
{% load i18n %}
{% load humanize %}

9
bookwyrm/templates/snippets/shelf_selector.html
View file

@ -86,11 +86,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
View 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>

14
bookwyrm/templates/snippets/shelve_button/shelve_button.html
View file

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

14
bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown_options.html
View file

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

9
bookwyrm/templates/snippets/shelve_button/shelve_button_options.html
View file

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