# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1592582233 -7200
# Node ID 2b8d18a9df00727a2f468a9e631a159a77ebd849
# Parent  bb5193cef770e5e77cac8a23c375a1b862887618
bulma (photo/album): change for dynamic content:

- added drop zone and file selector to upload photos
- moved item template to its own file, so it can be used for dynamic content
- added delete button
- changes to manage progression bar and other stuff

diff -r bb5193cef770 -r 2b8d18a9df00 sat_templates/templates/bulma/photo/album.html
--- a/sat_templates/templates/bulma/photo/album.html	Fri Jun 19 17:57:13 2020 +0200
+++ b/sat_templates/templates/bulma/photo/album.html	Fri Jun 19 17:57:13 2020 +0200
@@ -4,41 +4,41 @@
 {% import 'blog/macros.html' as blog with context %}
 
 {% block body %}
-{{ icon_defs('comment-empty') }}
-<div class="columns album is-multiline has-margin-top-1">
+{{ icon_defs('comment-empty', 'trash-empty') }}
+<div id="album_items" class="columns album is-multiline mt-4">
+    {% set ns_photos = namespace(empty=true) %}
     {% for file in files_data %}
         {% if file.type == C.FILE_TYPE_FILE %}
-            <div class="column is-4">
-                <div class="card x-is-hoverable">
-                    <div class="card-image is-photo-thumbnail-container is-flex has-items-centered has-background-light">
-                        <a href="{{file.url}}" class="is-wrapping">
-                            <img class="is-photo-thumbnail" src="{{file.thumb_url}}" alt="{{file.name}}">
-                        </a>
-                    </div>
-                    <div class="card-content" onclick="clicked_mh_fix('{{'comments_panel'|next_gidx}}')">
-                        <div class="level">
-                            <div class="level-left"></div>
-                            <div class="level-right">
-                                <div class="level-item is-size-7">
-                                    {% if file.comments_url is defined %}
-                                        {% if file.comments_count %}
-                                            <span class='comments__count'>{{file.comments_count}} </span>
-                                        {% endif %}
-                                        {{ icon('comment-empty', cls='icon is-small') }}
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div id='{{'comments_panel'|cur_gidx}}' class="has-margin-top-1 panel-drawer">
-                    {{ blog.show_items(file.comments, expanded=true, dates_fmt='relative') }}
-                    <div class="comment_post has-margin-top-1">
-                        {{- textbox.comment_or_login(service=file.comments_service, node=file.comments_node) -}}
-                    </div>
-                </div>
-            </div>
+        {% set ns_photos.empty = false %}
+            {% include 'photo/item.html' %}
         {% endif %}
     {% endfor %}
 </div>
+{# {% if ns_photos.empty %} #}
+{% if true %}
+    <div id="file_drop" class="box column has-border-dashed has-border-grey-light is-hidden-touch">
+        <div class="has-text-weight-bold has-text-centered has-text-grey-light is-size-3">
+            {% trans %}
+            Drop photos here
+            {% endtrans %}
+        </div>
+    </div>
+    <h2 class="title is-4 has-text-centered is-hidden-touch">OR</h2>
+    <div class="file is-large is-boxed is-centered">
+        <label class="file-label">
+            <input id="file_input" class="file-input" type="file" accept="image/*" name="photos_upload" multiple>
+            <span class="file-cta">
+                <span class="file-icon is-marginless">
+                    <i class="icon-upload"></i>
+                </span>
+                <span class="file-label">
+                    {% trans %}
+                        Select photos to upload…
+                    {% endtrans %}
+                </span>
+            </span>
+        </label>
+    </div>
+    <div id="list" class="column"></div>
+{% endif %}
 {% endblock body %}
diff -r bb5193cef770 -r 2b8d18a9df00 sat_templates/templates/bulma/photo/item.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/photo/item.html	Fri Jun 19 17:57:13 2020 +0200
@@ -0,0 +1,38 @@
+<div class="column is-4 item" data-item='{{file|tojson}}'>
+    <div class="card x-is-hoverable">
+        <div class="card-image is-photo-thumbnail-container is-flex has-items-centered has-background-light">
+            <a href="{{file.url}}" class="is-wrapping">
+                <img class="is-photo-thumbnail" src="{{file.thumb_url}}" alt="{{file.name}}">
+            </a>
+        </div>
+        <div class="card-content" onclick="clicked_mh_fix('{{'comments_panel'|next_gidx}}')">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item is-size-7 x-is-hoverable-primary action_delete">
+                        {{ icon('trash-empty', cls='icon is-small') }}
+                    </div>
+                </div>
+                <div class="level-right">
+                    <div class="level-item is-size-7">
+                        {% if file.comments_url is defined %}
+                            {% if file.comments_count %}
+                                <span class='comments__count'>{{file.comments_count}} </span>
+                            {% endif %}
+                            {{ icon('comment-empty', cls='icon is-small') }}
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% if uploading %}
+        <progress class="progress is-info mt-4 has-background-white" value="0" max="100">0%</progress>
+    {% else %}
+        <div id='{{'comments_panel'|cur_gidx}}' class="mt-4 panel-drawer">
+            {{ blog.show_items(file.comments, expanded=true, dates_fmt='relative') }}
+            <div class="comment_post mt-4">
+                {{- textbox.comment_or_login(service=file.comments_service, node=file.comments_node) -}}
+            </div>
+        </div>
+    {% endif %}
+</div>