Mercurial > libervia-templates
changeset 386:e63fb06052ae
bulma: message edition + extra menu + improvments:
- add an extra menu template with `Edit` and `Quote`
- add a template for previous editions popup
- fix `own_msg` class application
- add CSS for edit mode
- cosmetic changes
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Tue, 28 Nov 2023 17:48:00 +0100 |
| parents | 941e4006ab6e |
| children | 8b990c78d4b5 |
| files | sat_templates/templates/bulma/chat/chat.html sat_templates/templates/bulma/chat/editions.html sat_templates/templates/bulma/chat/extra_menu.html sat_templates/templates/bulma/chat/message.html sat_templates/templates/bulma/static/chat.css |
| diffstat | 5 files changed, 55 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/chat/chat.html Wed Nov 22 15:22:11 2023 +0100 +++ b/sat_templates/templates/bulma/chat/chat.html Tue Nov 28 17:48:00 2023 +0100 @@ -3,7 +3,8 @@ {% block body %} {{ icon_defs( "lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach", - "paper-plane-empty", "doc", "download", "wrench", "eye", "smile", "plus-circled" + "paper-plane-empty", "doc", "download", "wrench", "eye", "smile", "plus-circled", + "quote-left" ) }} {# TODO: this should be done in a more generic way in dialog module #}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/chat/editions.html Tue Nov 28 17:48:00 2023 +0100 @@ -0,0 +1,12 @@ +<ul> + {% for edition in editions %} + <li class="m-2"> + <span class="tag is-info is-light"> + {{ edition.timestamp | date_fmt(fmt="auto_day", auto_new_fmt="relative") }} + </span> + <span class="ml-2">{{ edition.text }}</span> + </li> + {% endfor %} +</ul> + +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/chat/extra_menu.html Tue Nov 28 17:48:00 2023 +0100 @@ -0,0 +1,16 @@ +<div class="extra-menu-popup"> + <ul class="menu-list"> + <li class="action_quote"> + <a href="#" class=""> + {{ icon('quote-left', cls='icon is-small') }} {% trans %}Quote{% endtrans %} + </a> + </li> + {% if edit %} + <li class="action_edit"> + <a href="#" class=""> + {{ icon('pencil', cls='icon is-small') }} {% trans %}Edit{% endtrans %} + </a> + </li> + {% endif %} + </ul> +</div>
--- a/sat_templates/templates/bulma/chat/message.html Wed Nov 22 15:22:11 2023 +0100 +++ b/sat_templates/templates/bulma/chat/message.html Tue Nov 28 17:48:00 2023 +0100 @@ -1,6 +1,19 @@ {% import 'components/avatar.html' as avatar with context %} -<div id="{{msg.id}}" class="media is-chat-message msg_{{msg.type}} {{'own_msg' if msg.from_ == own_jid}}" style="padding: 0.5em;" role="listitem" aria-label="Chat Message"> +{% if chat_type == "group" %} + {% set own_msg = msg.from_==own_jid %} +{% else %} + {% set own_msg = msg.from_|bare_jid==own_jid|bare_jid %} +{% endif %} + +<div + id="{{msg.id}}" + class="media is-chat-message msg_{{msg.type}} {{'own_msg' if own_msg}}" + style="padding: 0.5em;" + role="listitem" + aria-label="Chat Message" + {% if msg.extra.editions %}data-editions='{{msg.extra.editions|tojson}}'{% endif %} + > {%- if msg.type != "info" %} {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%} <figure class="media-left pt-1"> @@ -10,7 +23,7 @@ <div class="media-content is-relative"> <div class="content"> {%- if msg.type != "info" %} - <nav class="level is-mobile is-marginless is-size-7"> + <nav class="level is-mobile is-marginless is-size-7 is-not-selectable"> <div class="level-left has-text-weight-bold"> <div class="level-item"> <span class="author" id="msg_author_{{msg.id}}">{{author}}</span> @@ -18,8 +31,11 @@ </div> <div class="level-right is-italic"> <div class="level-item"> - <span class="date" id="msg_date_{{msg.id}}">{{msg.timestamp|date_fmt('auto_day')}}</span> + <span class="date" id="msg_date_{{msg.id}}">{{(msg.extra.updated or msg.timestamp)|date_fmt('short', tz_name=tz_name)}}</span> <div id="status_icons_{{msg.id}}" class="status-icons level-item has-padding-left"> + {% if msg.extra.editions %} + {{ icon('pencil', cls='icon is-small message-editions') }} + {% endif %} {% if msg.encrypted %} {{ icon('lock-filled', cls='icon is-small has-text-success') }} {% else %}
--- a/sat_templates/templates/bulma/static/chat.css Wed Nov 22 15:22:11 2023 +0100 +++ b/sat_templates/templates/bulma/static/chat.css Tue Nov 28 17:48:00 2023 +0100 @@ -17,12 +17,17 @@ min-height: 48px; } +/* Input "edit" mode */ +#message_input.mode_edit { + background-color: #d1ecf1; +} + .is-chat-message { transition: all 0.3s ease; padding-left: 1.5em; } -.is-chat-message:hover, .chat-message-highlight { +.is-chat-message:hover, .is-chat-message.has-popup-focus { background-color: #f5f5f5; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); }