Mercurial > libervia-templates

annotate sat_templates/templates/bulma/chat/message.html @ 371:a5a80d761e3e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (call): update template to integrate call features: previously, call template was a minimum UI for testing implementation. This commit introduce a usable UI with search interface, mute and full screen button, animations, and other UI/UX improvments. rel 423
author Goffi <goffi@goffi.org>
date Wed, 09 Aug 2023 00:11:39 +0200
parents 095bd5b34080
children 941e4006ab6e
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
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
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">
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
4 {%- if msg.type != C.MESS_TYPE_INFO %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
5 {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%}
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
6 <figure class="media-left pt-1">
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
7 {{ avatar.avatar(msg.from_, "is-32x32") }}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
8 </figure>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
9 {% endif -%}
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
10 <div class="media-content is-relative">
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
11 <div class="content">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
12 {%- if msg.type != C.MESS_TYPE_INFO %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
13 <nav class="level is-mobile is-marginless is-size-7">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
14 <div class="level-left has-text-weight-bold">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
15 <div class="level-item">
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
16 <span class="author" id="msg_author_{{msg.id}}">{{author}}</span>
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
17 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
18 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
19 <div class="level-right is-italic">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
20 <div class="level-item">
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
21 <span class="date" id="msg_date_{{msg.id}}">{{msg.timestamp|date_fmt('auto_day')}}</span>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
22 <div id="status_icons_{{msg.id}}" class="status-icons level-item has-padding-left">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
23 {% if msg.encrypted %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
24 {{ icon('lock-filled', cls='icon is-small has-text-success') }}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
25 {% else %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
26 {{ icon('lock-open', cls='icon is-small has-text-danger') }}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
27 {% endif %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
28 {% if msg.received %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
29 {{ icon('ok', cls='icon is-small has-text-link') }}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
30 {% endif %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
31 {% if msg.edited %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
32 {{ icon('pencil', cls='icon is-small has-text-info') }}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
33 {% endif %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
34 </div>
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
35 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
36 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
37 </nav>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
38 {% endif -%}
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
39 <p class="msg_body has-whitespace-pre-wrap" id="msg_body_{{msg.id}}" style="margin: 0;">
363
cddac8502c4b chat/message: fix urlize escaping on nunjucks:
Goffi <goffi@goffi.org>
parents: 362
diff changeset
40 {{- msg.html or (msg.text|e|urlize|safe) -}}
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
41 </p>
364
095bd5b34080 chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents: 363
diff changeset
42
095bd5b34080 chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents: 363
diff changeset
43 <div class="url-previews is-hidden">
095bd5b34080 chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents: 363
diff changeset
44 <div class="icon-container"></div>
095bd5b34080 chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents: 363
diff changeset
45 </div>
095bd5b34080 chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents: 363
diff changeset
46
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
47 <div id="actions_{{msg.id}}" class="level is-mobile actions mb-0">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
48 <div class="level-right">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
49 {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
50 {{ icon('dot-3', cls='icon is-small action-button', id='msg_actions_{{msg.id}}') }}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
51 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
52 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
53 <div id="msg_reactions_{{msg.id}}" style="margin-top: 0.5em;">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
54 <!-- Reactions will go here -->
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
55 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
56 {% if msg.attachments %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
57 <div class="message-attachments pt-2">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
58 {%- for attachment in msg.attachments %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
59 <figure class="image message-attachment">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
60 {%- if attachment.media_type|media_type_main == 'image' %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
61 <img src="{{attachment.sources[0].url}}" alt="{{attachment.name}}">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
62 {%- else %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
63 {{ icon('doc', cls='icon') }}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
64 {%- endif %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
65 <figcaption class="has-text-centered is-size-7">
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 364
diff changeset
66 <a href="{{attachment.sources[0].url if attachment.sources}}" target="_blank" class="has-text-grey">{{attachment.name}}</a>
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
67 </figcaption>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
68 </figure>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
69 {%- endfor %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
70 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 235
diff changeset
71 {% endif %}
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
72 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
73 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
74 </div>