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

Add a CSS class to photo cards for selection state.

Browse source 
Planning on adding some rules to make selected cards
stand out in some way, or at least have that possibility.
This commit is contained in:
voussoir 2018-10-20 02:32:33 -07:00
parent 9964cf987b
commit 70d0e64309
2 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontends/etiquette_flask/static/js/photo_clipboard.js
View file

@ -62,13 +62,16 @@ function apply_check(photo_card)
whether the clipboard contains this card's ID. whether the clipboard contains this card's ID.
*/ */
var checkbox = photo_card.getElementsByClassName("photo_card_selector_checkbox")[0]; var checkbox = photo_card.getElementsByClassName("photo_card_selector_checkbox")[0];
if (photo_clipboard.clipboard.has(photo_card.dataset.id)) checkbox.checked = photo_clipboard.clipboard.has(photo_card.dataset.id);
if (checkbox.checked)
{ {
checkbox.checked = true; photo_card.classList.remove("photo_card_unselected");
photo_card.classList.add("photo_card_selected");
} }
else else
{ {
checkbox.checked = false; photo_card.classList.remove("photo_card_selected");
photo_card.classList.add("photo_card_unselected");
} }
} }

4
frontends/etiquette_flask/templates/photo_card.html
View file

@ -17,7 +17,7 @@
{% macro create_photo_card(photo, view="grid") %} {% macro create_photo_card(photo, view="grid") %}
{% if view == "list" %} {% if view == "list" %}
<div class="photo_card photo_card_list" data-id="{{photo.id}}"> <div class="photo_card photo_card_list photo_card_unselected" data-id="{{photo.id}}">
<input type="checkbox" class="photo_card_selector_checkbox" onclick="photo_clipboard.on_photo_select(event)"/> <input type="checkbox" class="photo_card_selector_checkbox" onclick="photo_clipboard.on_photo_select(event)"/>
<span class="photo_card_filename"><a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a></span> <span class="photo_card_filename"><a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a></span>
<a class="photo_card_metadata" target="_blank" href="{{photo|file_link}}">{{photo.bytestring}}</a> <a class="photo_card_metadata" target="_blank" href="{{photo|file_link}}">{{photo.bytestring}}</a>
@ -56,7 +56,7 @@
{% set metadata_inner = "{m}{d}, ".format(m=metadata_inner, d=photo.duration_string) %} {% set metadata_inner = "{m}{d}, ".format(m=metadata_inner, d=photo.duration_string) %}
{% endif -%} {% endif -%}
<div class="photo_card photo_card_grid" data-id="{{photo.id}}"> <div class="photo_card photo_card_grid photo_card_unselected" data-id="{{photo.id}}">
<a class="photo_card_thumbnail" target="_blank" href="/photo/{{photo.id}}"> <a class="photo_card_thumbnail" target="_blank" href="/photo/{{photo.id}}">
<img src="{{thumbnail_src}}"> <img src="{{thumbnail_src}}">
</a> </a>