Mercurial > libervia-templates
annotate sat_templates/templates/bulma/chat/chat.html @ 403:65c53ec5e777
Bulma: complete redesign:
This is a WIP full redesign of the whole web UI. Only chat is usable at the moment, many
things are broken.
The design uses the new Bulma v1+, has a look closer to industry standards, paves the way
for a dark theme, and should be easy to use.
It's a basis for coming features such as UI/UX for threads.
rel 457
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Fri, 11 Apr 2025 21:32:05 +0200 |
| parents | 8b990c78d4b5 |
| children | 66f98ee041d8 |
| 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( |
| 403 | 9 "share-nodes", "ellipsis","regular face-smile", "quote-left", "paperclip", "pencil", "regular trash-can" |
|
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 --> | |
| 16 <div class="column is-2-desktop is-3-tablet chat-sidebar has-background-dark" id="left_panel"> | |
| 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 --> |
| 42 <div class="column is-8-desktop is-6-tablet chat-main" id="main_panel"> | |
| 43 <div class="chat-header"> | |
| 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"> | |
| 52 <h1 class="title is-5 mb-0">{{target_jid}}</h1> | |
| 53 </div> | |
| 54 </div> | |
| 55 <div class="level-right"> | |
| 56 <div class="level-item"> | |
| 57 <div class="field has-addons"> | |
| 58 <div class="control"> | |
| 59 <input class="input is-small" type="text" placeholder="Search"> | |
| 60 </div> | |
| 61 <div class="control"> | |
| 62 <button class="button is-info is-small"> | |
| 63 <span class="icon is-small"> | |
| 64 <i class="fas fa-search"></i> | |
| 65 </span> | |
| 66 </button> | |
| 67 </div> | |
| 68 </div> | |
| 69 </div> | |
| 70 <div class="level-item"> | |
| 71 <button class="button is-small"> | |
| 72 <span class="icon"><i class="fas fa-cog"></i></span> | |
| 73 </button> | |
| 74 </div> | |
| 75 <div class="level-item {{ "is-hidden" if chat_type != "group" }}"> | |
| 76 <button class="button is-small" id="right_panel-toggle"> | |
| 77 <span class="icon"><i class="fas fa-info-circle"></i></span> | |
| 78 </button> | |
| 79 </div> | |
| 80 </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
|
81 </div> |
| 403 | 82 </div> |
| 83 | |
| 84 <!-- Messages --> | |
| 85 <div id="messages"> | |
| 86 {% for msg in messages %} | |
| 87 {% set current_date = msg.timestamp|date_fmt('full', date_only=True) %} | |
| 88 {% if loop.changed(current_date) %} | |
| 89 <div class="separator"> | |
| 90 <hr class="has-background-light" /> | |
| 91 <span class="has-text-grey is-size-7">{{current_date}}</span> | |
| 92 <hr class="has-background-light" /> | |
| 93 </div> | |
| 94 {% endif %} | |
| 95 {% include 'chat/message.html' %} | |
| 96 {% endfor %} | |
| 97 </div> | |
| 98 | |
| 99 <!-- Attachments --> | |
| 100 <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"> | |
| 101 {% for file in attachments %} | |
| 102 {% include 'chat/attachment_preview.html' %} | |
| 103 {% endfor %} | |
| 104 </div> | |
| 105 | |
| 106 <div id="message_input" class="chat-input"> | |
| 107 <div class="field has-addons"> | |
| 108 <div class="control"> | |
| 109 <button id="attach-button" class="button"> | |
| 110 <span class="icon is-small"> | |
| 111 {{ icon('paperclip') }} | |
| 112 </span> | |
| 113 </button> | |
| 114 <input id="file-input" type="file" multiple="true" style="display: none" /> | |
| 115 </div> | |
| 116 <div class="control is-expanded"> | |
| 117 <textarea id="message_input_area" class="textarea" name="message_input_area" type="text" rows="1" placeholder="{{_("Type your message…")}}"></textarea> | |
| 118 </div> | |
| 119 <div class="control"> | |
| 120 <button class="button is-primary"> | |
| 121 <span class="icon is-small"> | |
| 122 <i class="fas fa-paper-plane"></i> | |
| 123 </span> | |
| 124 <span class="is-hidden-mobile">Send</span> | |
| 125 </button> | |
| 126 </div> | |
| 127 </div> | |
| 128 </div> | |
| 129 | |
| 230 | 130 </div> |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
131 |
| 403 | 132 |
| 133 <!-- Right Panel --> | |
| 134 | |
| 135 <div class="column is-2-desktop is-3-tablet chat-details {{ 'is-hidden' if chat_type != 'group' }}" id="right_panel"> | |
| 136 <div class="box is-shadowless has-background-white-bis is-full-height"> | |
| 137 <h3 class="title is-5 has-text-centered mb-4">Room Details</h3> | |
| 138 | |
| 139 {% if subject is defined %} | |
| 140 {% call collapsible_card("Subject", icon="fas fa-quote-left") %} | |
| 141 {{subject}} | |
| 142 {% endcall %} | |
| 143 {% endif %} | |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
144 |
| 403 | 145 <div class="card"> |
| 146 <div class="card-header has-background-info-light"> | |
| 147 <p class="card-header-title has-text-info-dark"> | |
| 148 <span class="icon"><i class="fas fa-users"></i></span> | |
| 149 <span>Members (<span id="occupants-count">0</span>)</span> | |
| 150 </p> | |
| 151 </div> | |
| 152 <div class="card-content py-3 px-4" id="group-occupants"> | |
| 153 </div> | |
| 154 </div> | |
| 155 </div> | |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
156 </div> |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
157 |
| 230 | 158 {% endblock body %} |
| 159 | |
| 160 {% block footer %}{% endblock footer %} |