Mercurial > libervia-templates

comparison sat_templates/templates/bulma/chat/message.html @ 362:b2b859a62e70

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (chat): new templates and CSS for chat page.
author Goffi <goffi@goffi.org>
date Wed, 28 Jun 2023 10:40:50 +0200
parents f5f428a50c10
children cddac8502c4b
comparison
equal deleted inserted replaced
361:e44c0627d00b 362:b2b859a62e70
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.full()}}"> 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 != C.MESS_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"> 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"> 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 != C.MESS_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">{{author}}</span> 16 <span class="author" id="msg_author_{{msg.id}}">{{author}}</span>
17 </div> 17 </div>
18 </div> 18 </div>
19 <div class="level-right is-italic"> 19 <div class="level-right is-italic">
20 <div class="level-item"> 20 <div class="level-item">
21 <span class="date">{{msg.timestamp|date_fmt('auto_day')}}</span> 21 <span class="date" id="msg_date_{{msg.id}}">{{msg.timestamp|date_fmt('auto_day')}}</span>
22 <div id="status_icons_{{msg.id}}" class="status-icons level-item has-padding-left">
23 {% if msg.encrypted %}
24 {{ icon('lock-filled', cls='icon is-small has-text-success') }}
25 {% else %}
26 {{ icon('lock-open', cls='icon is-small has-text-danger') }}
27 {% endif %}
28 {% if msg.received %}
29 {{ icon('ok', cls='icon is-small has-text-link') }}
30 {% endif %}
31 {% if msg.edited %}
32 {{ icon('pencil', cls='icon is-small has-text-info') }}
33 {% endif %}
34 </div>
22 </div> 35 </div>
23 </div> 36 </div>
24 </nav> 37 </nav>
25 {% endif -%} 38 {% endif -%}
26 <p class="msg_body has-whitespace-pre-wrap"> 39 <p class="msg_body has-whitespace-pre-wrap" id="msg_body_{{msg.id}}" style="margin: 0;">
27 {{- msg.html or (msg.text|urlize(nofollow=true, target="_blank")) -}} 40 {{- msg.html or (msg.text|urlize) -}}
28 </p> 41 </p>
42 <div id="actions_{{msg.id}}" class="level is-mobile actions mb-0">
43 <div class="level-right">
44 {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #}
45 {{ icon('dot-3', cls='icon is-small action-button', id='msg_actions_{{msg.id}}') }}
46 </div>
47 </div>
48 <div id="msg_reactions_{{msg.id}}" style="margin-top: 0.5em;">
49 <!-- Reactions will go here -->
50 </div>
51 {% if msg.attachments %}
52 <div class="message-attachments pt-2">
53 {%- for attachment in msg.attachments %}
54 <figure class="image message-attachment">
55 {%- if attachment.media_type|media_type_main == 'image' %}
56 <img src="{{attachment.sources[0].url}}" alt="{{attachment.name}}">
57 {%- else %}
58 {{ icon('doc', cls='icon') }}
59 {%- endif %}
60 <figcaption class="has-text-centered is-size-7">
61 <a href="{{attachment.sources[0].url}}" target="_blank" class="has-text-grey">{{attachment.name}}</a>
62 </figcaption>
63 </figure>
64 {%- endfor %}
65 </div>
66 {% endif %}
29 </div> 67 </div>
30 </div> 68 </div>
31 </div> 69 </div>