Mercurial > libervia-templates
changeset 364:095bd5b34080
chat: add templates for URL previews
author | Goffi <goffi@goffi.org> |
---|---|
date | Wed, 28 Jun 2023 10:40:53 +0200 |
parents | cddac8502c4b |
children | 9860286068b9 |
files | sat_templates/templates/bulma/chat/chat.html sat_templates/templates/bulma/chat/message.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 |
diffstat | 5 files changed, 98 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/chat/chat.html Wed Jun 28 10:40:53 2023 +0200 +++ b/sat_templates/templates/bulma/chat/chat.html Wed Jun 28 10:40:53 2023 +0200 @@ -1,7 +1,10 @@ {% if not embedded %}{% extends 'base/base.html' %}{% endif %} {% block title %}{{ target_jid }} - {{ super() }}{% endblock %} {% block body %} - {{ icon_defs("lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach", "paper-plane-empty", "doc", "download") }} + {{ icon_defs( + "lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach", + "paper-plane-empty", "doc", "download", "wrench", "eye" + ) }} {# TODO: this should be done in a more generic way in dialog module #} <div id="modal" class="modal">
--- a/sat_templates/templates/bulma/chat/message.html Wed Jun 28 10:40:53 2023 +0200 +++ b/sat_templates/templates/bulma/chat/message.html Wed Jun 28 10:40:53 2023 +0200 @@ -39,6 +39,11 @@ <p class="msg_body has-whitespace-pre-wrap" id="msg_body_{{msg.id}}" style="margin: 0;"> {{- msg.html or (msg.text|e|urlize|safe) -}} </p> + + <div class="url-previews is-hidden"> + <div class="icon-container"></div> + </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}}') }} #}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/components/url_preview.html Wed Jun 28 10:40:53 2023 +0200 @@ -0,0 +1,46 @@ + +{% if url_preview %} + +<div id="url-preview" class="box m-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 %} + </span> + </div> + <article class="media"> + {% if url_preview.image %} + <figure class="media-left is-hidden-touch"> + <p class="image is-64x64"> + <img src="{{ url_preview.image }}" alt=""> + </p> + </figure> + {% endif %} + <div class="media-content"> + <div class="content"> + {% if url_preview.image %} + <p class="is-hidden-desktop"> + <img src="{{ url_preview.image }}" alt="" class="image is-64x64 mb-2"> + </p> + {% endif %} + <p> + <strong><a href="{{ url_preview.url }}" class="has-text-dark">{{ url_preview.title }}</a></strong> <br> + {% if url_preview.author_name %} + <small>{% trans %}By{% endtrans %} <a href="{{ url_preview.author_url }}">{{ url_preview.author_name }}</a></small> <br> + {% endif %} + {{ url_preview.description }} + </p> + + </div> + </div> + </article> +{% if url_preview.html %} + <div class="url-preview-iframe-container"> + <iframe class="url-preview-iframe" srcdoc="{{url_preview.html}}" frameborder="0" sandbox="{{'allow-scripts allow-same-origin' if url_preview.html_known}}"></iframe> + </div> +{% endif %} + + <footer class="content has-text-right"> + <a href="{{ url_preview.provider_url }}" class="has-text-grey">{% trans %}source:{% endtrans %} {{ url_preview.provider_name }}</a> + </footer> +</div> +{% endif %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/components/url_preview_control.html Wed Jun 28 10:40:53 2023 +0200 @@ -0,0 +1,22 @@ +{% block url_preview %} +<div class="notification is-info is-light m-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> + <div class="buttons"> + <a class="button is-link action_go_to_settings" href="#"> + <span class="icon"> + {{ icon('wrench') }} + </span> + <span>{% trans %}Go to Settings{% endtrans %}</span> + </a> + <button class="button is-primary action_fetch_preview"> + <span class="icon"> + {{ icon('eye') }} + </span> + <span>{% trans %}Fetch Preview{% endtrans %}</span> + </button> + </div> + </div> +</div> +{% endblock url_preview %}
--- a/sat_templates/templates/bulma/static/chat.css Wed Jun 28 10:40:53 2023 +0200 +++ b/sat_templates/templates/bulma/static/chat.css Wed Jun 28 10:40:53 2023 +0200 @@ -65,7 +65,27 @@ height: 100%; } -/* attachments */ +/* URL previews */ + +.url-preview-iframe-container { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + max-width: 100%; + background: #000; +} + +.url-preview-iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; +} + +/* Attachments */ #attachments { opacity: 1;