Mercurial > libervia-templates
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 |
rev | line source |
---|---|
230 | 1 {% if not embedded %}{% extends 'base/base.html' %}{% endif %} |
2 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %} | |
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 | 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 | 39 {% include 'chat/message.html' %} |
40 {% endfor %} | |
230 | 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 | 72 </div> |
73 {% endblock body %} | |
74 | |
75 {% block footer %}{% endblock footer %} |