Mercurial > libervia-templates
changeset 385:941e4006ab6e
bulma (message): reactions + fixes:
- add "reaction" button
- fix attachments display
- add reaction templates
- add reactions to messages
- fix "info" messages display
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Wed, 22 Nov 2023 15:22:11 +0100 |
| parents | 4e050f67c079 |
| children | e63fb06052ae |
| files | sat_templates/templates/bulma/chat/chat.html sat_templates/templates/bulma/chat/message.html sat_templates/templates/bulma/chat/reactions.html sat_templates/templates/bulma/chat/reactions_details.html sat_templates/templates/bulma/components/search_item.html sat_templates/templates/bulma/components/url_preview.html sat_templates/templates/bulma/components/url_preview_control.html sat_templates/templates/bulma/static/chat.css sat_templates/templates/bulma/static/styles.css |
| diffstat | 9 files changed, 83 insertions(+), 22 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/chat/chat.html Wed Nov 22 15:22:10 2023 +0100 +++ b/sat_templates/templates/bulma/chat/chat.html Wed Nov 22 15:22:11 2023 +0100 @@ -3,7 +3,7 @@ {% block body %} {{ icon_defs( "lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach", - "paper-plane-empty", "doc", "download", "wrench", "eye" + "paper-plane-empty", "doc", "download", "wrench", "eye", "smile", "plus-circled" ) }} {# TODO: this should be done in a more generic way in dialog module #}
--- a/sat_templates/templates/bulma/chat/message.html Wed Nov 22 15:22:10 2023 +0100 +++ b/sat_templates/templates/bulma/chat/message.html Wed Nov 22 15:22:11 2023 +0100 @@ -1,7 +1,7 @@ {% 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 msg.type != C.MESS_TYPE_INFO %} + {%- 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") }} @@ -9,7 +9,7 @@ {% endif -%} <div class="media-content is-relative"> <div class="content"> - {%- if msg.type != C.MESS_TYPE_INFO %} + {%- if msg.type != "info" %} <nav class="level is-mobile is-marginless is-size-7"> <div class="level-left has-text-weight-bold"> <div class="level-item"> @@ -36,7 +36,7 @@ </div> </nav> {% endif -%} - <p class="msg_body has-whitespace-pre-wrap" id="msg_body_{{msg.id}}" style="margin: 0;"> + <p class="msg_body has-whitespace-pre-wrap {{ "has-text-info" if msg.type=="info" }}" id="msg_body_{{msg.id}}" style="margin: 0;"> {{- msg.html or (msg.text|e|urlize|safe) -}} </p> @@ -45,26 +45,41 @@ </div> <div id="actions_{{msg.id}}" class="level is-mobile actions mb-0"> - <div class="level-right"> - {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #} - {{ icon('dot-3', cls='icon is-small action-button', id='msg_actions_{{msg.id}}') }} - </div> + {#{{ 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;"> - <!-- Reactions will go here --> + {% if msg.extra.reactions is defined %} + {% set reactions = msg.extra.get("reactions") %} + {% include 'chat/reactions.html' %} + {% endif %} </div> {% if msg.attachments %} <div class="message-attachments pt-2"> {%- for attachment in msg.attachments %} <figure class="image message-attachment"> - {%- if attachment.media_type|media_type_main == 'image' %} - <img src="{{attachment.sources[0].url}}" alt="{{attachment.name}}"> - {%- else %} - {{ icon('doc', cls='icon') }} - {%- endif %} - <figcaption class="has-text-centered is-size-7"> - <a href="{{attachment.sources[0].url if attachment.sources}}" target="_blank" class="has-text-grey">{{attachment.name}}</a> - </figcaption> + {%- if not attachment.url -%} + <div class="notification is-warning"> + <div class="is-size-6 has-text-weight-semibold mb-1"> + {% trans name=attachment.name %}Attachment: {{name}}{% endtrans %} + </div> + + <div class="is-size-7 mb-1"> + {% trans %}Cannot be opened as there are no sources available.{% endtrans %} + </div> + + </div> + {%- else -%} + {%- if attachment.media_type|media_type_main == 'image' %} + <img src="{{attachment.url}}" alt="{{attachment.name}}"> + {%- else %} + {{ icon('doc', cls='icon') }} + {%- endif %} + <figcaption class="has-text-centered is-size-7"> + <a href="{{attachment.url}}" target="_blank" class="has-text-grey">{{attachment.name}}</a> + </figcaption> + {%- endif -%} </figure> {%- endfor %} </div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/chat/reactions.html Wed Nov 22 15:22:11 2023 +0100 @@ -0,0 +1,11 @@ +<div class="reactions-container is-flex-wrap-wrap"> + {% for emoji, jids in reactions.items() %} + <div + class="reaction box is-shadowless is-inline-flex is-align-items-center my-1 ml-0 mr-2 px-2 py-1 is-size-6 has-background-light has-border is-not-selectable" + data-jids='{{jids|tojson}}' + > + <span class="emoji has-text-weight-semibold">{{ emoji }}</span> + <span class="counter">{{ jids|length }}</span> + </div> + {% endfor %} +</div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/chat/reactions_details.html Wed Nov 22 15:22:11 2023 +0100 @@ -0,0 +1,12 @@ +{% import 'components/avatar.html' as avatar with context %} + +<div class="reacting-users-list"> + {% for jid in reacting_jids %} + <div class="reacting-user-item is-flex is-align-items-center mb-2"> + {{ avatar.avatar(jid, "is-24x24") }} + <span class="reacting-user-nickname ml-2"> + {{ identities[jid].nicknames[0] if identities[jid].nicknames else jid }} + </span> + </div> + {% endfor %} +</div>
--- a/sat_templates/templates/bulma/components/search_item.html Wed Nov 22 15:22:10 2023 +0100 +++ b/sat_templates/templates/bulma/components/search_item.html Wed Nov 22 15:22:11 2023 +0100 @@ -23,4 +23,3 @@ {% block call %}{% endblock %} </div> </div> -p
--- a/sat_templates/templates/bulma/components/url_preview.html Wed Nov 22 15:22:10 2023 +0100 +++ b/sat_templates/templates/bulma/components/url_preview.html Wed Nov 22 15:22:11 2023 +0100 @@ -1,7 +1,7 @@ {% if url_preview %} -<div id="url-preview" class="box m-2 url-preview has-background-light"> +<div id="url-preview" class="box my-2 url-preview has-background-light"> <div class="has-text-right"> <span class="tag is-dark is-rounded is-fullwidth-mobile has-text-centered-mobile mb-2"> {% trans %}Preview{% endtrans %}
--- a/sat_templates/templates/bulma/components/url_preview_control.html Wed Nov 22 15:22:10 2023 +0100 +++ b/sat_templates/templates/bulma/components/url_preview_control.html Wed Nov 22 15:22:11 2023 +0100 @@ -1,5 +1,5 @@ {% block url_preview %} -<div class="notification is-info is-light m-5"> +<div class="notification is-info is-light my-5"> <div class="content"> <h4 class="title is-4">{% trans %}URL Preview{% endtrans %}</h4> <p class="mb-4">{% trans %}To protect your privacy, we don't automatically fetch URL previews. If you want to preview this URL, just hit the "Fetch Preview" button. You can customize this preference in your settings.{% endtrans %}</p>
--- a/sat_templates/templates/bulma/static/chat.css Wed Nov 22 15:22:10 2023 +0100 +++ b/sat_templates/templates/bulma/static/chat.css Wed Nov 22 15:22:11 2023 +0100 @@ -22,7 +22,7 @@ padding-left: 1.5em; } -.is-chat-message:hover { +.is-chat-message:hover, .chat-message-highlight { background-color: #f5f5f5; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } @@ -42,13 +42,15 @@ opacity: 0; } -.is-chat-message:hover .actions { +.is-chat-message:hover .actions, .chat-message-highlight .actions { opacity: 1; } .action-button { box-sizing: border-box; margin: 0 0.2rem; + user-select: none; + z-index: 10; } .action-button:hover {
--- a/sat_templates/templates/bulma/static/styles.css Wed Nov 22 15:22:10 2023 +0100 +++ b/sat_templates/templates/bulma/static/styles.css Wed Nov 22 15:22:11 2023 +0100 @@ -628,6 +628,19 @@ } } +/******************* + * common features * + ******************/ + +.reaction { + border-radius: 12px; /* Rounded background */ + cursor: pointer; /* Pointer cursor for the entire reaction */ + border: 1px solid #dbdbdb; /* Discreet but visible border */ +} + +.reaction .emoji { + margin-right: .5rem; /* Space between emoji and counter using rem unit */ +} /************** * animations * @@ -772,3 +785,12 @@ .animation-reverse { animation-direction: reverse; } + +/*************** + * third party * + **************/ + +emoji-picker { + width: 100%; + /* height: 30rem; */ +}