Mercurial > libervia-templates

comparison sat_templates/templates/bulma/chat/message.html @ 385:941e4006ab6e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (message): reactions + fixes: - add "reaction" button - fix attachments display - add reaction templates - add reactions to messages - fix "info" messages display
author Goffi <goffi@goffi.org>
date Wed, 22 Nov 2023 15:22:11 +0100
parents a5a80d761e3e
children e63fb06052ae
comparison
equal deleted inserted replaced
384:4e050f67c079 385:941e4006ab6e
1 {% import 'components/avatar.html' as avatar with context %} 1 {% import 'components/avatar.html' as avatar with context %}
2 2
3 <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"> 3 <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">
4 {%- if msg.type != C.MESS_TYPE_INFO %} 4 {%- if msg.type != "info" %}
5 {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%} 5 {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%}
6 <figure class="media-left pt-1"> 6 <figure class="media-left pt-1">
7 {{ avatar.avatar(msg.from_, "is-32x32") }} 7 {{ avatar.avatar(msg.from_, "is-32x32") }}
8 </figure> 8 </figure>
9 {% endif -%} 9 {% endif -%}
10 <div class="media-content is-relative"> 10 <div class="media-content is-relative">
11 <div class="content"> 11 <div class="content">
12 {%- if msg.type != C.MESS_TYPE_INFO %} 12 {%- if msg.type != "info" %}
13 <nav class="level is-mobile is-marginless is-size-7"> 13 <nav class="level is-mobile is-marginless is-size-7">
14 <div class="level-left has-text-weight-bold"> 14 <div class="level-left has-text-weight-bold">
15 <div class="level-item"> 15 <div class="level-item">
16 <span class="author" id="msg_author_{{msg.id}}">{{author}}</span> 16 <span class="author" id="msg_author_{{msg.id}}">{{author}}</span>
17 </div> 17 </div>
34 </div> 34 </div>
35 </div> 35 </div>
36 </div> 36 </div>
37 </nav> 37 </nav>
38 {% endif -%} 38 {% endif -%}
39 <p class="msg_body has-whitespace-pre-wrap" id="msg_body_{{msg.id}}" style="margin: 0;"> 39 <p class="msg_body has-whitespace-pre-wrap {{ "has-text-info" if msg.type=="info" }}" id="msg_body_{{msg.id}}" style="margin: 0;">
40 {{- msg.html or (msg.text|e|urlize|safe) -}} 40 {{- msg.html or (msg.text|e|urlize|safe) -}}
41 </p> 41 </p>
42 42
43 <div class="url-previews is-hidden"> 43 <div class="url-previews is-hidden">
44 <div class="icon-container"></div> 44 <div class="icon-container"></div>
45 </div> 45 </div>
46 46
47 <div id="actions_{{msg.id}}" class="level is-mobile actions mb-0"> 47 <div id="actions_{{msg.id}}" class="level is-mobile actions mb-0">
48 <div class="level-right"> 48 {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #}
49 {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #} 49 {{ icon('smile', cls='icon is-small action-button reaction-button', id='msg_actions_{{msg.id}}') }}
50 {{ icon('dot-3', cls='icon is-small action-button', id='msg_actions_{{msg.id}}') }} 50 {{ icon('dot-3', cls='icon is-small action-button extra-button', id='msg_actions_{{msg.id}}') }}
51 </div>
52 </div> 51 </div>
53 <div id="msg_reactions_{{msg.id}}" style="margin-top: 0.5em;"> 52 <div id="msg_reactions_{{msg.id}}" style="margin-top: 0.5em;">
54 <!-- Reactions will go here --> 53 {% if msg.extra.reactions is defined %}
54 {% set reactions = msg.extra.get("reactions") %}
55 {% include 'chat/reactions.html' %}
56 {% endif %}
55 </div> 57 </div>
56 {% if msg.attachments %} 58 {% if msg.attachments %}
57 <div class="message-attachments pt-2"> 59 <div class="message-attachments pt-2">
58 {%- for attachment in msg.attachments %} 60 {%- for attachment in msg.attachments %}
59 <figure class="image message-attachment"> 61 <figure class="image message-attachment">
60 {%- if attachment.media_type|media_type_main == 'image' %} 62 {%- if not attachment.url -%}
61 <img src="{{attachment.sources[0].url}}" alt="{{attachment.name}}"> 63 <div class="notification is-warning">
62 {%- else %} 64 <div class="is-size-6 has-text-weight-semibold mb-1">
63 {{ icon('doc', cls='icon') }} 65 {% trans name=attachment.name %}Attachment: {{name}}{% endtrans %}
64 {%- endif %} 66 </div>
65 <figcaption class="has-text-centered is-size-7"> 67
66 <a href="{{attachment.sources[0].url if attachment.sources}}" target="_blank" class="has-text-grey">{{attachment.name}}</a> 68 <div class="is-size-7 mb-1">
67 </figcaption> 69 {% trans %}Cannot be opened as there are no sources available.{% endtrans %}
70 </div>
71
72 </div>
73 {%- else -%}
74 {%- if attachment.media_type|media_type_main == 'image' %}
75 <img src="{{attachment.url}}" alt="{{attachment.name}}">
76 {%- else %}
77 {{ icon('doc', cls='icon') }}
78 {%- endif %}
79 <figcaption class="has-text-centered is-size-7">
80 <a href="{{attachment.url}}" target="_blank" class="has-text-grey">{{attachment.name}}</a>
81 </figcaption>
82 {%- endif -%}
68 </figure> 83 </figure>
69 {%- endfor %} 84 {%- endfor %}
70 </div> 85 </div>
71 {% endif %} 86 {% endif %}
72 </div> 87 </div>