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

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 9860286068b9
children e63fb06052ae
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 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
2 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
3 {% block body %}
364
095bd5b34080 chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents: 362
diff changeset
4 {{ icon_defs(
095bd5b34080 chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents: 362
diff changeset
5 "lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach",
385
941e4006ab6e bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents: 365
diff changeset
6 "paper-plane-empty", "doc", "download", "wrench", "eye", "smile", "plus-circled"
364
095bd5b34080 chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents: 362
diff changeset
7 ) }}
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
8
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
9 {# TODO: this should be done in a more generic way in dialog module #}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
10 <div id="modal" class="modal">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
11 <div class="modal-background"></div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
12 <div class="modal-content">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
13 <p class="image">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
14 <img id="modal-image" src="" alt="">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
15 </p>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
16 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
17 <button class="modal-close is-large" aria-label="close"></button>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
18 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
19
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
20 <div id="chat-panel" class="is-flex is-flex-direction-column is-justify-content-space-between is-align-items-stretch pt-4"> <!-- calculate height depending on your navbar size -->
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
21 <!-- Header -->
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
22 <div id="header" class="box p-4 is-flex is-justify-content-space-between is-align-items-center is-flex-shrink-0">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
23 {% if subject is defined %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
24 <h2 id="room-subject" class="title is-5 has-text-weight-bold">{{- subject|urlize(nofollow=true,target='_blank') -}}</h2>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
25 {% endif %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
26 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
27
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
28 <!-- Messages -->
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
29 <div id="messages" class="box p-4 has-background-white mb-4 is-flex-grow-1 is-flex-direction-column-reverse is-overflow-auto">
329
6a26c8a43d10 bulma (chat): fix chat:
Goffi <goffi@goffi.org>
parents: 246
diff changeset
30 {% for msg in messages %}
365
9860286068b9 chat/chat.html: display date when there is a date change between 2 messages
Goffi <goffi@goffi.org>
parents: 364
diff changeset
31 {% set current_date = msg.timestamp|date_fmt('full', date_only=True) %}
9860286068b9 chat/chat.html: display date when there is a date change between 2 messages
Goffi <goffi@goffi.org>
parents: 364
diff changeset
32 {% if loop.changed(current_date) %}
9860286068b9 chat/chat.html: display date when there is a date change between 2 messages
Goffi <goffi@goffi.org>
parents: 364
diff changeset
33 <div class="separator">
9860286068b9 chat/chat.html: display date when there is a date change between 2 messages
Goffi <goffi@goffi.org>
parents: 364
diff changeset
34 <hr class="has-background-light" />
9860286068b9 chat/chat.html: display date when there is a date change between 2 messages
Goffi <goffi@goffi.org>
parents: 364
diff changeset
35 <span class="has-text-grey is-size-7">{{current_date}}</span>
9860286068b9 chat/chat.html: display date when there is a date change between 2 messages
Goffi <goffi@goffi.org>
parents: 364
diff changeset
36 <hr class="has-background-light" />
9860286068b9 chat/chat.html: display date when there is a date change between 2 messages
Goffi <goffi@goffi.org>
parents: 364
diff changeset
37 </div>
9860286068b9 chat/chat.html: display date when there is a date change between 2 messages
Goffi <goffi@goffi.org>
parents: 364
diff changeset
38 {% endif %}
329
6a26c8a43d10 bulma (chat): fix chat:
Goffi <goffi@goffi.org>
parents: 246
diff changeset
39 {% include 'chat/message.html' %}
6a26c8a43d10 bulma (chat): fix chat:
Goffi <goffi@goffi.org>
parents: 246
diff changeset
40 {% endfor %}
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
41 </div>
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
42
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
43 <!-- Attachments -->
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
44 <div id="attachments" class="box has-background-white is-flex is-flex-grow-0 is-flex-shrink-0 is-align-items-center is-overflow-auto is-contracted">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
45 {% for file in attachments %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
46 {% include 'chat/attachment_preview.html' %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
47 {% endfor %}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
48 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
49
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
50 <!-- Input -->
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
51 <div id="input-area" class="field has-addons py-4 is-flex-shrink-0">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
52 <p class="control is-expanded">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
53 <textarea id="message_input" class="textarea" name="message" type="text" rows="1" placeholder="{{_("enter your message")}}"></textarea>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
54 </p>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
55 <div class="control">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
56 <button class="button" id="attach_button">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
57 <span class="icon is-small">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
58 {{ icon('attach', cls='has-text-info') }}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
59 </span>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
60 </button>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
61 <input id="file_input" type="file" multiple="true" style="display: none" />
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
62 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
63 <div class="control">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
64 <button class="button" id="send_button">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
65 <span class="icon is-small">
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
66 {{ icon('paper-plane-empty') }}
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
67 </span>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
68 </button>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
69 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
70 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
71
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 {% endblock body %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
74
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
75 {% block footer %}{% endblock footer %}