Mercurial > libervia-templates

changeset 387:8b990c78d4b5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
(bulma/chat): add menu + style for message retraction
author Goffi <goffi@goffi.org>
date Thu, 30 Nov 2023 13:24:43 +0100
parents e63fb06052ae
children dc83f45625b3
files sat_templates/templates/bulma/chat/chat.html sat_templates/templates/bulma/chat/extra_menu.html sat_templates/templates/bulma/chat/message.html sat_templates/templates/bulma/static/chat.css sat_templates/templates/bulma/static/styles.css
diffstat 5 files changed, 31 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/sat_templates/templates/bulma/chat/chat.html	Tue Nov 28 17:48:00 2023 +0100
+++ b/sat_templates/templates/bulma/chat/chat.html	Thu Nov 30 13:24:43 2023 +0100
@@ -4,7 +4,7 @@
     {{ icon_defs(
     "lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach",
     "paper-plane-empty", "doc", "download", "wrench", "eye", "smile", "plus-circled",
-    "quote-left"
+    "quote-left", "trash-empty"
     ) }}
 
     {# TODO: this should be done in a more generic way in dialog module #}
--- a/sat_templates/templates/bulma/chat/extra_menu.html	Tue Nov 28 17:48:00 2023 +0100
+++ b/sat_templates/templates/bulma/chat/extra_menu.html	Thu Nov 30 13:24:43 2023 +0100
@@ -12,5 +12,12 @@
                 </a>
             </li>
         {% endif %}
+        {% if retract %}
+            <li class="action_retract">
+                <a href="#" class="">
+                    {{ icon('trash-empty', cls='icon is-small has-text-danger') }} {% trans %}Retract{% endtrans %}
+                </a>
+            </li>
+        {% endif %}
     </ul>
 </div>
--- a/sat_templates/templates/bulma/chat/message.html	Tue Nov 28 17:48:00 2023 +0100
+++ b/sat_templates/templates/bulma/chat/message.html	Thu Nov 30 13:24:43 2023 +0100
@@ -8,10 +8,9 @@
 
 <div
     id="{{msg.id}}"
-    class="media is-chat-message msg_{{msg.type}} {{'own_msg' if own_msg}}"
-    style="padding: 0.5em;"
+    class="media is-chat-message msg_{{msg.type}} {{'own_msg' if own_msg}} {{ 'is-retracted' if msg.extra.retracted }}"
     role="listitem"
-    aria-label="Chat Message"
+    aria-label="{{ 'Retracted Message' if msg.extra.retracted else 'Chat Message' }}"
     {% if msg.extra.editions %}data-editions='{{msg.extra.editions|tojson}}'{% endif %}
     >
     {%- if msg.type != "info" %}
@@ -52,15 +51,22 @@
                     </div>
                 </nav>
             {% endif -%}
-            <p class="msg_body has-whitespace-pre-wrap {{ "has-text-info" if msg.type=="info" }}" id="msg_body_{{msg.id}}" style="margin: 0;">
-            {{- msg.html or (msg.text|e|urlize|safe) -}}
+            <p class="msg_body has-whitespace-pre-wrap {{ "has-text-info" if msg.type=="info" or msg.extra.retracted }} m-0" id="msg_body_{{msg.id}}">
+               {%- if msg.extra.retracted %}
+                   {% trans %}This message has been retracted.{% endtrans %}
+               {% else %}
+                   {{- msg.html or (msg.text|e|urlize|safe) -}}
+               {% endif -%}
             </p>
 
             <div class="url-previews is-hidden">
                 <div class="icon-container"></div>
             </div>
 
-            <div id="actions_{{msg.id}}" class="level is-mobile actions mb-0">
+            <div
+               id="actions_{{msg.id}}"
+               class="level is-mobile actions mb-0 {{ "is-hidden" if msg.extra.retracted }}"
+               >
                 {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #}
                 {{ icon('smile', cls='icon is-small action-button reaction-button', id='msg_actions_{{msg.id}}') }}
                 {{ icon('dot-3', cls='icon is-small action-button extra-button', id='msg_actions_{{msg.id}}') }}
--- a/sat_templates/templates/bulma/static/chat.css	Tue Nov 28 17:48:00 2023 +0100
+++ b/sat_templates/templates/bulma/static/chat.css	Thu Nov 30 13:24:43 2023 +0100
@@ -24,7 +24,6 @@
 
 .is-chat-message {
     transition: all 0.3s ease;
-    padding-left: 1.5em;
 }
 
 .is-chat-message:hover, .is-chat-message.has-popup-focus {
@@ -32,6 +31,13 @@
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }
 
+.media.is-chat-message.is-retracted {
+    padding: 0.5em;
+    border-left: 3px solid #ff3860; /* Reddish border for distinction */
+    background-color: #f5f5f5; /* Light grey background */
+    color: #636363; /* Slightly darker text for better readability */
+}
+
 .message-attachment {
     max-width: 20rem;
 }
--- a/sat_templates/templates/bulma/static/styles.css	Tue Nov 28 17:48:00 2023 +0100
+++ b/sat_templates/templates/bulma/static/styles.css	Thu Nov 30 13:24:43 2023 +0100
@@ -113,10 +113,10 @@
     box-shadow: 0px 0px 0 0.25rem var(--col-primary);
 }
 
-.is-chat-message {
-    margin: 0.5rem 0 0 !important;
-    padding: 0 !important;
-    border: 0 !important;
+.media.is-chat-message {
+    margin: 0.5rem 0 0;
+    padding: 0;
+    border: 0;
 }
 
 .is-text-content {