Mercurial > libervia-templates
diff sat_templates/templates/bulma/chat/message.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 | 2eaea9a9c234 |
| children | 66f98ee041d8 |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/chat/message.html Sat Oct 26 22:53:26 2024 +0200 +++ b/sat_templates/templates/bulma/chat/message.html Fri Apr 11 21:32:05 2025 +0200 @@ -8,74 +8,74 @@ <div id="{{msg.id}}" - class="media is-chat-message msg_{{msg.type}} {{'own_msg' if own_msg}} {{ 'is-retracted' if msg.extra.retracted }}" + 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' }}" {% 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"> - {{ avatar.avatar(msg.from_, "is-32x32") }} + <figure class="media-left"> + {{ avatar.avatar(msg.from_) }} </figure> {% endif -%} <div class="media-content is-relative"> - <div class="content"> {%- if msg.type != "info" %} - <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> - </div> + + <div> + + <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.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 %} + {{ icon('lock-open', cls='icon is-small has-text-danger') }} + {% endif %} + {% if msg.received %} + {{ icon('ok', cls='icon is-small has-text-link') }} + {% endif %} + {% if msg.edited %} + {{ icon('pencil', cls='icon is-small has-text-info') }} + {% endif %} + </span> + </div> + + {% endif -%} + <div class="message-core"> + <p class="message-body {{ "has-text-info" if msg.type=="info" or msg.extra.retracted }} m-0" id="message-body_{{msg.id}}"> + {%- if msg.extra.retracted %} + {% trans %}This message has been retracted.{% endtrans %} + {% else %} + {{- msg.html or (msg.text|e|urlize|safe) -}} + {% endif -%} + </p> + + <div class="url-previews is-hidden"> + <div class="icon-container"></div> + </div> + + <div + id="actions_{{msg.id}}" + class="level message-actions mb-0 mt-1 {{ "is-hidden" if msg.extra.retracted }}" + > + <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) }} </div> - <div class="level-right is-italic"> - <div class="level-item"> - <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 %} - {{ icon('lock-open', cls='icon is-small has-text-danger') }} - {% endif %} - {% if msg.received %} - {{ icon('ok', cls='icon is-small has-text-link') }} - {% endif %} - {% if msg.edited %} - {{ icon('pencil', cls='icon is-small has-text-info') }} - {% endif %} - </div> - </div> - </div> - </nav> - {% endif -%} - <p class="msg_body has-whitespace-pre-wrap {{ "has-text-info" if msg.type=="info" or msg.extra.retracted }} m-0" id="msg_body_{{msg.id}}"> - {%- if msg.extra.retracted %} - {% trans %}This message has been retracted.{% endtrans %} - {% else %} - {{- msg.html or (msg.text|e|urlize|safe) -}} - {% endif -%} - </p> + </div> - <div class="url-previews is-hidden"> - <div class="icon-container"></div> - </div> - - <div - id="actions_{{msg.id}}" - class="level is-mobile actions mb-0 {{ "is-hidden" if msg.extra.retracted }}" - > - {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #} - {{ icon('smile', cls='icon is-small action-button reaction-button', id='msg_actions_{{msg.id}}') }} - {{ icon('dot-3', cls='icon is-small action-button extra-button', id='msg_actions_{{msg.id}}') }} - </div> - <div id="msg_reactions_{{msg.id}}" style="margin-top: 0.5em;"> - {% if msg.extra.reactions is defined %} - {% set reactions = msg.extra.get("reactions") %} - {% include 'chat/reactions.html' %} - {% endif %} + <div id="msg_reactions_{{msg.id}}"> + {% if msg.extra.reactions is defined %} + {% set reactions = msg.extra.get("reactions") %} + {% include 'chat/reactions.html' %} + {% endif %} + </div> </div> {% if msg.attachments %} <div class="message-attachments pt-2"> @@ -106,6 +106,5 @@ {%- endfor %} </div> {% endif %} - </div> </div> </div>