Mercurial > libervia-templates
changeset 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 | |
files | sat_templates/templates/bulma/chat/chat.html sat_templates/templates/bulma/chat/message.html sat_templates/templates/bulma/chat/message_input.html sat_templates/templates/bulma/chat/thread_panel.html sat_templates/templates/bulma/static/chat.css sat_templates/templates/bulma/static/styles.css |
diffstat | 6 files changed, 79 insertions(+), 32 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/chat/chat.html Fri Apr 11 21:32:05 2025 +0200 +++ b/sat_templates/templates/bulma/chat/chat.html Tue May 06 00:37:41 2025 +0200 @@ -6,7 +6,7 @@ {% block title %}{{ target_jid }} - {{ super() }}{% endblock %} {% block body %} {{ icon_defs( - "share-nodes", "ellipsis","regular face-smile", "quote-left", "paperclip", "pencil", "regular trash-can" + "comment-dots", "ellipsis", "paperclip", "pencil", "quote-left", "reply", "regular face-smile", "regular trash-can", "share-nodes" ) }} @@ -96,40 +96,15 @@ {% endfor %} </div> - <!-- Attachments --> - <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"> - {% for file in attachments %} - {% include 'chat/attachment_preview.html' %} - {% endfor %} - </div> - <div id="message_input" class="chat-input"> - <div class="field has-addons"> - <div class="control"> - <button id="attach-button" class="button"> - <span class="icon is-small"> - {{ icon('paperclip') }} - </span> - </button> - <input id="file-input" type="file" multiple="true" style="display: none" /> - </div> - <div class="control is-expanded"> - <textarea id="message_input_area" class="textarea" name="message_input_area" type="text" rows="1" placeholder="{{_("Type your messageā¦")}}"></textarea> - </div> - <div class="control"> - <button class="button is-primary"> - <span class="icon is-small"> - <i class="fas fa-paper-plane"></i> - </span> - <span class="is-hidden-mobile">Send</span> - </button> - </div> - </div> + <div id="input-panel-area"> + {% include 'chat/message_input.html' %} </div> </div> + <!-- Right Panel --> <div class="column is-2-desktop is-3-tablet chat-details {{ 'is-hidden' if chat_type != 'group' }}" id="right_panel">
--- a/sat_templates/templates/bulma/chat/message.html Fri Apr 11 21:32:05 2025 +0200 +++ b/sat_templates/templates/bulma/chat/message.html Tue May 06 00:37:41 2025 +0200 @@ -9,9 +9,10 @@ <div id="{{msg.id}}" class="media chat-message msg_{{msg.type}} {{'own_msg' if own_msg}} {{ 'is-retracted' if msg.extra.retracted }}" - role="listitem" aria-label="{{ 'Retracted Message' if msg.extra.retracted else 'Chat Message' }}" + data-from='{{msg.from_}}' {% if msg.extra.editions %}data-editions='{{msg.extra.editions|tojson}}'{% endif %} + {% if msg.extra.thread %}data-thread='{{msg.extra.thread}}'{% endif %} > {%- if msg.type != "info" %} {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%} @@ -27,6 +28,9 @@ <span class="author" id="msg_author_{{msg.id}}">{{author}}</span> <span class="date" id="msg_date_{{msg.id}}">{{(msg.extra.updated or msg.timestamp)|date_fmt('short', tz_name=tz_name)}}</span> <span id="status_icons_{{msg.id}}" class="status-icons level-item has-padding-left"> + {% if msg.reply_to or msg.extra.thread %} + {{ icon('comment-dots', cls='icon is-small message-thread') }} + {% endif %} {% if msg.extra.editions %} {{ icon('pencil', cls='icon is-small message-editions') }} {% endif %} @@ -65,8 +69,9 @@ <div class="level-left"></div> <div class="level-right"> {# {{ icon('share-nodes', cls='icon is-small action-button', id='msg_share_' + msg.id) }} #} - {{ icon('regular face-smile', cls='icon is-small action-button reaction-button', id='msg_actions_' + msg.id) }} - {{ icon('ellipsis', cls='icon is-small action-button extra-button', id='msg_actions_' + msg.id) }} + {{ icon('reply', cls='icon is-small action-button reply-button')}} + {{ icon('regular face-smile', cls='icon is-small action-button reaction-button') }} + {{ icon('ellipsis', cls='icon is-small action-button extra-button') }} </div> </div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/chat/message_input.html Tue May 06 00:37:41 2025 +0200 @@ -0,0 +1,46 @@ + +<div id="input-panel"> + <!-- Attachments --> + <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"> + {% for file in attachments %} + {% include 'chat/attachment_preview.html' %} + {% endfor %} + </div> + + <div id="message_input" class="chat-input"> + + <!-- Reply Indicator --> + <div id="reply-to" class="mb-3 is-hidden"> + <div class="is-flex is-justify-content-space-between is-align-items-center"> + <div> + <span class="is-size-6"><strong>{% trans %}Replying to :{% endtrans %}</strong></span> + <div id="reply-to_message" class="mt-1 ml-1 is-size-7"></div> + </div> + <button id="cancel_reply_btn" class="button is-small is-danger is-rounded">Cancel</button> + </div> + </div> + + + <div class="field has-addons"> + <div class="control"> + <button id="attach-button" class="button"> + <span class="icon is-small"> + {{ icon('paperclip') }} + </span> + </button> + <input id="file-input" type="file" multiple="true" style="display: none" /> + </div> + <div class="control is-expanded"> + <textarea id="message_input_area" class="textarea" name="message_input_area" type="text" rows="1" placeholder="{{_("Type your messageā¦")}}"></textarea> + </div> + <div class="control"> + <button class="button is-primary"> + <span class="icon is-small"> + <i class="fas fa-paper-plane"></i> + </span> + <span id="send_button">{% trans %}Send{% endtrans %}</span> + </button> + </div> + </div> + </div> +</div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/chat/thread_panel.html Tue May 06 00:37:41 2025 +0200 @@ -0,0 +1,7 @@ +<nav class="panel has-background-light"> + <p class="panel-heading">Thread View</p> + <div class="panel-block mt-1" > + <div id="thread-messages" class="is-full-width"> + </div> + </div> +</nav>
--- a/sat_templates/templates/bulma/static/chat.css Fri Apr 11 21:32:05 2025 +0200 +++ b/sat_templates/templates/bulma/static/chat.css Tue May 06 00:37:41 2025 +0200 @@ -251,3 +251,13 @@ width: 9rem; height: 6rem; } + + +/* Reply to indicator */ +#reply-to { + background-color: var(--message-background); + border-left: 4px solid #3273dc; + padding: 0.5rem; + margin-bottom: 1rem; + border-radius: 0.25rem; +}