From aa564b26c8533cb19f389a3ab87d33c632432bba Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 13:02:50 -0800
Subject: [PATCH] Uses snippet for toggle buttons

---
 bookwyrm/templates/book.html                   | 12 ++++++------
 bookwyrm/templates/search_results.html         |  8 ++------
 .../snippets/content_warning_field.html        | 12 ++++++------
 .../templates/snippets/create_status_form.html |  3 +--
 .../snippets/finish_reading_modal.html         |  2 +-
 bookwyrm/templates/snippets/readthrough.html   | 16 ++++------------
 bookwyrm/templates/snippets/reply_form.html    |  5 +----
 bookwyrm/templates/snippets/shelve_button.html | 16 +++++-----------
 .../snippets/start_reading_modal.html          |  2 +-
 bookwyrm/templates/snippets/status_body.html   | 18 +++++-------------
 .../templates/snippets/status_content.html     |  4 ++--
 .../snippets/toggle/toggle_button.html         |  9 +++++++++
 bookwyrm/templates/snippets/trimmed_text.html  |  4 ++--
 13 files changed, 45 insertions(+), 66 deletions(-)
 create mode 100644 bookwyrm/templates/snippets/toggle/toggle_button.html

diff --git a/bookwyrm/templates/book.html b/bookwyrm/templates/book.html
index 35c8dd5fe..240bef171 100644
--- a/bookwyrm/templates/book.html
+++ b/bookwyrm/templates/book.html
@@ -95,14 +95,14 @@
 
                 {% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %}
                 <div>
-                    <input class="toggle-control" type="radio" name="add-description" id="hide-description" checked>
+                    <input class="toggle-control" type="radio" name="add-description" id="hide-description-{{ book.id }}" checked>
                     <div class="toggle-content hidden">
-                        <label class="button" for="add-description" tabindex="0" role="button">Add description</label>
+                        {% include 'snippets/toggle/toggle_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id %}
                     </div>
                 </div>
 
                 <div>
-                    <input class="toggle-control" type="radio" name="add-description" id="add-description">
+                    <input class="toggle-control" type="radio" name="add-description" id="add-description-{{ book.id }}" data-hover-target="id_description">
                     <div class="toggle-content hidden">
                         <div class="box">
                             <form name="add-description" method="POST" action="/add-description/{{ book.id }}">
@@ -113,7 +113,7 @@
                                 </p>
                                 <div class="field">
                                     <button class="button is-primary" type="submit">Save</button>
-                                    <label class="button" for="hide-description" tabindex="0" role="button">Cancel</label>
+                                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-description" controls_uid=book.id %}
                                 </div>
                             </form>
                         </div>
@@ -155,7 +155,7 @@
                 <div>
                     <input type="radio" class="toggle-control" name="add-readthrough-form" id="hide-create-readthrough" checked>
                     <div class="toggle-content hidden">
-                        <label class="button" for="add-readthrough" class="button" role="button" tabindex="0">Add read dates</label>
+                        {% include 'snippets/toggle/toggle_button.html' with text="Add read dates" controls_text="add-readthrough" %}
                     </div>
                 </div>
                 <div>
@@ -165,7 +165,7 @@
                             {% include 'snippets/readthrough_form.html' with readthrough=None %}
                             <div class="field is-grouped">
                                 <button class="button is-primary" type="submit">Create</button>
-                                <label class="button" for="hide-create-readthrough" role="button" tabindex="0">Cancel</label>
+                                {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-create-readthrough" %}
                             </div>
                         </form>
                     </div>
diff --git a/bookwyrm/templates/search_results.html b/bookwyrm/templates/search_results.html
index 46828fb0f..10263f2ef 100644
--- a/bookwyrm/templates/search_results.html
+++ b/bookwyrm/templates/search_results.html
@@ -30,9 +30,7 @@
 
             <input class="toggle-control" type="radio" name="more-results" id="fewer-results" checked>
             <div class="toggle-content hidden">
-                <label class="button is-small" for="more-results">
-                    <div role="button" tabindex="0">Show results from other catalogues</div>
-                </label>
+                {% include 'snippets/toggle/toggle_button.html' with text="Show results from other catalogues" small=True controls_text="more-results" %}
             </div>
         </div>
         {% endif %}
@@ -64,9 +62,7 @@
             {% endif %}
             {% endfor %}
             {% if local_results.results %}
-            <label class="button is-small" for="fewer-results">
-                <div role="button" tabindex="0">Hide results from other catalogues</div>
-            </label>
+            {% include 'snippets/toggle/toggle_button.html' with text="Hide results from other catalogues" small=True controls_text="fewer-results" %}
             {% endif %}
         </div>
     </div>
diff --git a/bookwyrm/templates/snippets/content_warning_field.html b/bookwyrm/templates/snippets/content_warning_field.html
index 9249602af..91bc8ba44 100644
--- a/bookwyrm/templates/snippets/content_warning_field.html
+++ b/bookwyrm/templates/snippets/content_warning_field.html
@@ -2,18 +2,18 @@
 {% with 0|uuid as uuid %}
 <div class="control">
     <div>
-        <input type="radio" class="toggle-control" name="sensitive" value="false" id="hide-spoilers-{{ uuid }}" {% if not parent_status.content_warning %}checked{% endif %}>
+        <input type="radio" class="toggle-control" id="include-spoilers-{{ uuid }}" name="sensitive" value="true" {% if parent_status.content_warning %}checked{% endif %} data-hover-target="id_content_warning_{{ uuid }}">
         <div class="toggle-content hidden">
-            <label class="button is-small" role="button" tabindex="0" for="include-spoilers-{{ uuid }}">Add spoilers/content warning</label>
+            <label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoilers/content warning:</label>
+            <input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning_{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}>
+            {% include 'snippets/toggle/toggle_button.html' with controls_text="hide-spoilers" controls_uid=uuid text="Remove spoilers/content warning" small=True %}
         </div>
     </div>
 
     <div>
-        <input type="radio" class="toggle-control" id="include-spoilers-{{ uuid }}" name="sensitive" value="true" {% if parent_status.content_warning %}checked{% endif %}>
+        <input type="radio" class="toggle-control" name="sensitive" value="false" id="hide-spoilers-{{ uuid }}" {% if not parent_status.content_warning %}checked{% endif %}>
         <div class="toggle-content hidden">
-            <label class="button is-small" role="button" tabindex="0" for="hide-spoilers-{{ uuid }}">Remove spoilers/content warning</label>
-            <label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoilers/content warning:</label>
-            <input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning_{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}>
+            {% include 'snippets/toggle/toggle_button.html' with controls_text="include-spoilers" controls_uid=uuid text="Add spoilers/content warning" small=True %}
         </div>
     </div>
 </div>
diff --git a/bookwyrm/templates/snippets/create_status_form.html b/bookwyrm/templates/snippets/create_status_form.html
index a0c6b817d..88f201162 100644
--- a/bookwyrm/templates/snippets/create_status_form.html
+++ b/bookwyrm/templates/snippets/create_status_form.html
@@ -27,14 +27,13 @@
         </fieldset>
         {% endif %}
 
-        {% include 'snippets/content_warning_field.html' %}
-
         {% if type == 'quote' %}
         <textarea name="quote" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
         {% else %}
         <textarea name="content" class="textarea" id="id_content_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
         {% endif %}
 
+        {% include 'snippets/content_warning_field.html' %}
     </div>
     {% if type == 'quote' %}
     <div class="control">
diff --git a/bookwyrm/templates/snippets/finish_reading_modal.html b/bookwyrm/templates/snippets/finish_reading_modal.html
index d04d508d7..a057b29d8 100644
--- a/bookwyrm/templates/snippets/finish_reading_modal.html
+++ b/bookwyrm/templates/snippets/finish_reading_modal.html
@@ -37,7 +37,7 @@
                         </div>
                         <div class="column">
                             <button type="submit" class="button is-success">Save</button>
-                            <label for="finish-reading-{{ uuid }}" class="button" role="button">Cancel</button>
+                            {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
                         </div>
                     </div>
                 </footer>
diff --git a/bookwyrm/templates/snippets/readthrough.html b/bookwyrm/templates/snippets/readthrough.html
index 682505533..7930b93f0 100644
--- a/bookwyrm/templates/snippets/readthrough.html
+++ b/bookwyrm/templates/snippets/readthrough.html
@@ -17,16 +17,8 @@
             {% endif %}
         </dl>
         <div class="field is-grouped">
-            <label class="button is-small" for="edit-readthrough-{{ readthrough.id }}" role="button" tabindex="0">
-                <span class="icon icon-pencil">
-                    <span class="is-sr-only">Edit read-through dates</span>
-                </span>
-            </label>
-            <label class="button is-small" for="delete-readthrough-{{ readthrough.id }}" role="button" tabindex="0">
-                <span class="icon icon-x">
-                    <span class="is-sr-only">Delete this read-through</span>
-                </span>
-            </label>
+            {% include 'snippets/toggle/toggle_button.html' with small=True text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
+            {% include 'snippets/toggle/toggle_button.html' with small=True text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
         </div>
     </div>
 </div>
@@ -39,7 +31,7 @@
                 {% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
                 <div class="field is-grouped">
                     <button class="button is-primary" type="submit">Save</button>
-                    <label class="button" for="show-readthrough-{{ readthrough.id }}" role="button" tabindex="0">Cancel</label>
+                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="show-readthrough" controls_uid=readthrough.id %}
                 </div>
             </form>
         </div>
@@ -62,7 +54,7 @@
                     <button class="button is-danger is-light" type="submit">
                         Delete
                     </button>
-                    <label for="delete-readthrough-{{ readthrough.id }}" class="button" role="button" tabindex="0">Cancel</button>
+                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="delete-readthrough" controls_uid=readthrough.id %}
                 </form>
             </footer>
         </div>
diff --git a/bookwyrm/templates/snippets/reply_form.html b/bookwyrm/templates/snippets/reply_form.html
index bf1f0259f..cabcb9f7b 100644
--- a/bookwyrm/templates/snippets/reply_form.html
+++ b/bookwyrm/templates/snippets/reply_form.html
@@ -1,16 +1,14 @@
 {% load bookwyrm_tags %}
-{% with status.id|uuid as uuid %}
 <form class="is-flex-grow-1" name="reply" action="/reply" method="post" onsubmit="return reply(event)">
     <div class="columns">
         {% csrf_token %}
         <input type="hidden" name="reply_parent" value="{{ status.id }}">
         <input type="hidden" name="user" value="{{ request.user.id }}">
         <div class="column">
-
-            {% include 'snippets/content_warning_field.html' with parent_status=status %}
             <label for="id_content_{{ status.id }}-{{ uuid }}" class="is-sr-only">Reply</label>
             <div class="field">
                 <textarea class="textarea" name="content" placeholder="Leave a comment..." id="id_content_{{ status.id }}-{{ uuid }}" required="true"></textarea>
+            {% include 'snippets/content_warning_field.html' with parent_status=status %}
             </div>
         </div>
         <div class="column is-narrow">
@@ -25,4 +23,3 @@
         </div>
     </div>
 </form>
-{% endwith %}
diff --git a/bookwyrm/templates/snippets/shelve_button.html b/bookwyrm/templates/snippets/shelve_button.html
index b29d7764a..9723d3a13 100644
--- a/bookwyrm/templates/snippets/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button.html
@@ -13,15 +13,9 @@
         <span>Read</span> <span class="icon icon-check"></span>
     </button>
     {% elif active_shelf.shelf.identifier == 'reading' %}
-    <label class="button is-small" for="finish-reading-{{ uuid }}" role="button" tabindex="0">
-        I'm done!
-    </label>
-    {% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
+    {% include 'snippets/toggle/toggle_button.html' with small=True text="I'm done!" controls_text="finish-reading" controls_uid=uuid %}
     {% elif active_shelf.shelf.identifier == 'to-read' %}
-    <label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0">
-        Start reading
-    </label>
-    {% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
+    {% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
     {% else %}
     <form name="shelve" action="/shelve/" method="post">
         {% csrf_token %}
@@ -46,9 +40,7 @@
                 <li role="menuitem">
                     {% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
                     <div class="dropdown-item pt-0 pb-0">
-                        <label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0">
-                            Start reading
-                        </label>
+                        {% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
                     </div>
                     {% else %}
                     <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
@@ -67,5 +59,7 @@
     </div>
     {% endif %}
 </div>
+{% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
+{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
 {% endwith %}
 {% endif %}
diff --git a/bookwyrm/templates/snippets/start_reading_modal.html b/bookwyrm/templates/snippets/start_reading_modal.html
index 4518af4ff..2e8b7c597 100644
--- a/bookwyrm/templates/snippets/start_reading_modal.html
+++ b/bookwyrm/templates/snippets/start_reading_modal.html
@@ -28,7 +28,7 @@
                         </div>
                         <div class="column">
                             <button class="button is-success" type="submit">Save</button>
-                            <label for="start-reading-{{ uuid }}" class="button" role="button" tabindex="0">Cancel</button>
+                            {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
                         </div>
                     </div>
                 </footer>
diff --git a/bookwyrm/templates/snippets/status_body.html b/bookwyrm/templates/snippets/status_body.html
index b6ec030f1..0f1964649 100644
--- a/bookwyrm/templates/snippets/status_body.html
+++ b/bookwyrm/templates/snippets/status_body.html
@@ -21,13 +21,7 @@
         <div class="card-footer has-background-white-bis">
             <div class="card-footer-item">
                 {% if request.user.is_authenticated %}
-                <label class="button is-small" for="show-comment-{{ status.id }}">
-                    <div role="button" tabindex="0">
-                        <span class="icon icon-comment">
-                            <span class="is-sr-only">Reply</span>
-                        </span>
-                    </div>
-                </label>
+                {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text="Reply" icon='comment' small=True %}
                 {% include 'snippets/boost_button.html' with status=status %}
                 {% include 'snippets/fav_button.html' with status=status %}
 
@@ -57,17 +51,14 @@
             </div>
             {% if status.user == request.user %}
             <div class="card-footer-item">
-                <label class="button is-small" for="more-info-{{ status.id }}">
-                    <div class="icon icon-dots-three">
-                        <span class="is-sr-only">More options</span>
-                    </div>
-                </label>
+                {% include 'snippets/toggle/toggle_button.html' with controls_text="more-info" controls_uid=status.id text="More options" icon="dots-three" small=True %}
             </div>
             {% endif %}
         </div>
 
         {% if request.user.is_authenticated %}
-        <input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}">
+        {% with status.id|uuid as uuid %}
+        <input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}" data-hover-target="id_content_{{ status.id }}-{{ uuid }}">
         <div class="toggle-content hidden">
             <div class="card-footer">
                 <div class="card-footer-item">
@@ -75,6 +66,7 @@
                 </div>
             </div>
         </div>
+        {% endwith %}
         {% endif %}
 
         {% if status.user == request.user %}
diff --git a/bookwyrm/templates/snippets/status_content.html b/bookwyrm/templates/snippets/status_content.html
index 7fe6902ed..aa7d2cb8c 100644
--- a/bookwyrm/templates/snippets/status_content.html
+++ b/bookwyrm/templates/snippets/status_content.html
@@ -14,7 +14,7 @@
         <p>{{ status.content_warning }}</p>
         <input class="toggle-control" type="radio" name="toggle-status-cw-{{ status.id }}" id="hide-status-cw-{{ status.id }}" checked>
         <div class="toggle-content hidden">
-            <label class="button is-small" for="show-status-cw-{{ status.id }}" tabindex="0" role="button">Show More</label>
+            {% include 'snippets/toggle/toggle_button.html' with text="Show More" small=True controls_text="show-status-cw" controls_uid=status.id %}
         </div>
     </div>
 
@@ -22,7 +22,7 @@
     {% endif %}
     <div{% if status.content_warning %} class="toggle-content hidden"{% endif %}>
         {% if status.content_warning %}
-        <label class="button is-small" for="hide-status-cw-{{ status.id }}" tabindex="0" role="button">Show Less</label>
+        {% include 'snippets/toggle/toggle_button.html' with text="Show Less" small=True controls_text="hide-status-cw" controls_uid=status.id %}
         {% endif %}
 
         {% if status.quote %}
diff --git a/bookwyrm/templates/snippets/toggle/toggle_button.html b/bookwyrm/templates/snippets/toggle/toggle_button.html
new file mode 100644
index 000000000..aae21f5c6
--- /dev/null
+++ b/bookwyrm/templates/snippets/toggle/toggle_button.html
@@ -0,0 +1,9 @@
+<label class="{% if class %}{{ class }}{% else %}button{% endif %}{% if small %} is-small{% endif %}" for="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}" tabindex="0" role="button">
+    {% if icon %}
+    <span class="icon icon-{{ icon }}">
+        <span class="is-sr-only">{{ text }}</span>
+    </span>
+    {% else %}
+    {{ text }}
+    {% endif %}
+</label>
diff --git a/bookwyrm/templates/snippets/trimmed_text.html b/bookwyrm/templates/snippets/trimmed_text.html
index c2fab3ff3..069a57e47 100644
--- a/bookwyrm/templates/snippets/trimmed_text.html
+++ b/bookwyrm/templates/snippets/trimmed_text.html
@@ -7,13 +7,13 @@
 <div>
     <input type="radio" name="show-hide-{{ uuid }}" id="show-{{ uuid }}" class="toggle-control" checked>
     <blockquote class="content toggle-content hidden"><span dir="auto">{{ trimmed | to_markdown | safe }}</span>
-        <label class="button is-small" for="hide-{{ uuid }}"><div role="button" tabindex="0">show more</div></label>
+        {% include 'snippets/toggle/toggle_button.html' with text="show more" controls_text="hide" controls_uid=uuid class="has-text-link is-clickable" %}
     </blockquote>
 </div>
 <div>
     <input type="radio" name="show-hide-{{ uuid }}" id="hide-{{ uuid }}" class="toggle-control">
     <blockquote class="content toggle-content hidden"><span dir="auto">{{ full | to_markdown | safe }}</span>
-        <label class="button is-small" for="show-{{ uuid }}"><div role="button" tabindex="0">show less</div></label>
+        {% include 'snippets/toggle/toggle_button.html' with text="show less" controls_text="show" controls_uid=uuid class="has-text-link is-clickable" %}
     </blockquote>
 </div>
 {% else %}