annotate sat_templates/templates/bulma/chat/message.html @ 411:f7a434581872 default tip

chat: Add forward, rich editing and extra recipients: - There is a new "forward" menu in message. For now, a simple prompt ask for recipient JID. - A new "extra" menu is available next to input field. Inside there are 2 items for now: add extra recipient, and toggle rich edit mode. - Extra recipient option add a field to add an email-like "to", "cc" or "bcc" recipients. - Rich edit let use rich styling such as bold, italic, underline, etc. rel 461
author Goffi <goffi@goffi.org>
date Fri, 04 Jul 2025 17:33:22 +0200
parents f45c311710b1
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
1 {% import 'components/avatar.html' as avatar with context %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
2
386
e63fb06052ae bulma: message edition + extra menu + improvments:
Goffi <goffi@goffi.org>
parents: 385
diff changeset
3 {% if chat_type == "group" %}
389
2eaea9a9c234 bulma (chat/message): fix setting of `own_mess` class.
Goffi <goffi@goffi.org>
parents: 387
diff changeset
4 {% set own_msg = msg.from_==own_local_jid %}
386
e63fb06052ae bulma: message edition + extra menu + improvments:
Goffi <goffi@goffi.org>
parents: 385
diff changeset
5 {% else %}
389
2eaea9a9c234 bulma (chat/message): fix setting of `own_mess` class.
Goffi <goffi@goffi.org>
parents: 387
diff changeset
6 {% set own_msg = msg.from_|bare_jid==own_local_jid|bare_jid %}
386
e63fb06052ae bulma: message edition + extra menu + improvments:
Goffi <goffi@goffi.org>
parents: 385
diff changeset
7 {% endif %}
e63fb06052ae bulma: message edition + extra menu + improvments:
Goffi <goffi@goffi.org>
parents: 385
diff changeset
8
e63fb06052ae bulma: message edition + extra menu + improvments:
Goffi <goffi@goffi.org>
parents: 385
diff changeset
9 <div
e63fb06052ae bulma: message edition + extra menu + improvments:
Goffi <goffi@goffi.org>
parents: 385
diff changeset
10 id="{{msg.id}}"
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
11 class="media chat-message msg_{{msg.type}} {{'own_msg' if own_msg}} {{ 'is-retracted' if msg.extra.retracted }}"
387
8b990c78d4b5 (bulma/chat): add menu + style for message retraction
Goffi <goffi@goffi.org>
parents: 386
diff changeset
12 aria-label="{{ 'Retracted Message' if msg.extra.retracted else 'Chat Message' }}"
404
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
13 data-from='{{msg.from_}}'
386
e63fb06052ae bulma: message edition + extra menu + improvments:
Goffi <goffi@goffi.org>
parents: 385
diff changeset
14 {% if msg.extra.editions %}data-editions='{{msg.extra.editions|tojson}}'{% endif %}
404
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
15 {% if msg.extra.thread %}data-thread='{{msg.extra.thread}}'{% endif %}
386
e63fb06052ae bulma: message edition + extra menu + improvments:
Goffi <goffi@goffi.org>
parents: 385
diff changeset
16 >
385
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
17 {%- if msg.type != "info" %}
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
18 {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%}
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
19 <figure class="media-left">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
20 {{ avatar.avatar(msg.from_) }}
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
21 </figure>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
22 {% endif -%}
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
23 <div class="media-content is-relative">
385
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
24 {%- if msg.type != "info" %}
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
25
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
26 <div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
27
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
28 <span class="author" id="msg_author_{{msg.id}}">{{author}}</span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
29 <span class="date" id="msg_date_{{msg.id}}">{{(msg.extra.updated or msg.timestamp)|date_fmt('short', tz_name=tz_name)}}</span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
30 <span id="status_icons_{{msg.id}}" class="status-icons level-item has-padding-left">
404
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
31 {% if msg.reply_to or msg.extra.thread %}
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
32 {{ icon('comment-dots', cls='icon is-small message-thread') }}
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
33 {% endif %}
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
34 {% if msg.extra.editions %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
35 {{ icon('pencil', cls='icon is-small message-editions') }}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
36 {% endif %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
37 {% if msg.encrypted %}
406
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
38 {{ icon('lock', cls='icon is-small has-text-success') }}
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
39 {% else %}
406
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
40 {{ icon('unlock', cls='icon is-small has-text-danger') }}
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
41 {% endif %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
42 {% if msg.received %}
406
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
43 {{ icon('check', cls='icon is-small has-text-link') }}
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
44 {% endif %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
45 {% if msg.edited %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
46 {{ icon('pencil', cls='icon is-small has-text-info') }}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
47 {% endif %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
48 </span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
49 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
50
407
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
51 {% if msg.extra.origin or msg.extra.get("is-bot") %}
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
52 <div class="tags mb-0 pb-1">
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
53 {% if msg.extra.origin == "smtp" %}
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
54
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
55 <span data-type="{{msg.extra.origin}}" class="message-origin tag is-hoverable is-light">🖂 {% trans %}email{% endtrans %}</span>
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
56 {% else %}
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
57 <span class="message-origin tag is-hoverable is-light">{{msg.extra.origin}}</span>
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
58 {% endif %}
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
59 {% if msg.extra.get("is-bot") %}
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
60 <span data-type="{{msg.extra.origin}}" class="tag is-light">🤖 bot</span>
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
61 {% endif %}
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
62 </div>
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
63 {% endif %}
f45c311710b1 chat (message): Add origin of the message:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
64
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
65 {% endif -%}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
66 <div class="message-core">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
67 <p class="message-body {{ "has-text-info" if msg.type=="info" or msg.extra.retracted }} m-0" id="message-body_{{msg.id}}">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
68 {%- if msg.extra.retracted %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
69 {% trans %}This message has been retracted.{% endtrans %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
70 {% else %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
71 {{- msg.html or (msg.text|e|urlize|safe) -}}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
72 {% endif -%}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
73 </p>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
74
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
75 <div class="url-previews is-hidden">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
76 <div class="icon-container"></div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
77 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
78
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
79 <div
406
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
80 class="level mb-0 mt-1 message-footer {{ "is-hidden" if msg.extra.retracted }}"
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
81 >
406
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
82 <div class="level-left">
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
83 {% if msg.extra.keywords %}
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
84 <div class="tags pb-1">
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
85 {% for keyword in msg.extra.keywords %}
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
86 <span class="message-keyword tag is-hoverable is-info">{{keyword}}</span>
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
87 {% endfor %}
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
88 </div>
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
89 {% endif %}
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
90 </div>
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
91 <div class="level-right message-actions">
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
92 {# {{ icon('share-nodes', cls='icon is-small action-button', id='msg_share_' + msg.id) }} #}
404
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
93 {{ icon('reply', cls='icon is-small action-button reply-button')}}
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
94 {{ icon('regular face-smile', cls='icon is-small action-button reaction-button') }}
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
95 {{ icon('ellipsis', cls='icon is-small action-button extra-button') }}
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
96 </div>
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
97 </div>
364
095bd5b34080 chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents: 363
diff changeset
98
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
99 <div id="msg_reactions_{{msg.id}}">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
100 {% if msg.extra.reactions is defined %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
101 {% set reactions = msg.extra.get("reactions") %}
405
5016fb0ff62f Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents: 404
diff changeset
102 {% include 'components/reactions.html' %}
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
103 {% endif %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 389
diff changeset
104 </div>
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
105 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
106 {% if msg.attachments %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
107 <div class="message-attachments pt-2">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
108 {%- for attachment in msg.attachments %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
109 <figure class="image message-attachment">
385
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
110 {%- if not attachment.url -%}
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
111 <div class="notification is-warning">
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
112 <div class="is-size-6 has-text-weight-semibold mb-1">
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
113 {% trans name=attachment.name %}Attachment: {{name}}{% endtrans %}
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
114 </div>
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
115
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
116 <div class="is-size-7 mb-1">
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
117 {% trans %}Cannot be opened as there are no sources available.{% endtrans %}
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
118 </div>
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
119
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
120 </div>
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
121 {%- else -%}
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
122 {%- if attachment.media_type|media_type_main == 'image' %}
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
123 <img src="{{attachment.url}}" alt="{{attachment.name}}">
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
124 {%- else %}
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
125 {{ icon('doc', cls='icon') }}
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
126 {%- endif %}
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
127 <figcaption class="has-text-centered is-size-7">
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
128 <a href="{{attachment.url}}" target="_blank" class="has-text-grey">{{attachment.name}}</a>
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
129 </figcaption>
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
130 {%- endif -%}
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
131 </figure>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
132 {%- endfor %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
133 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
134 {% endif %}
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
135 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
136 </div>