Adds confirm modal for loading data

bookwyrm/static/css/fonts/icomoon.svg

@@ -46,4 +46,5 @@
 <glyph unicode="&#xe9d9;" glyph-name="star-full" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538z" />
 <glyph unicode="&#xe9da;" glyph-name="heart" d="M755.188 896c-107.63 0-200.258-87.554-243.164-179-42.938 91.444-135.578 179-243.216 179-148.382 0-268.808-120.44-268.808-268.832 0-301.846 304.5-380.994 512.022-679.418 196.154 296.576 511.978 387.206 511.978 679.418 0 148.392-120.43 268.832-268.812 268.832z" />
 <glyph unicode="&#xea0a;" glyph-name="plus" d="M992 576h-352v352c0 17.672-14.328 32-32 32h-192c-17.672 0-32-14.328-32-32v-352h-352c-17.672 0-32-14.328-32-32v-192c0-17.672 14.328-32 32-32h352v-352c0-17.672 14.328-32 32-32h192c17.672 0 32 14.328 32 32v352h352c17.672 0 32 14.328 32 32v192c0 17.672-14.328 32-32 32z" />
+<glyph unicode="&#xea36;" glyph-name="download" d="M512-32l480 480h-288v512h-384v-512h-288z" />
 </font></defs></svg>

bookwyrm/static/css/vendor/icons.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?36x4a3');
-  src:  url('../fonts/icomoon.eot?36x4a3#iefix') format('embedded-opentype'),
-    url('../fonts/icomoon.ttf?36x4a3') format('truetype'),
-    url('../fonts/icomoon.woff?36x4a3') format('woff'),
-    url('../fonts/icomoon.svg?36x4a3#icomoon') format('svg');
+  src:  url('../fonts/icomoon.eot?r7jc98');
+  src:  url('../fonts/icomoon.eot?r7jc98#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.ttf?r7jc98') format('truetype'),
+    url('../fonts/icomoon.woff?r7jc98') format('woff'),
+    url('../fonts/icomoon.svg?r7jc98#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -142,3 +142,6 @@
 .icon-spinner:before {
   content: "\e97a";
 }
+.icon-download:before {
+  content: "\ea36";
+}

bookwyrm/templates/author/author.html

@@ -70,63 +70,65 @@
             <h2 class="title is-4">{% trans "External links" %}</h2>
             <div class="box">
                 {% if author.wikipedia_link %}
-                <p>
+                <div>
                     <a itemprop="sameAs" href="{{ author.wikipedia_link }}" rel="noopener" target="_blank">
                         {% trans "Wikipedia" %}
                     </a>
-                </p>
+                </div>
                 {% endif %}
 
                 {% if author.isni %}
-                <p>
+                <div class="mt-1">
                     <a itemprop="sameAs" href="{{ author.isni_link }}" rel="noopener" target="_blank">
                         {% trans "View ISNI record" %}
                     </a>
-                </p>
+                </div>
                 {% endif %}
 
+                {% trans "Load data" as button_text %}
                 {% if author.openlibrary_key %}
-                <p>
-                    <a itemprop="sameAs" href="{{ author.openlibrary_link }}" target="_blank" rel="noopener">
+                <div class="mt-1 is-flex">
+                    <a class="mr-3" itemprop="sameAs" href="{{ author.openlibrary_link }}" target="_blank" rel="noopener">
                         {% trans "View on OpenLibrary" %}
                     </a>
                     {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
-                    <form name="ol-update" method="POST" action="{% url 'author-update-remote' author.id 'openlibrary.org' %}">
-                        {% csrf_token %}
-                        <button class="button is-small" type="submit">{% trans "Update from OpenLibrary" %}</button>
-                    </form>
+                    {% with controls_text="ol_sync" controls_uid=author.id %}
+                        {% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_ol_sync" class="is-small" icon_with_text="download" %}
+                        {% include "author/sync_modal.html" with source="opnlibrary.org" source_name="OpenLibrary" %}
+                    {% endwith %}
                     {% endif %}
-                </p>
+                </div>
                 {% endif %}
 
                 {% if author.inventaire_id %}
-                <p>
-                    <a itemprop="sameAs" href="{{ author.inventaire_link }}" target="_blank" rel="noopener">
+                <div class="mt-1 is-flex">
+                    <a class="mr-3" itemprop="sameAs" href="{{ author.inventaire_link }}" target="_blank" rel="noopener">
                         {% trans "View on Inventaire" %}
                     </a>
+
                     {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
-                    <form name="ol-update" method="POST" action="{% url 'author-update-remote' author.id 'inventaire.io' %}">
-                        {% csrf_token %}
-                        <button class="button is-small" type="submit">{% trans "Update from Inventaire" %}</button>
-                    </form>
+                    {% with controls_text="iv_sync" controls_uid=author.id %}
+                        {% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_iv_sync" class="is-small" icon_with_text="download" %}
+                        {% include "author/sync_modal.html" with source="inventaire.io" source_name="Inventaire" %}
+                    {% endwith %}
                     {% endif %}
-                </p>
+                </div>
                 {% endif %}
 
                 {% if author.librarything_key %}
-                <p>
+                <div class="mt-1">
                     <a itemprop="sameAs" href="https://www.librarything.com/author/{{ author.librarything_key }}" target="_blank" rel="noopener">
                         {% trans "View on LibraryThing" %}
                     </a>
-                </p>
+                </div>
                 {% endif %}
 
                 {% if author.goodreads_key %}
-                <p>
+                <div>
                     <a itemprop="sameAs" href="https://www.goodreads.com/author/show/{{ author.goodreads_key }}" target="_blank" rel="noopener">
                         {% trans "View on Goodreads" %}
                     </a>
-                </p>
+                </div>
                 {% endif %}
             </div>
         </section>

bookwyrm/templates/author/sync_modal.html

@@ -0,0 +1,30 @@
+{% extends 'components/modal.html' %}
+{% load i18n %}
+
+{% block modal-title %}
+{% trans "Load data" %}
+{% endblock %}
+
+{% block modal-form-open %}
+<form name="{{ source }}-update" method="POST" action="{% url 'author-update-remote' author.id source %}">
+    {% csrf_token %}
+{% endblock %}
+
+{% block modal-body %}
+<p>
+    {% blocktrans trimmed %}
+    Loading data will connect to <strong>{{ source_name }}</strong> and check for any metadata about this author which aren't present here. Existing metadata will not be overwritten.
+    {% endblocktrans %}
+</p>
+{% endblock %}
+
+{% block modal-footer %}
+<button class="button is-primary" type="submit">
+    <span>{% trans "Confirm" %}</span>
+</button>
+
+{% trans "Cancel" as button_text %}
+{% include 'snippets/toggle/toggle_button.html' with text=button_text %}
+{% endblock %}
+
+{% block modal-form-close %}</form>{% endblock %}