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 %} |