Mercurial > libervia-templates
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 |
rev | line source |
---|---|
230 | 1 {% import 'components/avatar.html' as avatar with context %} |
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 | 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 | 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 | 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 | 18 {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%} |
403 | 19 <figure class="media-left"> |
20 {{ avatar.avatar(msg.from_) }} | |
230 | 21 </figure> |
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 | 25 |
26 <div> | |
27 | |
28 <span class="author" id="msg_author_{{msg.id}}">{{author}}</span> | |
29 <span class="date" id="msg_date_{{msg.id}}">{{(msg.extra.updated or msg.timestamp)|date_fmt('short', tz_name=tz_name)}}</span> | |
30 <span id="status_icons_{{msg.id}}" class="status-icons level-item has-padding-left"> | |
404 | 31 {% if msg.reply_to or msg.extra.thread %} |
32 {{ icon('comment-dots', cls='icon is-small message-thread') }} | |
33 {% endif %} | |
403 | 34 {% if msg.extra.editions %} |
35 {{ icon('pencil', cls='icon is-small message-editions') }} | |
36 {% endif %} | |
37 {% if msg.encrypted %} | |
406 | 38 {{ icon('lock', cls='icon is-small has-text-success') }} |
403 | 39 {% else %} |
406 | 40 {{ icon('unlock', cls='icon is-small has-text-danger') }} |
403 | 41 {% endif %} |
42 {% if msg.received %} | |
406 | 43 {{ icon('check', cls='icon is-small has-text-link') }} |
403 | 44 {% endif %} |
45 {% if msg.edited %} | |
46 {{ icon('pencil', cls='icon is-small has-text-info') }} | |
47 {% endif %} | |
48 </span> | |
49 </div> | |
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 | 65 {% endif -%} |
66 <div class="message-core"> | |
67 <p class="message-body {{ "has-text-info" if msg.type=="info" or msg.extra.retracted }} m-0" id="message-body_{{msg.id}}"> | |
68 {%- if msg.extra.retracted %} | |
69 {% trans %}This message has been retracted.{% endtrans %} | |
70 {% else %} | |
71 {{- msg.html or (msg.text|e|urlize|safe) -}} | |
72 {% endif -%} | |
73 </p> | |
74 | |
75 <div class="url-previews is-hidden"> | |
76 <div class="icon-container"></div> | |
77 </div> | |
78 | |
79 <div | |
406 | 80 class="level mb-0 mt-1 message-footer {{ "is-hidden" if msg.extra.retracted }}" |
403 | 81 > |
406 | 82 <div class="level-left"> |
83 {% if msg.extra.keywords %} | |
84 <div class="tags pb-1"> | |
85 {% for keyword in msg.extra.keywords %} | |
86 <span class="message-keyword tag is-hoverable is-info">{{keyword}}</span> | |
87 {% endfor %} | |
88 </div> | |
89 {% endif %} | |
90 </div> | |
91 <div class="level-right message-actions"> | |
403 | 92 {# {{ icon('share-nodes', cls='icon is-small action-button', id='msg_share_' + msg.id) }} #} |
404 | 93 {{ icon('reply', cls='icon is-small action-button reply-button')}} |
94 {{ icon('regular face-smile', cls='icon is-small action-button reaction-button') }} | |
95 {{ icon('ellipsis', cls='icon is-small action-button extra-button') }} | |
230 | 96 </div> |
403 | 97 </div> |
364
095bd5b34080
chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents:
363
diff
changeset
|
98 |
403 | 99 <div id="msg_reactions_{{msg.id}}"> |
100 {% if msg.extra.reactions is defined %} | |
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 | 103 {% endif %} |
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 | 135 </div> |
136 </div> |