annotate sat_templates/templates/bulma/chat/chat.html @ 411:f7a434581872 default tip

chat: Add forward, rich editing and extra recipients: - There is a new "forward" menu in message. For now, a simple prompt ask for recipient JID. - A new "extra" menu is available next to input field. Inside there are 2 items for now: add extra recipient, and toggle rich edit mode. - Extra recipient option add a field to add an email-like "to", "cc" or "bcc" recipients. - Rich edit let use rich styling such as bold, italic, underline, etc. rel 461
author Goffi <goffi@goffi.org>
date Fri, 04 Jul 2025 17:33:22 +0200
parents 44439110247f
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
1 {% if not embedded %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
2 {% set loading_screen = true %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
3 {% extends 'base/base.html' %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
4 {% endif %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
5 {% from 'components/collapsible_card.html' import collapsible_card %}
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
6 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
7 {% block body %}
364
095bd5b34080 chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents: 362
diff changeset
8 {{ icon_defs(
411
f7a434581872 chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents: 408
diff changeset
9 "check", "comment-dots", "ellipsis", "ellipsis-vertical", "regular envelope", "lock", "paperclip", "pencil", "pen-to-square", "quote-left", "reply", "regular face-smile", "regular share-from-square", "regular trash-can", "share-nodes", "unlock"
364
095bd5b34080 chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents: 362
diff changeset
10 ) }}
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
11
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
12
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
13
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
14 <div class="columns is-gapless chat-container">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
15 <!-- Left Panel -->
405
5016fb0ff62f Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents: 404
diff changeset
16 <div class="column is-2 left-sidebar has-background-dark" id="left_panel">
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
17 <aside class="menu pl-4">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
18 <button class="button is-ghost has-text-grey-light mb-2 pl-1 is-align-items-center is-justify-content-start is-fullwidth" id="new_chat_btn" aria-label="Start new discussion">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
19 <span class="icon">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
20 <i class="fas fa-circle-plus"></i>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
21 </span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
22 <span class="pt-1">Start New Chat</span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
23 </button>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
24 <p class="menu-label has-text-grey-light">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
25 {% trans %}Rooms{% endtrans %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
26 </p>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
27 <ul class="menu-list">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
28 {% for room_address, room_info in bookmarks.items() %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
29 <li>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
30 <a {{ {'href': chat_url + "/" + room_address}|xmlattr}} class="chat-jid has-text-white"><span class="icon"><i class="fas fa-hashtag"></i></span> {{ room_info.get('name', room_address.split('@')[0]) }}</a>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
31 </li>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
32 {% endfor %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
33 </ul>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
34 <p class="menu-label has-text-grey-light">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
35 Direct Messages
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
36 </p>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
37 <div id="direct-messages"></div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
38 </aside>
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
39 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
40
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
41 <!-- Main Chat Area -->
405
5016fb0ff62f Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents: 404
diff changeset
42 <div class="column is-8 main-panel chat-main" id="main_panel">
406
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
43 <div class="panel-header px-4 py-2">
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
44 <div class="level is-mobile">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
45 <div class="level-left">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
46 <div class="level-item">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
47 <button class="button is-small" id="left_panel-toggle" aria-label="Toggle left panel">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
48 <span class="icon"><i class="fas fa-bars"></i></span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
49 </button>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
50 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
51 <div class="level-item">
408
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
52 <h1 class="title is-5 mb-0 pt-1">{{target_jid}}</h1>
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
53 </div>
408
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
54 {% if data_policy is defined and data_policy_score is defined %}
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
55 {# Data Policy badge #}
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
56 <div class="level-item">
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
57 {% set color_class =
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
58 'success' if data_policy_score >= 8 else
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
59 'warning' if data_policy_score >= 5 else
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
60 'danger' %}
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
61 <div class="data-policy-badge tag is-{{ color_class }} is-clickable p-3">
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
62 <span class="icon fa fa-file-shield"></span>
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
63 <span class="pt-1">{{ data_policy_score }}</span>
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
64 </div>
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
65 </div>
44439110247f chat: Add a Data Policy badge:
Goffi <goffi@goffi.org>
parents: 406
diff changeset
66 {% endif %}
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
67 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
68 <div class="level-right">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
69 <div class="level-item">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
70 <div class="field has-addons">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
71 <div class="control">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
72 <input class="input is-small" type="text" placeholder="Search">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
73 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
74 <div class="control">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
75 <button class="button is-info is-small">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
76 <span class="icon is-small">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
77 <i class="fas fa-search"></i>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
78 </span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
79 </button>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
80 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
81 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
82 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
83 <div class="level-item">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
84 <button class="button is-small">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
85 <span class="icon"><i class="fas fa-cog"></i></span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
86 </button>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
87 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
88 <div class="level-item {{ "is-hidden" if chat_type != "group" }}">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
89 <button class="button is-small" id="right_panel-toggle">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
90 <span class="icon"><i class="fas fa-info-circle"></i></span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
91 </button>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
92 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
93 </div>
365
9860286068b9 chat/chat.html: display date when there is a date change between 2 messages
Goffi <goffi@goffi.org>
parents: 364
diff changeset
94 </div>
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
95 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
96
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
97 <!-- Messages -->
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
98 <div id="messages">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
99 {% for msg in messages %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
100 {% set current_date = msg.timestamp|date_fmt('full', date_only=True) %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
101 {% if loop.changed(current_date) %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
102 <div class="separator">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
103 <hr class="has-background-light" />
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
104 <span class="has-text-grey is-size-7">{{current_date}}</span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
105 <hr class="has-background-light" />
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
106 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
107 {% endif %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
108 {% include 'chat/message.html' %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
109 {% endfor %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
110 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
111
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
112
404
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
113 <div id="input-panel-area">
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
114 {% include 'chat/message_input.html' %}
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
115 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
116
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
117 </div>
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
118
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
119
404
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
120
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
121 <!-- Right Panel -->
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
122
405
5016fb0ff62f Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents: 404
diff changeset
123 <div class="column is-2-desktop is-3-tablet right-sidebar {{ 'is-hidden' if chat_type != 'group' }}" id="right_panel">
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
124 <div class="box is-shadowless has-background-white-bis is-full-height">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
125 <h3 class="title is-5 has-text-centered mb-4">Room Details</h3>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
126
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
127 {% if subject is defined %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
128 {% call collapsible_card("Subject", icon="fas fa-quote-left") %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
129 {{subject}}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
130 {% endcall %}
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
131 {% endif %}
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
132
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
133 <div class="card">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
134 <div class="card-header has-background-info-light">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
135 <p class="card-header-title has-text-info-dark">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
136 <span class="icon"><i class="fas fa-users"></i></span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
137 <span>Members (<span id="occupants-count">0</span>)</span>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
138 </p>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
139 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
140 <div class="card-content py-3 px-4" id="group-occupants">
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
141 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
142 </div>
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
143 </div>
362
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
144 </div>
b2b859a62e70 bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents: 329
diff changeset
145
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
146 {% endblock body %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
147
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
148 {% block footer %}{% endblock footer %}