diff --git a/frontends/etiquette_flask/backend/jinja_filters.py b/frontends/etiquette_flask/backend/jinja_filters.py index a58f800..9dbbb76 100644 --- a/frontends/etiquette_flask/backend/jinja_filters.py +++ b/frontends/etiquette_flask/backend/jinja_filters.py @@ -50,6 +50,12 @@ def file_link(photo, short=False): def islice(gen, start, stop): return itertools.islice(gen, start, stop) +@filter_function +def join_and_trail(l, s): + if not l: + return '' + return s.join(l) + s + @filter_function def timestamp_to_8601(timestamp): return datetime.datetime.utcfromtimestamp(timestamp).isoformat(' ') + ' UTC' diff --git a/frontends/etiquette_flask/static/css/cards.css b/frontends/etiquette_flask/static/css/cards.css index 17a84e7..fcefa69 100644 --- a/frontends/etiquette_flask/static/css/cards.css +++ b/frontends/etiquette_flask/static/css/cards.css @@ -146,9 +146,9 @@ position: relative; display: grid; grid-template: - "checkbox filename metadata" auto - /auto 1fr auto; - + "checkbox filename metadata tags" auto + /auto 1fr auto auto; + grid-column-gap: 4px; margin: 8px; padding: 4px; } diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html index acfd477..4249d23 100644 --- a/frontends/etiquette_flask/templates/album.html +++ b/frontends/etiquette_flask/templates/album.html @@ -64,7 +64,7 @@ h2, h3 {% import "header.html" as header %} - {% import "album_card.html" as album_card %} + {% import "cards.html" as cards %} Albums @@ -85,7 +85,7 @@ h2, h3

Albums

{% for album in albums %} - {{album_card.create_album_card(album, view=view, draggable=true)}} + {{cards.create_album_card(album, view=view, draggable=true)}} {% endfor %}
@@ -116,8 +116,7 @@ const ALBUM_ID = undefined; {% import "header.html" as header %} - {% import "album_card.html" as album_card %} - {% import "photo_card.html" as photo_card %} + {% import "cards.html" as cards %} {% import "clipboard_tray.html" as clipboard_tray %} {{album.display_name}} | Albums @@ -221,11 +220,11 @@ const ALBUM_ID = undefined; {% if parents %}

{{parents|length}} Parents

{% for parent in parents %} - {{album_card.create_album_card(parent, view=view)}} + {{cards.create_album_card(parent, view=view)}} {% endfor %} {% else %}

1 Parent

- {{album_card.create_album_card("root", view=view)}} + {{cards.create_album_card("root", view=view)}} {% endif %} @@ -234,7 +233,7 @@ const ALBUM_ID = undefined;

{{sub_albums|length}} Children

{% for sub_album in sub_albums|sort(attribute='title') %} - {{album_card.create_album_card(sub_album, view=view, unlink_parent=album, draggable=true)}} + {{cards.create_album_card(sub_album, view=view, unlink_parent=album, draggable=true)}} {% endfor %}
{% endif %} @@ -245,7 +244,7 @@ const ALBUM_ID = undefined;

{{photos|length}} Photos

{% for photo in photos|sort(attribute='basename', case_sensitive=False) %} - {{photo_card.create_photo_card(photo, view=view)}} + {{cards.create_photo_card(photo, view=view)}} {% endfor %}
diff --git a/frontends/etiquette_flask/templates/album_card.html b/frontends/etiquette_flask/templates/album_card.html deleted file mode 100644 index 694015a..0000000 --- a/frontends/etiquette_flask/templates/album_card.html +++ /dev/null @@ -1,63 +0,0 @@ -{% macro create_album_card(album, view="grid", unlink_parent=none, draggable=false) %} -{% set id = "album_card_root" if album == "root" else "album_card_" + album.id %} -{% set view = (view if view in ("list", "grid") else "grid") %} -{% set viewparam = "?view=list" if view == "list" else "" %} -
- {% if album == "root" %} - - {% else %} - - {% endif %} - {% if album.thumbnail_photo %} - {% set thumbnail_src = "/thumbnail/" + album.thumbnail_photo.id + ".jpg" %} - {% else %} - {% set thumbnail_src = "/static/basic_thumbnails/album.png" %} - {% endif %} - - - -
- {% if unlink_parent is not none %} - - {% endif %} -
- -
- {% if album == "root" %} - Albums - {% else %} - {{album.display_name}} - {% endif %} -
- -
- {% if album == "root" %} - {% else %} - {% set child_count = album.sum_children(recurse=False) %} - {% set photo_count = album.sum_photos(recurse=False) %} - {{child_count}} - {{-' | '-}} - {{photo_count}} - {% endif %} -
-
-{% endmacro %} diff --git a/frontends/etiquette_flask/templates/bookmark_card.html b/frontends/etiquette_flask/templates/bookmark_card.html deleted file mode 100644 index 2396f5b..0000000 --- a/frontends/etiquette_flask/templates/bookmark_card.html +++ /dev/null @@ -1,20 +0,0 @@ -{% macro create_bookmark_card(bookmark, add_delete_button=False) %} -
- {{bookmark.display_name}} - - {{bookmark.url}} - -
- {% if add_delete_button %} - - {% endif %} -
-
-{% endmacro %} diff --git a/frontends/etiquette_flask/templates/bookmarks.html b/frontends/etiquette_flask/templates/bookmarks.html index 29c8d34..cb86d73 100644 --- a/frontends/etiquette_flask/templates/bookmarks.html +++ b/frontends/etiquette_flask/templates/bookmarks.html @@ -1,8 +1,8 @@ - {% import "bookmark_card.html" as bookmark_card %} {% import "header.html" as header %} + {% import "cards.html" as cards %} Bookmarks @@ -31,7 +31,7 @@

Bookmarks

{% for bookmark in bookmarks %} - {{bookmark_card.create_bookmark_card(bookmark, add_delete_button=True)}} + {{cards.create_bookmark_card(bookmark, add_delete_button=True)}} {% endfor %}
diff --git a/frontends/etiquette_flask/templates/cards.html b/frontends/etiquette_flask/templates/cards.html new file mode 100644 index 0000000..d673107 --- /dev/null +++ b/frontends/etiquette_flask/templates/cards.html @@ -0,0 +1,202 @@ +{# ALBUM ######################################################################} + +{% macro create_album_card(album, view="grid", unlink_parent=none, draggable=false) %} +{% set id = "album_card_root" if album == "root" else "album_card_" + album.id %} +{% set view = (view if view in ("list", "grid") else "grid") %} +{% set viewparam = "?view=list" if view == "list" else "" %} +
+ {% if album == "root" %} + + {% else %} + + {% endif %} + {% if album.thumbnail_photo %} + {% set thumbnail_src = "/thumbnail/" + album.thumbnail_photo.id + ".jpg" %} + {% else %} + {% set thumbnail_src = "/static/basic_thumbnails/album.png" %} + {% endif %} + + + +
+ {% if album == "root" %} + Albums + {% else %} + {{album.display_name}} + {% endif %} +
+ +
+ {% if album != "root" %} + {% set child_count = album.sum_children(recurse=False) %} + {% set photo_count = album.sum_photos(recurse=False) %} + {{child_count}} + {{-' | '-}} + {{photo_count}} + {% endif %} +
+ +
+ {% if unlink_parent is not none %} + + {% endif %} +
+
+{% endmacro %} + +{# BOOKMARK ###################################################################} + +{% macro create_bookmark_card(bookmark, add_delete_button=False) %} +
+ {{bookmark.display_name}} + + {{bookmark.url}} + +
+ {% if add_delete_button %} + + {% endif %} +
+
+{% endmacro %} + +{# PHOTO ######################################################################} + +{# Priority: specific extensions > specific mimetypes > general mimtypes #} +{% set thumbnails = + { + "svg": "svg", + + "application/zip": "archive", + "application/x-tar": "archive", + + "archive": "archive", + "audio": "audio", + "image": "image", + "video": "video", + "text": "txt", + + } +%} +{% macro create_photo_card(photo, view="grid") %} +{% set view = (view if view in ("list", "grid") else "grid") %} + +{% set metadatas = [] %} +{% if photo.width %} + {% do metadatas.append("{w}×{h}".format(w=photo.width, h=photo.height)) %} +{% endif %} +{% if photo.duration %} + {% do metadatas.append("{d}".format(d=photo.duration_string)) %} +{% endif -%} + +{% set tag_names_title = [] %} +{% for tag in photo.get_tags() %} + {% do tag_names_title.append(tag.name) %} +{% endfor -%} +{% set tag_names_title = tag_names_title|comma_join %} +{% set tag_names_inner = "T" if tag_names_title else "" %} + +
+
{{photo.basename}}
+ + + {{- metadatas|join_and_trail(", ")|safe -}} + {{photo.bytestring}} + + + {% if view == "grid" %} + {% if photo.thumbnail %} + {% set thumbnail_src = "/thumbnail/" + photo.id + ".jpg" %} + {% else %} + {% set thumbnail_src = + thumbnails.get(photo.extension, "") or + thumbnails.get(photo.mimetype, "") or + thumbnails.get(photo.simple_mimetype, "") or + "other" + %} + {% set thumbnail_src = "/static/basic_thumbnails/" + thumbnail_src + ".png" %} + {% endif -%}{# if thumbnail #} + + + {% endif %}{# if grid #} + + {{tag_names_inner}} +
+ +{% endmacro %} + +{# TAG ########################################################################} + + +{%- macro create_tag_card( + tag, + extra_classes="", + innertext=None, + innertext_safe=None, + link='info', + onclick=None, + with_alt_description=False +) -%} + +{%- set href = { + "search": "/search?tag_musts=" + (tag.name|urlencode), + "search_musts": "/search?tag_musts=" + (tag.name|urlencode), + "search_mays": "/search?tag_mays=" + (tag.name|urlencode), + "search_forbids": "/search?tag_forbids=" + (tag.name|urlencode), + "info": "/tag/" + tag.name, + None: None, + }.get(link, link) +-%} +{%- set class = ("tag_card" + " " + extra_classes).strip() -%} +{%- set title = (with_alt_description and tag.description) or None -%} +{%- set innertext = innertext_safe or (innertext or tag.name)|e -%} +{%- set element = "a" if (link or onclick) else "span" -%} + +<{{element}} {{make_attributes(class=class, title=title, href=href, onclick=onclick, **kwargs)|safe}}>{{innertext|safe}} +{{-''-}} +{%- endmacro -%} diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html index 7c8fc6a..0bec57a 100644 --- a/frontends/etiquette_flask/templates/photo.html +++ b/frontends/etiquette_flask/templates/photo.html @@ -2,7 +2,7 @@ {% import "header.html" as header %} - {% import "tag_card.html" as tag_card %} + {% import "cards.html" as cards %} {{photo.basename}} | Photos @@ -162,7 +162,7 @@ {% set tags = photo.get_tags()|sort(attribute='name') %} {% for tag in tags %}
  • - {{tag_card.create_tag_card(tag, link="info", with_alt_description=True)}}
    • @@ -327,28 +325,28 @@