From 30a0715980883038d85599b2b9ed47ca723e3f0e Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Thu, 27 Feb 2020 14:15:13 -0800
Subject: [PATCH] Add photo delete buttons to hovering toolbox.

I tried putting them in the #left but it was looking seriously ugly.
Actually #left is always ugly because the variety of info and buttons
and text alignments. Hover toolbox is not ideal and I don't want it
to become a dumping ground, but deleting should be a rare action and I
don't want it right next to stuff like the basic metadata.
---
 .../etiquette_flask/templates/photo.html      | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index 927b304..22048f4 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -105,7 +105,12 @@
     position: absolute;
     right: 8px;
     top: 8px;
-    background-color: var(--color_theme_primary);
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    /*background-color: var(--color_theme_primary);*/
 }
 
 @media screen and (max-width: 800px)
@@ -204,11 +209,13 @@
         </ul>
         {% endif %}
 
+        <!-- BEFORE & AFTER SEARCH LINKS -->
         <div id="before_after_links">
             <a href="/search?created=-{{photo.created}}">&larr;Before</a>
             <span> | </span>
             <a href="/search?created={{photo.created}}-&orderby=created-asc">After&rarr;</a>
         </div>
+
     </div>
     <div id="message_area"></div>
 </div>
@@ -239,6 +246,25 @@
         {% if photo.simple_mimetype == "video" %}
         <button id="generate_thumbnail_button" class="green_button button_with_spinner" data-onclick="generate_thumbnail_for_video(event)">Capture thumbnail</button>
         {% endif %}
+        <button
+        class="red_button button_with_confirm"
+        data-onclick="api.photos.delete(PHOTO_ID, false, api.photos.callback_go_to_search)"
+        data-prompt="Delete photo, keep file?"
+        data-confirm-class="red_button"
+        data-cancel-class="gray_button"
+        >
+            Remove
+        </button>
+
+        <button
+        class="red_button button_with_confirm"
+        data-onclick="api.photos.delete(PHOTO_ID, true, api.photos.callback_go_to_search)"
+        data-prompt="Delete file on disk?"
+        data-confirm-class="red_button"
+        data-cancel-class="gray_button"
+        >
+            Delete
+        </button>
     </div>
 </div>
 </div>