Mercurial > libervia-templates
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 |
rev | line source |
---|---|
403 | 1 {% if not embedded %} |
2 {% set loading_screen = true %} | |
3 {% extends 'base/base.html' %} | |
4 {% endif %} | |
5 {% from 'components/collapsible_card.html' import collapsible_card %} | |
230 | 6 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %} |
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 | 12 |
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
13 |
403 | 14 <div class="columns is-gapless chat-container"> |
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 | 17 <aside class="menu pl-4"> |
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"> | |
19 <span class="icon"> | |
20 <i class="fas fa-circle-plus"></i> | |
21 </span> | |
22 <span class="pt-1">Start New Chat</span> | |
23 </button> | |
24 <p class="menu-label has-text-grey-light"> | |
25 {% trans %}Rooms{% endtrans %} | |
26 </p> | |
27 <ul class="menu-list"> | |
28 {% for room_address, room_info in bookmarks.items() %} | |
29 <li> | |
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> | |
31 </li> | |
32 {% endfor %} | |
33 </ul> | |
34 <p class="menu-label has-text-grey-light"> | |
35 Direct Messages | |
36 </p> | |
37 <div id="direct-messages"></div> | |
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 | 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 | 43 <div class="panel-header px-4 py-2"> |
403 | 44 <div class="level is-mobile"> |
45 <div class="level-left"> | |
46 <div class="level-item"> | |
47 <button class="button is-small" id="left_panel-toggle" aria-label="Toggle left panel"> | |
48 <span class="icon"><i class="fas fa-bars"></i></span> | |
49 </button> | |
50 </div> | |
51 <div class="level-item"> | |
408 | 52 <h1 class="title is-5 mb-0 pt-1">{{target_jid}}</h1> |
403 | 53 </div> |
408 | 54 {% if data_policy is defined and data_policy_score is defined %} |
55 {# Data Policy badge #} | |
56 <div class="level-item"> | |
57 {% set color_class = | |
58 'success' if data_policy_score >= 8 else | |
59 'warning' if data_policy_score >= 5 else | |
60 'danger' %} | |
61 <div class="data-policy-badge tag is-{{ color_class }} is-clickable p-3"> | |
62 <span class="icon fa fa-file-shield"></span> | |
63 <span class="pt-1">{{ data_policy_score }}</span> | |
64 </div> | |
65 </div> | |
66 {% endif %} | |
403 | 67 </div> |
68 <div class="level-right"> | |
69 <div class="level-item"> | |
70 <div class="field has-addons"> | |
71 <div class="control"> | |
72 <input class="input is-small" type="text" placeholder="Search"> | |
73 </div> | |
74 <div class="control"> | |
75 <button class="button is-info is-small"> | |
76 <span class="icon is-small"> | |
77 <i class="fas fa-search"></i> | |
78 </span> | |
79 </button> | |
80 </div> | |
81 </div> | |
82 </div> | |
83 <div class="level-item"> | |
84 <button class="button is-small"> | |
85 <span class="icon"><i class="fas fa-cog"></i></span> | |
86 </button> | |
87 </div> | |
88 <div class="level-item {{ "is-hidden" if chat_type != "group" }}"> | |
89 <button class="button is-small" id="right_panel-toggle"> | |
90 <span class="icon"><i class="fas fa-info-circle"></i></span> | |
91 </button> | |
92 </div> | |
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 | 95 </div> |
96 | |
97 <!-- Messages --> | |
98 <div id="messages"> | |
99 {% for msg in messages %} | |
100 {% set current_date = msg.timestamp|date_fmt('full', date_only=True) %} | |
101 {% if loop.changed(current_date) %} | |
102 <div class="separator"> | |
103 <hr class="has-background-light" /> | |
104 <span class="has-text-grey is-size-7">{{current_date}}</span> | |
105 <hr class="has-background-light" /> | |
106 </div> | |
107 {% endif %} | |
108 {% include 'chat/message.html' %} | |
109 {% endfor %} | |
110 </div> | |
111 | |
112 | |
404 | 113 <div id="input-panel-area"> |
114 {% include 'chat/message_input.html' %} | |
403 | 115 </div> |
116 | |
230 | 117 </div> |
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
118 |
403 | 119 |
404 | 120 |
403 | 121 <!-- Right Panel --> |
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 | 124 <div class="box is-shadowless has-background-white-bis is-full-height"> |
125 <h3 class="title is-5 has-text-centered mb-4">Room Details</h3> | |
126 | |
127 {% if subject is defined %} | |
128 {% call collapsible_card("Subject", icon="fas fa-quote-left") %} | |
129 {{subject}} | |
130 {% endcall %} | |
131 {% endif %} | |
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
132 |
403 | 133 <div class="card"> |
134 <div class="card-header has-background-info-light"> | |
135 <p class="card-header-title has-text-info-dark"> | |
136 <span class="icon"><i class="fas fa-users"></i></span> | |
137 <span>Members (<span id="occupants-count">0</span>)</span> | |
138 </p> | |
139 </div> | |
140 <div class="card-content py-3 px-4" id="group-occupants"> | |
141 </div> | |
142 </div> | |
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 | 146 {% endblock body %} |
147 | |
148 {% block footer %}{% endblock footer %} |