changeset 303:877f01720036

bulma (lists): creation, invitations, item deletion: - add interface to create lists from templates - show list specific icon when available in lists discovery - owned lists can be deleted from lists discovery - lists can now be created from templates - when edition is allowed, a delete button let now delete a list item from single item view - new button to launch invitation manager from list overview
author Goffi <goffi@goffi.org>
date Sat, 20 Feb 2021 13:39:11 +0100
parents 60979d67eae7
children cdf88211b86b
files sat_templates/templates/bulma/list/create.html sat_templates/templates/bulma/list/create_from_template.html sat_templates/templates/bulma/list/discover.html sat_templates/templates/bulma/list/item.html sat_templates/templates/bulma/list/overview.html sat_templates/templates/bulma/static/styles.css
diffstat 6 files changed, 89 insertions(+), 27 deletions(-) [+]
line wrap: on
line diff
--- a/sat_templates/templates/bulma/list/create.html	Sat Feb 20 13:37:25 2021 +0100
+++ b/sat_templates/templates/bulma/list/create.html	Sat Feb 20 13:39:11 2021 +0100
@@ -1,37 +1,20 @@
 {% extends 'base/base.html' %}
 {% import 'components/block.html' as block with context %}
-{% import 'components/images.html' as images with context %}
-{% import 'components/avatar.html' as avatar with context %}
-{% import 'input/form.html' as form with context %}
-{% import 'input/field.html' as field with context %}
 
 {% block body %}
-{{ icon_defs('clipboard') }}
+{{ icon_defs(*icons_names) }}
 <section class="section">
-    <nav class="level mb-4">
-        <div class="level-left">
-            <div class="level-item">
-                {{ component.action_button(url_list_new) }}
-            </div>
-        </div>
-    </nav>
     <article class="message has-text-centered">
       <div class="message-body">
         {% trans %}
-        Please select the list to use.
+        Please select the type of list that you want to create
         {% endtrans %}
       </div>
     </article>
-    {% if lists_directory is defined %}
-        <div class="disco_lists">
-            {{block.disco_icon_grid(lists_directory, 'clipboard')}}
-        </div>
-    {% endif %}
-</section>
-<section class="section">
-    {% call form.form(class="form--single") %}
-        {{ field.text("jid", _("list jid"), required=true)}}
-        {{ field.submit(_("Access")) }}
-    {% endcall %}
+    <div class="columns">
+        {% for tpl in lists_templates %}
+            {{ block.icon_item(tpl.icon, tpl.name, tpl.url) }}
+        {% endfor %}
+    </div>
 </section>
 {% endblock body %}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/list/create_from_template.html	Sat Feb 20 13:39:11 2021 +0100
@@ -0,0 +1,34 @@
+{% extends 'base/base.html' %}
+{% import 'input/form.html' as form with context %}
+{% import 'input/field.html' as field with context %}
+
+{% block body %}
+{{ icon_defs(list_template.icon) }}
+<section class="section">
+    <article class="message is-info">
+        <div class="message-body">
+            {% trans list_type=list_template.name %}
+            You're about to create a new list ({{list_type}}).
+            {% endtrans %}
+        </div>
+    </article>
+    {% call form.form(class="form--paper form__panel--vertical") %}
+        {{ field.text("name", _("name of the list"), required=true) }}
+        <div class="box">
+            <label class="label">
+                {% trans %}Is this list private or public?{% endtrans %}
+            </label>
+            <div class="message">
+                <div class="message-body is-dark has-whitespace-pre-line">
+                    {%- trans notrimmed -%}
+                    Private lists are only visible by yourself (and people you invite later).
+                    Public lists can be accessed by anybody.
+                    {%- endtrans -%}
+                </div>
+            </div>
+            {{ field.choices("access", (("private", _("private")), ("public", _("public"))), checked="private") }}
+        </div>
+        {{ field.submit(_("Create list")) }}
+    {% endcall %}
+</section>
+{% endblock body %}
--- a/sat_templates/templates/bulma/list/discover.html	Sat Feb 20 13:37:25 2021 +0100
+++ b/sat_templates/templates/bulma/list/discover.html	Sat Feb 20 13:39:11 2021 +0100
@@ -7,7 +7,17 @@
 
 {% block body %}
 {{ icon_defs('clipboard') }}
+{% if icons_names is defined %}
+    {{ icon_defs(*icons_names) }}
+{% endif %}
 <section class="section">
+    <nav class="level mb-4">
+        <div class="level-left">
+            <div class="level-item">
+                {{ component.action_button(url_list_create, label=_("create a list")) }}
+            </div>
+        </div>
+    </nav>
     <article class="message has-text-centered">
       <div class="message-body">
         {% trans %}
@@ -17,7 +27,18 @@
     </article>
     {% if lists_directory is defined %}
         <div class="disco_lists">
-            {{block.disco_icon_grid(lists_directory, 'clipboard')}}
+
+            <div class="columns is-multiline is-mobile">
+                {% for list_data in lists_directory %}
+                    {{ block.icon_item(
+                           list_data.icon_name or "clipboard",
+                           list_data.name,
+                           list_data.url,
+                           delete_icon=list_data.creator,
+                           data=list_data)
+                    }}
+                {% endfor %}
+            </div>
         </div>
     {% endif %}
 </section>
--- a/sat_templates/templates/bulma/list/item.html	Sat Feb 20 13:37:25 2021 +0100
+++ b/sat_templates/templates/bulma/list/item.html	Sat Feb 20 13:39:11 2021 +0100
@@ -22,7 +22,7 @@
 {% endblock confirm_message %}
 
 {% block body %}
-{{ icon_defs('pencil') }}
+{{ icon_defs('pencil', 'trash-empty') }}
 <div class="columns mt-4">
     <div class="column has-background-white">
         <div id="{{ item.widget_value['id'] }}" class="media px-1 py-1">
@@ -39,6 +39,15 @@
                     {{ item.widget_value['body'] }}
 
                 </div>
+                <nav class="level">
+                    <div class="level-left">
+                        {% if can_modify %}
+                            <div class="level-item is-size-7 x-is-hoverable-primary action_delete">
+                                {{ icon('trash-empty', cls='icon is-small') }}
+                            </div>
+                        {% endif %}
+                    </div>
+                </nav>
                 {% if comments is defined %}
                     {{ blog.show_items(comments['items']|reverse, expanded=true) }}
                 {% endif %}
@@ -48,7 +57,7 @@
                     </div>
                 {% endif %}
             </div>
-            {% if url_list_item_edit is defined %}
+            {% if can_modify %}
                 <div class="media-right">
                     <a href="{{url_list_item_edit}}">
                         {{ icon('pencil', cls='icon is-64x64') }}
--- a/sat_templates/templates/bulma/list/overview.html	Sat Feb 20 13:37:25 2021 +0100
+++ b/sat_templates/templates/bulma/list/overview.html	Sat Feb 20 13:39:11 2021 +0100
@@ -13,6 +13,17 @@
             <div class="level-item">
                 {{ component.action_button(url_list_new) }}
             </div>
+            {% if owner %}
+                <div class="level-item">
+                    {{
+                        component.action_button(
+                            "#",
+                            label=_("manage invitations"),
+                            icon="group",
+                            id="button_manage")
+                    }}
+                </div>
+            {% endif %}
         </div>
         <div class="level-right">
             <div class="level-item">
--- a/sat_templates/templates/bulma/static/styles.css	Sat Feb 20 13:37:25 2021 +0100
+++ b/sat_templates/templates/bulma/static/styles.css	Sat Feb 20 13:39:11 2021 +0100
@@ -22,6 +22,10 @@
     white-space: pre-wrap;
 }
 
+.has-whitespace-pre-line {
+    white-space: pre-line;
+}
+
 .is-avatar {
     height: 64px;
     width: 64px;