Merge pull request #574 from mouse-reeve/shelve-buttons

Shelve buttons

bookwyrm/static/css/format.css

@@ -13,6 +13,13 @@
     overflow: hidden;
 }
 
+/* --- SHELVING --- */
+.shelf-option:disabled > *::after {
+    font-family: "icomoon";
+    content: "\e918";
+    margin-left: 0.5em;
+}
+
 /* --- TOGGLES --- */
 .toggle-button[aria-pressed=true], .toggle-button[aria-pressed=true]:hover {
     background-color: hsl(171, 100%, 41%);

bookwyrm/templates/book.html

@@ -35,7 +35,7 @@
         <div class="column is-narrow">
             {% include 'snippets/book_cover.html' with book=book size=large %}
             {% include 'snippets/rate_action.html' with user=request.user book=book %}
-            {% include 'snippets/shelve_button.html' %}
+            {% include 'snippets/shelve_button/shelve_button.html' %}
 
             {% if request.user.is_authenticated and not book.cover %}
             <div class="box p-2">

bookwyrm/templates/components/modal.html

@@ -8,15 +8,17 @@
             {% include 'snippets/toggle/toggle_button.html' with label="close" class="delete" nonbutton=True %}
         </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>
-    <label class="modal-close is-large" for="{{ controls_text }}-{{ readthrough.id }}" aria-label="close"></label>
+    <label class="modal-close is-large" for="{{ controls_text }}-{{ controls_uid }}" aria-label="close"></label>
     {% include 'snippets/toggle/toggle_button.html' with label="close" class="modal-close is-large" nonbutton=True %}
 </div>
 

bookwyrm/templates/feed/feed_layout.html

@@ -48,7 +48,7 @@
                 </div>
             </div>
             <div class="card-content">
-                {% include 'snippets/shelve_button.html' with book=book %}
+                {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
                 {% active_shelf book as active_shelf %}
                 {% if active_shelf.shelf.identifier == 'reading' and book.latest_readthrough %}
                 {% include 'snippets/progress_update.html' with readthrough=book.latest_readthrough %}

bookwyrm/templates/snippets/book_preview.html

@@ -3,7 +3,7 @@
     <div class="column is-narrow">
         <div>
             <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book %}</a>
-            {% include 'snippets/shelve_button.html' with book=book %}
+            {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
         </div>
     </div>
     <div class="column">

bookwyrm/templates/snippets/book_tiles.html

@@ -5,7 +5,7 @@
             <a href="/book/{{ book.id }}">
                 {% include 'snippets/book_cover.html' with book=book %}
             </a>
-            {% include 'snippets/shelve_button.html' with book=book switch_mode=True %}
+            {% include 'snippets/shelve_button/shelve_button.html' with book=book switch_mode=True %}
         </div>
     </div>
     {% endfor %}

bookwyrm/templates/snippets/shelve_button.html

@@ -1,40 +0,0 @@
-{% load bookwyrm_tags %}
-{% if request.user.is_authenticated %}
-
-{% with book.id|uuid as uuid %}
-{% active_shelf book as active_shelf %}
-<div class="field has-addons">
-    {% if switch_mode and active_shelf.book != book %}
-    <div class="control">
-        {% include 'snippets/switch_edition_button.html' with edition=book size='is-small' %}
-    </div>
-    {% else %}
-    <div class="control">
-        {% if active_shelf.shelf.identifier == 'read' %}
-        <button class="button is-small" disabled>
-            <span>Read</span> <span class="icon icon-check"></span>
-        </button>
-        {% elif active_shelf.shelf.identifier == 'reading' %}
-        {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="I'm done!" controls_text="finish-reading" controls_uid=uuid focus="modal-title-finish-reading" %}
-        {% elif active_shelf.shelf.identifier == 'to-read' %}
-        {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Start reading" controls_text="start-reading" controls_uid=uuid focus="modal-title-start-reading" %}
-        {% else %}
-        <form name="shelve" action="/shelve/" method="post">
-            {% csrf_token %}
-            <input type="hidden" name="book" value="{{ active_shelf.book.id }}">
-            <input type="hidden" name="shelf" value="to-read">
-            <button class="button is-small" type="submit">Want to read</button>
-        </form>
-        {% endif %}
-    </div>
-    {% include 'snippets/shelve_button_dropdown.html' with class="is-small" button_uuid=uuid%}
-    {% endif %}
-</div>
-
-{% include 'snippets/start_reading_modal.html' with book=active_shelf.book controls_text="start-reading" controls_uid=uuid %}
-
-{% latest_read_through book request.user as readthrough %}
-{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book controls_text="finish-reading" controls_uid=uuid readthrough=readthrough %}
-
-{% endwith %}
-{% endif %}

bookwyrm/templates/snippets/shelve_button/shelve_button.html

@@ -0,0 +1,27 @@
+{% load bookwyrm_tags %}
+{% if request.user.is_authenticated %}
+
+{% with book.id|uuid as uuid %}
+{% active_shelf book as active_shelf %}
+<div class="field has-addons">
+    {% if switch_mode and active_shelf.book != book %}
+    <div class="control">
+        {% include 'snippets/switch_edition_button.html' with edition=book size='is-small' %}
+    </div>
+    {% else %}
+    <div class="control">
+        {% include 'snippets/shelve_button/shelve_button_options.html' with class="shelf-option is-small" shelves=request.user.shelf_set.all active_shelf=active_shelf button_uuid=uuid %}
+    </div>
+    {% include 'snippets/shelve_button/shelve_button_dropdown.html' with class="is-small" button_uuid=uuid%}
+    {% endif %}
+</div>
+
+{% include 'snippets/shelve_button/want_to_read_modal.html' with book=active_shelf.book controls_text="want-to-read" controls_uid=uuid no_body=True %}
+
+{% include 'snippets/shelve_button/start_reading_modal.html' with book=active_shelf.book controls_text="start-reading" controls_uid=uuid %}
+
+{% latest_read_through book request.user as readthrough %}
+{% include 'snippets/shelve_button/finish_reading_modal.html' with book=active_shelf.book controls_text="finish-reading" controls_uid=uuid readthrough=readthrough %}
+
+{% endwith %}
+{% endif %}

bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown.html

@@ -0,0 +1,10 @@
+{% extends 'components/dropdown.html' %}
+{% block dropdown-trigger %}
+<span class="icon icon-arrow-down">
+    <span class="is-sr-only">More shelves</span>
+</span>
+{% endblock %}
+
+{% block dropdown-list %}
+{% include 'snippets/shelve_button/shelve_button_options.html' with active_shelf=active_shelf shelves=request.user.shelf_set.all dropdown=True class="shelf-option is-fullwidth is-small" %}
+{% endblock %}

bookwyrm/templates/snippets/shelve_button/shelve_button_options.html

@@ -0,0 +1,25 @@
+{% load bookwyrm_tags %}
+{% for shelf in shelves %}
+{% comparison_bool shelf.identifier active_shelf.shelf.identifier as is_current %}
+{% if dropdown %}<li role="menuitem">{% endif %}
+    <div class="{% if dropdown %}dropdown-item pt-0 pb-0{% elif active_shelf.shelf.identifier|next_shelf != shelf.identifier %}hidden{% endif %}">
+    {% if shelf.identifier == 'reading' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
+        {% include 'snippets/toggle/toggle_button.html' with class=class text="Start reading" controls_text="start-reading" controls_uid=button_uuid focus="modal-title-start-reading" disabled=is_current %}
+    {% endif %}{% elif shelf.identifier == 'read' and active_shelf.shelf.identifier == 'read' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
+    <button type="button" class="button {{ class }}" disabled><span>Read</span>
+    {% endif %}{% elif shelf.identifier == 'read' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
+        {% include 'snippets/toggle/toggle_button.html' with class=class text="Finish reading" controls_text="finish-reading" controls_uid=button_uuid focus="modal-title-finish-reading" disabled=is_current %}
+    {% endif %}{% elif shelf.identifier == 'to-read' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
+        {% include 'snippets/toggle/toggle_button.html' with class=class text="Want to read" controls_text="want-to-read" controls_uid=button_uuid focus="modal-title-want-to-read" disabled=is_current %}
+    {% endif %}{% elif shelf.editable %}
+        <form name="shelve" action="/shelve/" method="post">
+            {% csrf_token %}
+            <input type="hidden" name="book" value="{{ active_shelf.book.id }}">
+            <button class="button {{ class }}" name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>
+                <span>{{ shelf.name }}</span>
+            </button>
+        </form>
+    {% endif %}
+    </div>
+{% if dropdown %}</li>{% endif %}
+{% endfor %}

bookwyrm/templates/snippets/shelve_button/want_to_read_modal.html

@@ -0,0 +1,31 @@
+{% extends 'components/modal.html' %}
+
+{% block modal-title %}
+Want to Read "<em>{{ book.title }}</em>"
+{% endblock %}
+
+{% block modal-form-open %}
+<form name="shelve" action="/shelve/" method="post">
+    {% csrf_token %}
+    <input type="hidden" name="book" value="{{ active_shelf.book.id }}">
+    <input type="hidden" name="shelf" value="to-read">
+{% endblock %}
+
+{% block modal-footer %}
+<div class="columns">
+    <div class="column field">
+        <label for="post_status_want-{{ uuid }}">
+            <input type="checkbox" name="post-status" class="checkbox" id="post_status_want-{{ uuid }}" checked>
+            Post to feed
+        </label>
+        {% include 'snippets/privacy_select.html' %}
+    </div>
+    <div class="column">
+        <button class="button is-success" type="submit">
+            <span>Want to read</span>
+        </button>
+        {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="want-to-read" controls_uid=uuid %}
+    </div>
+</div>
+{% endblock %}
+{% block modal-form-close %}</form>{% endblock %}

bookwyrm/templates/snippets/shelve_button_dropdown.html

@@ -1,28 +0,0 @@
-{% extends 'components/dropdown.html' %}
-{% block dropdown-trigger %}
-<span class="icon icon-arrow-down">
-    <span class="is-sr-only">More shelves</span>
-</span>
-{% endblock %}
-
-{% block dropdown-list %}
-{% for shelf in request.user.shelf_set.all %}
-<li role="menuitem">
-    {% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
-    <div class="dropdown-item pt-0 pb-0">
-        {% include 'snippets/toggle/toggle_button.html' with class="is-fullwidth is-small" text="Start reading" controls_text="start-reading" controls_uid=button_uuid focus="modal-title-start-reading" %}
-    </div>
-    {% else %}
-    <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
-        {% csrf_token %}
-        <input type="hidden" name="book" value="{{ active_shelf.book.id }}">
-        <button class="button is-fullwidth is-small" name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>
-            <span>{{ shelf.name }}</span>
-            {% if shelf in book.shelf_set.all %}<span class="icon icon-check"></span>{% endif %}
-        </button>
-    </form>
-    {% endif %}
-</li>
-{% endfor %}
-{% endblock %}
-

bookwyrm/templates/snippets/toggle/toggle_button.html

@@ -6,6 +6,7 @@
     {% if checkbox %}data-controls-checkbox="{{ checkbox }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
     {% if label %}aria-label="{{ label }}"{% endif %}
     aria-pressed="{% if pressed %}true{% else %}false{% endif %}"
+    {% if disabled %}disabled{% endif %}
     >
 
     {% if icon %}
@@ -13,6 +14,6 @@
         <span class="is-sr-only">{{ text }}</span>
     </span>
     {% else %}
-    {{ text }}
+    <span>{{ text }}</span>
     {% endif %}
 </button>

bookwyrm/templatetags/bookwyrm_tags.py

@@ -171,6 +171,17 @@ def get_status_preview_name(obj):
         return '%s from <em>%s</em>' % (name, obj.book.title)
     return name
 
+@register.filter(name='next_shelf')
+def get_next_shelf(current_shelf):
+    ''' shelf you'd use to update reading progress '''
+    if current_shelf == 'to-read':
+        return 'reading'
+    if current_shelf == 'reading':
+        return 'read'
+    if current_shelf == 'read':
+        return 'read'
+    return 'to-read'
+
 @register.simple_tag(takes_context=False)
 def related_status(notification):
     ''' for notifications '''
@@ -211,3 +222,9 @@ def active_read_through(book, user):
         book=book,
         finish_date__isnull=True
     ).order_by('-start_date').first()
+
+
+@register.simple_tag(takes_context=False)
+def comparison_bool(str1, str2):
+    ''' idk why I need to write a tag for this, it reutrns a bool '''
+    return str1 == str2

bookwyrm/views/shelf.py

@@ -124,6 +124,8 @@ def shelve(request):
         identifier=request.POST.get('shelf'),
         user=request.user
     ).first()
+    if not desired_shelf:
+        return HttpResponseNotFound()
 
     if request.POST.get('reshelve', True):
         try:
@@ -139,12 +141,14 @@ def shelve(request):
         book=book, shelf=desired_shelf, user=request.user)
 
     # post about "want to read" shelves
-    if desired_shelf.identifier == 'to-read':
+    if desired_shelf.identifier == 'to-read' and \
+            request.POST.get('post-status'):
+        privacy = request.POST.get('privacy') or desired_shelf.privacy
         handle_reading_status(
             request.user,
             desired_shelf,
             book,
-            privacy=desired_shelf.privacy,
+            privacy=privacy
         )
 
     return redirect('/')