# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1701190080 -3600
# Node ID e63fb06052aeaba93bf34c7aba4e658dfac26fa0
# Parent  941e4006ab6ecbc9f6907945cd240c3cd3e253fb
bulma: message edition + extra menu + improvments:

- add an extra menu template with `Edit` and `Quote`
- add a template for previous editions popup
- fix `own_msg` class application
- add CSS for edit mode
- cosmetic changes

diff -r 941e4006ab6e -r e63fb06052ae sat_templates/templates/bulma/chat/chat.html
--- a/sat_templates/templates/bulma/chat/chat.html	Wed Nov 22 15:22:11 2023 +0100
+++ b/sat_templates/templates/bulma/chat/chat.html	Tue Nov 28 17:48:00 2023 +0100
@@ -3,7 +3,8 @@
 {% block body %}
     {{ icon_defs(
     "lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach",
-    "paper-plane-empty", "doc", "download", "wrench", "eye", "smile", "plus-circled"
+    "paper-plane-empty", "doc", "download", "wrench", "eye", "smile", "plus-circled",
+    "quote-left"
     ) }}
 
     {# TODO: this should be done in a more generic way in dialog module #}
diff -r 941e4006ab6e -r e63fb06052ae sat_templates/templates/bulma/chat/editions.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/chat/editions.html	Tue Nov 28 17:48:00 2023 +0100
@@ -0,0 +1,12 @@
+<ul>
+    {% for edition in editions %}
+        <li class="m-2">
+            <span class="tag is-info is-light">
+                {{ edition.timestamp | date_fmt(fmt="auto_day", auto_new_fmt="relative") }}
+            </span>
+            <span class="ml-2">{{ edition.text }}</span>
+        </li>
+    {% endfor %}
+</ul>
+
+
diff -r 941e4006ab6e -r e63fb06052ae sat_templates/templates/bulma/chat/extra_menu.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/chat/extra_menu.html	Tue Nov 28 17:48:00 2023 +0100
@@ -0,0 +1,16 @@
+<div class="extra-menu-popup">
+    <ul class="menu-list">
+        <li class="action_quote">
+            <a href="#" class="">
+                {{ icon('quote-left', cls='icon is-small') }} {% trans %}Quote{% endtrans %}
+            </a>
+        </li>
+        {% if edit %}
+            <li class="action_edit">
+                <a href="#" class="">
+                    {{ icon('pencil', cls='icon is-small') }} {% trans %}Edit{% endtrans %}
+                </a>
+            </li>
+        {% endif %}
+    </ul>
+</div>
diff -r 941e4006ab6e -r e63fb06052ae sat_templates/templates/bulma/chat/message.html
--- a/sat_templates/templates/bulma/chat/message.html	Wed Nov 22 15:22:11 2023 +0100
+++ b/sat_templates/templates/bulma/chat/message.html	Tue Nov 28 17:48:00 2023 +0100
@@ -1,6 +1,19 @@
 {% import 'components/avatar.html' as avatar with context %}
 
-<div id="{{msg.id}}" class="media is-chat-message msg_{{msg.type}} {{'own_msg' if msg.from_ == own_jid}}" style="padding: 0.5em;" role="listitem" aria-label="Chat Message">
+{% if chat_type == "group" %}
+    {% set own_msg = msg.from_==own_jid %}
+{% else %}
+    {% set own_msg = msg.from_|bare_jid==own_jid|bare_jid %}
+{% endif %}
+
+<div
+    id="{{msg.id}}"
+    class="media is-chat-message msg_{{msg.type}} {{'own_msg' if own_msg}}"
+    style="padding: 0.5em;"
+    role="listitem"
+    aria-label="Chat Message"
+    {% if msg.extra.editions %}data-editions='{{msg.extra.editions|tojson}}'{% endif %}
+    >
     {%- if msg.type != "info" %}
         {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%}
         <figure class="media-left pt-1">
@@ -10,7 +23,7 @@
     <div class="media-content is-relative">
         <div class="content">
             {%- if msg.type != "info" %}
-                <nav class="level is-mobile is-marginless is-size-7">
+                <nav class="level is-mobile is-marginless is-size-7 is-not-selectable">
                     <div class="level-left has-text-weight-bold">
                         <div class="level-item">
                             <span class="author" id="msg_author_{{msg.id}}">{{author}}</span>
@@ -18,8 +31,11 @@
                     </div>
                     <div class="level-right is-italic">
                         <div class="level-item">
-                            <span class="date" id="msg_date_{{msg.id}}">{{msg.timestamp|date_fmt('auto_day')}}</span>
+                            <span class="date" id="msg_date_{{msg.id}}">{{(msg.extra.updated or msg.timestamp)|date_fmt('short', tz_name=tz_name)}}</span>
                             <div id="status_icons_{{msg.id}}" class="status-icons level-item has-padding-left">
+                                {% if msg.extra.editions %}
+                                    {{ icon('pencil', cls='icon is-small message-editions') }}
+                                {% endif %}
                                 {% if msg.encrypted %}
                                     {{ icon('lock-filled', cls='icon is-small has-text-success') }}
                                 {% else %}
diff -r 941e4006ab6e -r e63fb06052ae sat_templates/templates/bulma/static/chat.css
--- a/sat_templates/templates/bulma/static/chat.css	Wed Nov 22 15:22:11 2023 +0100
+++ b/sat_templates/templates/bulma/static/chat.css	Tue Nov 28 17:48:00 2023 +0100
@@ -17,12 +17,17 @@
     min-height: 48px;
 }
 
+/* Input "edit" mode */
+#message_input.mode_edit {
+    background-color: #d1ecf1;
+}
+
 .is-chat-message {
     transition: all 0.3s ease;
     padding-left: 1.5em;
 }
 
-.is-chat-message:hover, .chat-message-highlight {
+.is-chat-message:hover, .is-chat-message.has-popup-focus {
     background-color: #f5f5f5;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }