Mercurial > libervia-templates
changeset 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 | a5588ea3bcd6 |
| children | |
| files | sat_templates/templates/bulma/chat/chat.html sat_templates/templates/bulma/chat/extra_menu.html sat_templates/templates/bulma/chat/extra_recipient_field.html sat_templates/templates/bulma/chat/input_extra_menu.html sat_templates/templates/bulma/chat/message_input.html sat_templates/templates/bulma/static/chat.css |
| diffstat | 6 files changed, 108 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/chat/chat.html Fri Jul 04 12:41:07 2025 +0200 +++ b/sat_templates/templates/bulma/chat/chat.html Fri Jul 04 17:33:22 2025 +0200 @@ -6,7 +6,7 @@ {% block title %}{{ target_jid }} - {{ super() }}{% endblock %} {% block body %} {{ icon_defs( - "check", "comment-dots", "ellipsis", "lock", "paperclip", "pencil", "quote-left", "reply", "regular face-smile", "regular trash-can", "share-nodes", "unlock" + "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" ) }}
--- a/sat_templates/templates/bulma/chat/extra_menu.html Fri Jul 04 12:41:07 2025 +0200 +++ b/sat_templates/templates/bulma/chat/extra_menu.html Fri Jul 04 17:33:22 2025 +0200 @@ -19,5 +19,10 @@ </a> </li> {% endif %} + <li class="action_forward"> + <a href="#" class=""> + {{ icon('regular share-from-square', cls='icon is-small') }} {% trans %}Forward{% endtrans %} + </a> + </li> </ul> </div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/chat/extra_recipient_field.html Fri Jul 04 17:33:22 2025 +0200 @@ -0,0 +1,26 @@ +<div class="recipient-field field has-addons mb-2"> + <div class="control"> + <div class="select"> + {% set selected = selected|default('to') %} + <select> + <option value="to" {% if selected == 'to' %}selected{% endif %}> + {% trans %}To{% endtrans %} + </option> + <option value="cc" {% if selected == 'cc' %}selected{% endif %}> + {% trans %}Cc{% endtrans %} + </option> + <option value="bcc" {% if selected == 'bcc' %}selected{% endif %}> + {% trans %}Bcc{% endtrans %} + </option> + </select> + </div> + </div> + <div class="control is-expanded"> + <input class="input" type="text" placeholder="{{ _('Recipient JID') }}"> + </div> + <div class="control"> + <button class="button delete-action" title="{% trans %}Remove{% endtrans %}"> + <span class="delete"></span> + </button> + </div> +</div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/chat/input_extra_menu.html Fri Jul 04 17:33:22 2025 +0200 @@ -0,0 +1,18 @@ +<div class="menu extra-menu-popup"> + <ul class="menu-list"> + <li class="action_toggle_rich_editor"> + <a href="#"> + {% if rich_edit %} + {{ icon('pencil', cls='icon is-small') }} {% trans %}Switch to Simple Edition{% endtrans %} + {% else %} + {{ icon('pen-to-square', cls='icon is-small') }} {% trans %}Switch to Rich Edition{% endtrans %} + {% endif %} + </a> + </li> + <li class="action_toggle_extra_recipients"> + <a href="#"> + {{ icon('regular envelope', cls='icon is-small') }} {% trans %}Add Recipients{% endtrans %} + </a> + </li> + </ul> +</div>
--- a/sat_templates/templates/bulma/chat/message_input.html Fri Jul 04 12:41:07 2025 +0200 +++ b/sat_templates/templates/bulma/chat/message_input.html Fri Jul 04 17:33:22 2025 +0200 @@ -20,8 +20,42 @@ </div> </div> + <!-- Rich Editor Toolbar --> + <div id="rich-edit-toolbar" class="field is-grouped is-grouped-multiline is-hidden"> + <div class="control"> + <button class="rich-editor-btn button" type="button" data-action="bold"> + <span class="icon"><i class="fas fa-bold fa-sm"></i></span> + </button> + </div> + <div class="control"> + <button class="rich-editor-btn button" type="button" data-action="italic"> + <span class="icon"><i class="fas fa-italic fa-sm"></i></span> + </button> + </div> + <div class="control"> + <button class="rich-editor-btn button" type="button" data-action="underline"> + <span class="icon"><i class="fas fa-underline fa-sm"></i></span> + </button> + </div> + <div class="control"> + <button class="rich-editor-btn button" type="button" data-action="list-bullet"> + <span class="icon"><i class="fas fa-list-ul fa-sm"></i></span> + </button> + </div> + <div class="control"> + <button class="rich-editor-btn button" type="button" data-action="list-ordered"> + <span class="icon"><i class="fas fa-list-ol fa-sm"></i></span> + </button> + </div> + <div class="control"> + <button class="rich-editor-btn button" type="button" data-action="link"> + <span class="icon"><i class="fas fa-link fa-sm"></i></span> + </button> + </div> + </div> - <div class="field has-addons"> + <!-- Main Input --> + <div class="field has-addons is-align-items-flex-end"> <div class="control"> <button id="attach-button" class="button"> <span class="icon is-small"> @@ -30,8 +64,16 @@ </button> <input id="file-input" type="file" multiple="true" style="display: none" /> </div> + <div class="control"> + <button id="input-extra-button" class="button"> + <span class="icon is-small"> + {{ icon('ellipsis-vertical') }} + </span> + </button> + </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 id="message_input_area_rich" class="is-hidden"></div> </div> <div class="control"> <button class="button is-primary">
--- a/sat_templates/templates/bulma/static/chat.css Fri Jul 04 12:41:07 2025 +0200 +++ b/sat_templates/templates/bulma/static/chat.css Fri Jul 04 17:33:22 2025 +0200 @@ -57,8 +57,21 @@ padding: 1rem; } -.chat-input button { +.chat-input button, .chat-input input, .chat-input select { + height: auto; + min-height: 3rem; +} + +#message_input_area, #message_input_area_rich { height: 100%; + min-height: 3rem; +} + +div.ql-editor { + margin: 0 2px; + min-height: 3rem; + border: 1px lightgray solid; + padding: 11px; } .media.chat-message { @@ -74,6 +87,7 @@ overflow-wrap: anywhere; background-color: #f5f5f5; transition: background-color 0.2s, border-left 0.2s; + list-style-position: inside; } .message-core:hover, .message-core.has-popup-focus { background-color: #e8e8e8;