Mercurial > libervia-templates
annotate sat_templates/templates/bulma/chat/chat.html @ 404:66f98ee041d8 default tip
chat: add UI for replies/threads:
rel 457
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Tue, 06 May 2025 00:37:41 +0200 |
| parents | 65c53ec5e777 |
| 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( |
| 404 | 9 "comment-dots", "ellipsis", "paperclip", "pencil", "quote-left", "reply", "regular face-smile", "regular trash-can", "share-nodes" |
|
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 | |
| 404 | 100 <div id="input-panel-area"> |
| 101 {% include 'chat/message_input.html' %} | |
| 403 | 102 </div> |
| 103 | |
| 230 | 104 </div> |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
105 |
| 403 | 106 |
| 404 | 107 |
| 403 | 108 <!-- Right Panel --> |
| 109 | |
| 110 <div class="column is-2-desktop is-3-tablet chat-details {{ 'is-hidden' if chat_type != 'group' }}" id="right_panel"> | |
| 111 <div class="box is-shadowless has-background-white-bis is-full-height"> | |
| 112 <h3 class="title is-5 has-text-centered mb-4">Room Details</h3> | |
| 113 | |
| 114 {% if subject is defined %} | |
| 115 {% call collapsible_card("Subject", icon="fas fa-quote-left") %} | |
| 116 {{subject}} | |
| 117 {% endcall %} | |
| 118 {% endif %} | |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
119 |
| 403 | 120 <div class="card"> |
| 121 <div class="card-header has-background-info-light"> | |
| 122 <p class="card-header-title has-text-info-dark"> | |
| 123 <span class="icon"><i class="fas fa-users"></i></span> | |
| 124 <span>Members (<span id="occupants-count">0</span>)</span> | |
| 125 </p> | |
| 126 </div> | |
| 127 <div class="card-content py-3 px-4" id="group-occupants"> | |
| 128 </div> | |
| 129 </div> | |
| 130 </div> | |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
131 </div> |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
132 |
| 230 | 133 {% endblock body %} |
| 134 | |
| 135 {% block footer %}{% endblock footer %} |