Merge pull request #1476 from bookwyrm-social/progress-modal

Progress modal

bookwyrm/templates/snippets/progress_field.html

@@ -0,0 +1,27 @@
+{% load i18n %}
+<div class="field has-addons">
+    <div class="control">
+        <input
+            type="number"
+            name="progress"
+            class="input"
+            id="id_progress_{{ readthrough.id }}"
+            value="{{ readthrough.progress }}"
+            {% if progress_required %}required{% endif %}
+        >
+    </div>
+    <div class="control select">
+        <select name="progress_mode" aria-label="Progress mode">
+            <option
+                value="PG"
+                {% if readthrough.progress_mode == 'PG' %}selected{% endif %}>
+                    {% trans "pages" %}
+            </option>
+            <option
+                value="PCT"
+                {% if readthrough.progress_mode == 'PCT' %}selected{% endif %}>
+                    {% trans "percent" %}
+            </option>
+        </select>
+    </div>
+</div>

bookwyrm/templates/snippets/reading_modals/finish_reading_modal.html

@@ -11,6 +11,7 @@ Finish "<em>{{ book_title }}</em>"
 {% block modal-form-open %}
 <form name="finish-reading" action="{% url 'reading-status' 'finish' book.id %}" method="post" class="submit-status">
 {% csrf_token %}
+<input type="hidden" name="id" value="{{ readthrough.id }}">
 <input type="hidden" name="reading_status" value="read">
 {% endblock %}
 

bookwyrm/templates/snippets/reading_modals/form.html

@@ -5,12 +5,13 @@
 
 {% block content_label %}
 {% trans "Comment:" %}
+{% if optional %}
 <span class="help mt-0 has-text-weight-normal">{% trans "(Optional)" %}</span>
+{% endif %}
 {% endblock %}
 
 {% block initial_fields %}
 <input type="hidden" name="user" value="{{ request.user.id }}">
 <input type="hidden" name="mention_books" value="{{ book.id }}">
 <input type="hidden" name="book" value="{{ book.id }}">
-<input type="hidden" name="id" value="{{ readthrough.id }}">
 {% endblock %}

bookwyrm/templates/snippets/reading_modals/layout.html

@@ -13,14 +13,18 @@
         {% trans "Post to feed" %}
     </label>
     <div class="is-hidden" id="hide_reading_content_{{ local_uuid }}_{{ uuid }}">
-        <button class="button is-link" type="submit">{% trans "Save" %}</button>
+        <button class="button is-link" type="submit">
+            <span class="icon icon-spinner" aria-hidden="true"></span>
+            <span>{% trans "Save" %}</span>
+        </button>
     </div>
 </div>
 
 <div id="reading_content_{{ local_uuid }}_{{ uuid }}">
     <hr aria-hidden="true">
     <fieldset id="reading_content_fieldset_{{ local_uuid }}_{{ uuid }}">
-        {% include "snippets/reading_modals/form.html" with optional=True %}
+        {% comparison_bool controls_text "progress_update" True as optional %}
+        {% include "snippets/reading_modals/form.html" with optional=optional %}
     </fieldset>
 </div>
 {% endwith %}

bookwyrm/templates/snippets/reading_modals/progress_update_modal.html

@@ -1,4 +1,4 @@
-{% extends 'components/modal.html' %}
+{% extends 'snippets/reading_modals/layout.html' %}
 {% load i18n %}
 
 {% block modal-title %}
@@ -6,42 +6,12 @@
 {% endblock %}
 
 {% block modal-form-open %}
-<form action="{% url 'edit-readthrough' %}" method="POST" class="submit-status">
-{% endblock %}
-
-{% block modal-body %}
+<form name="reading-progress" action="{% url 'reading-status-update' book.id %}" method="POST" class="submit-status">
 {% csrf_token %}
-<input type="hidden" name="id" value="{{ readthrough.id }}"/>
-<div class="field">
-    <label class="label is-align-self-center mb-0 pr-2" for="progress">{% trans "Progress:" %}</label>
-    <div class="field has-addons mb-0">
-        <div class="control">
-            <input
-                aria-label="{% if readthrough.progress_mode == 'PG' %}Current page{% else %}Percent read{% endif %}"
-                class="input"
-                type="number"
-                min="0"
-                name="progress"
-                size="3"
-                value="{{ readthrough.progress|default:'' }}"
-            >
-        </div>
-        <div class="control select">
-            <select name="progress_mode" aria-label="Progress mode">
-                <option value="PG" {% if readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
-                <option value="PCT" {% if readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
-            </select>
-        </div>
-    </div>
-    {% if readthrough.progress_mode == 'PG' and book.pages %}
-    <p class="help">{% blocktrans with pages=book.pages %}of {{ pages }} pages{% endblocktrans %}</p>
-    {% endif %}
-</div>
+<input type="hidden" name="id" value="{{ readthrough.id }}">
 {% endblock %}
 
-{% block modal-footer %}
-<button class="button is-success" type="submit">{% trans "Save" %}</button>
-{% trans "Cancel" as button_text %}
-{% include 'snippets/toggle/toggle_button.html' with text=button_text %}
+{% block reading-dates %}
+<label for="id_progress_{{ readthrough.id }}" class="label">{% trans "Progress:" %}</label>
+{% include "snippets/progress_field.html" with progress_required=True %}
 {% endblock %}
-{% block modal-form-close %}</form>{% endblock %}

bookwyrm/templates/snippets/readthrough_form.html

@@ -13,17 +13,7 @@
 <label class="label" for="id_progress_{{ readthrough.id }}">
     {% trans "Progress" %}
 </label>
-<div class="field has-addons">
-    <div class="control">
-        <input type="number" name="progress" class="input" id="id_progress_{{ readthrough.id }}" value="{{ readthrough.progress }}">
-    </div>
-    <div class="control select">
-        <select name="progress_mode" aria-label="Progress mode">
-            <option value="PG" {% if readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
-            <option value="PCT" {% if readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
-        </select>
-    </div>
-</div>
+{% include "snippets/progress_field.html" %}
 {% endif %}
 <div class="field">
     <label class="label" for="id_finish_date_{{ readthrough.id }}">

bookwyrm/templates/snippets/shelve_button/shelve_button.html

@@ -25,7 +25,7 @@
 
 {% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book controls_text="finish_reading" controls_uid=uuid readthrough=readthrough %}
 
-{% include 'snippets/reading_modals/progress_update_modal.html' with book=active_shelf_book.book controls_text="progress_update" controls_uid=uuid readthrough=readthrough %}
+{% include 'snippets/reading_modals/progress_update_modal.html' with book=active_shelf.book controls_text="progress_update" controls_uid=uuid readthrough=readthrough %}
 
 {% endwith %}
 {% endif %}