From 73c1b5a1ffe53758a2976e996a57ff5ba57c3e5f Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sun, 17 Jan 2021 11:09:49 -0800
Subject: [PATCH] Component for dropdowns

also use hoverable dropdowns
---
 bookwyrm/templates/layout.html                |  2 +-
 .../snippets/components/dropdown.html         | 13 ++++
 .../templates/snippets/shelf_selector.html    | 65 +++++++++----------
 .../templates/snippets/shelve_button.html     |  5 +-
 bookwyrm/templates/snippets/status_body.html  | 20 +-----
 .../templates/snippets/status_options.html    | 18 +++++
 6 files changed, 64 insertions(+), 59 deletions(-)
 create mode 100644 bookwyrm/templates/snippets/components/dropdown.html
 create mode 100644 bookwyrm/templates/snippets/status_options.html

diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index 19ecc878e..212330b5e 100644
--- a/bookwyrm/templates/layout.html
+++ b/bookwyrm/templates/layout.html
@@ -51,7 +51,7 @@
     </div>
 
     <input class="toggle-control" type="checkbox" id="main-nav">
-    <div id="mainNav" class="navbar-menu toggle-content">
+    <div id="mainNav" class="navbar-menu">
         <div class="navbar-start">
             {% if request.user.is_authenticated %}
             <a href="/user/{{ request.user.localname }}/shelves" class="navbar-item">
diff --git a/bookwyrm/templates/snippets/components/dropdown.html b/bookwyrm/templates/snippets/components/dropdown.html
new file mode 100644
index 000000000..54714dcb6
--- /dev/null
+++ b/bookwyrm/templates/snippets/components/dropdown.html
@@ -0,0 +1,13 @@
+<div class="dropdown is-hoverable {% if right %}is-right{% endif %}">
+    <div class="dropdown-trigger">
+        <button type="button" class="button pulldown-menu {{ class }}" aria-expanded="false" class="pulldown-menu" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
+            {% block dropdown-trigger %}{% endblock %}
+        </button>
+    </div>
+    <div class="dropdown-menu" id="shelf-select-{{ book.id }}" role="menu">
+        <ul class="dropdown-content">
+            {% block dropdown-list %}{% endblock %}
+        </ul>
+    </div>
+</div>
+
diff --git a/bookwyrm/templates/snippets/shelf_selector.html b/bookwyrm/templates/snippets/shelf_selector.html
index 1946b1229..200f11397 100644
--- a/bookwyrm/templates/snippets/shelf_selector.html
+++ b/bookwyrm/templates/snippets/shelf_selector.html
@@ -1,36 +1,29 @@
-<div class="dropdown">
-    <div class="dropdown-trigger">
-        <label for="shelf-select-dropdown-{{ book.id }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
-            <div class="button">
-                <span>Change shelf</span>
-                <span class="icon icon-arrow-down" aria-hidden="true"></span>
-            </div>
-        </label>
-    </div>
-    <input type="checkbox" class="toggle-control" id="shelf-select-dropdown-{{ book.id }}-toggle">
-    <div class="dropdown-menu toggle-content hidden" id="shelf-select-{{ book.id }}" role="menu">
-        <ul class="dropdown-content">
-            {% for shelf in request.user.shelf_set.all %}
-            {% if shelf.identifier != current.identifier %}
-            <li role="menuitem">
-                <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
-                    {% csrf_token %}
-                    <input type="hidden" name="book" value="{{ book.id }}">
-                    <input type="hidden" name="shelf" value="{{ shelf.identifier }}">
-                    <button class="button is-small" type="submit">{{ shelf.name }}</button>
-                </form>
-            </li>
-            {% endif %}
-            {% endfor %}
-            <hr class="navbar-divider">
-            <li>
-                <form class="dropdown-item pt-0 pb-0" name="shelve" action="/unshelve/" method="post">
-                    {% csrf_token %}
-                    <input type="hidden" name="book" value="{{ book.id }}">
-                    <input type="hidden" name="shelf" value="{{ current.id }}">
-                    <button class="button is-small is-danger is-light" type="submit">Unshelve</button>
-                </form>
-            </li>
-        </ul>
-    </div>
-</div>
+{% extends 'snippets/components/dropdown.html' %}
+{% block dropdown-trigger %}
+<span>Change shelf</span>
+<span class="icon icon-arrow-down" aria-hidden="true"></span>
+{% endblock %}
+
+{% block dropdown-list %}
+{% for shelf in request.user.shelf_set.all %}
+{% if shelf.identifier != current.identifier %}
+<li role="menuitem">
+    <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
+        {% csrf_token %}
+        <input type="hidden" name="book" value="{{ book.id }}">
+        <input type="hidden" name="shelf" value="{{ shelf.identifier }}">
+        <button class="button is-small" type="submit">{{ shelf.name }}</button>
+    </form>
+</li>
+{% endif %}
+{% endfor %}
+<hr class="navbar-divider">
+<li>
+    <form class="dropdown-item pt-0 pb-0" name="shelve" action="/unshelve/" method="post">
+        {% csrf_token %}
+        <input type="hidden" name="book" value="{{ book.id }}">
+        <input type="hidden" name="shelf" value="{{ current.id }}">
+        <button class="button is-small is-danger is-light" type="submit">Unshelve</button>
+    </form>
+</li>
+{% endblock %}
diff --git a/bookwyrm/templates/snippets/shelve_button.html b/bookwyrm/templates/snippets/shelve_button.html
index 35b860c64..5f22dd295 100644
--- a/bookwyrm/templates/snippets/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button.html
@@ -27,7 +27,7 @@
         {% endif %}
     </div>
 
-    <div class="dropdown control">
+    <div class="dropdown control is-hoverable">
         <div class="dropdown-trigger">
             <label for="shelf-select-dropdown-{{ uuid }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ uuid }}">
                 <div class="button is-small">
@@ -35,8 +35,7 @@
                 </div>
             </label>
         </div>
-        <input type="checkbox" class="toggle-control" id="shelf-select-dropdown-{{ uuid }}-toggle">
-        <div class="dropdown-menu toggle-content hidden" id="shelf-select-{{ uuid }}" role="menu">
+        <div class="dropdown-menu" id="shelf-select-{{ uuid }}" role="menu">
             <ul class="dropdown-content">
                 {% for shelf in request.user.shelf_set.all %}
                 <li role="menuitem">
diff --git a/bookwyrm/templates/snippets/status_body.html b/bookwyrm/templates/snippets/status_body.html
index aee29ba1b..59ab234dd 100644
--- a/bookwyrm/templates/snippets/status_body.html
+++ b/bookwyrm/templates/snippets/status_body.html
@@ -56,7 +56,7 @@
 </div>
 {% if status.user == request.user %}
 <div class="card-footer-item">
-    {% include 'snippets/toggle/toggle_button.html' with controls_text="more-info" controls_uid=status.id text="More options" icon="dots-three" class="is-small" %}
+    {% include 'snippets/status_options.html' with class="is-small" right=True %}
 </div>
 {% endif %}
 {% endblock %}
@@ -74,22 +74,4 @@
 </section>
 {% endwith %}
 {% endif %}
-
-{% if status.user == request.user %}
-<section>
-    <input class="toggle-control" type="checkbox" name="more-info-{{ status.id }}" id="more-info-{{ status.id }}">
-    <div class="toggle-content hidden card-footer">
-        {% if status.user == request.user %}
-        <div class="card-footer-item">
-            <form name="delete-{{status.id}}" action="/delete-status/{{ status.id }}" method="post">
-                {% csrf_token %}
-                <button class="button is-danger is-light" type="submit">
-                    Delete post
-                </button>
-            </form>
-        </div>
-        {% endif %}
-    </div>
-</section>
-{% endif %}
 {% endblock %}
diff --git a/bookwyrm/templates/snippets/status_options.html b/bookwyrm/templates/snippets/status_options.html
new file mode 100644
index 000000000..5a9036be3
--- /dev/null
+++ b/bookwyrm/templates/snippets/status_options.html
@@ -0,0 +1,18 @@
+{% extends 'snippets/components/dropdown.html' %}
+
+{% block dropdown-trigger %}
+<span class="icon icon-dots-three">
+    <span class="is-sr-only">More options</span>
+</span>
+{% endblock %}
+
+{% block dropdown-list %}
+<li role="menuitem">
+    <form class="dropdown-item pt-0 pb-0" name="delete-{{status.id}}" action="/delete-status/{{ status.id }}" method="post">
+        {% csrf_token %}
+        <button class="button is-danger is-light" type="submit">
+            Delete post
+        </button>
+    </form>
+</li>
+{% endblock %}