diff sat_templates/templates/bulma/chat/message.html @ 386:e63fb06052ae

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
author Goffi <goffi@goffi.org>
date Tue, 28 Nov 2023 17:48:00 +0100
parents 941e4006ab6e
children 8b990c78d4b5
line wrap: on
line diff
--- 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 %}