voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add photo delete buttons to hovering toolbox.

Browse source 
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.
This commit is contained in:
voussoir 2020-02-27 14:15:13 -08:00
parent 45cb96cc5c
commit 30a0715980
1 changed files with 27 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontends/etiquette_flask/templates/photo.html
View file

@ -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>