Mercurial > libervia-templates

comparison sat_templates/templates/bulma/chat/chat.html @ 362:b2b859a62e70

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (chat): new templates and CSS for chat page.
author Goffi <goffi@goffi.org>
date Wed, 28 Jun 2023 10:40:50 +0200
parents 6a26c8a43d10
children 095bd5b34080
comparison
equal deleted inserted replaced
361:e44c0627d00b 362:b2b859a62e70
1 {{ script.include('chat') }}
2 {% if not embedded %}{% extends 'base/base.html' %}{% endif %} 1 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
3 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %} 2 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %}
4 {% block body %} 3 {% block body %}
5 <div id="chat-panel"> 4 {{ icon_defs("lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach", "paper-plane-empty", "doc", "download") }}
6 {% if subject is defined %} 5
7 <div class="notification is-primary my-0"> 6 {# TODO: this should be done in a more generic way in dialog module #}
8 {{- subject|urlize(nofollow=true,target='_blank') -}} 7 <div id="modal" class="modal">
9 </div> 8 <div class="modal-background"></div>
10 {% endif %} 9 <div class="modal-content">
11 <div id="messages" class="has-background-white pt-4 px-4"> 10 <p class="image">
11 <img id="modal-image" src="" alt="">
12 </p>
13 </div>
14 <button class="modal-close is-large" aria-label="close"></button>
15 </div>
16
17 <div id="chat-panel" class="is-flex is-flex-direction-column is-justify-content-space-between is-align-items-stretch pt-4"> <!-- calculate height depending on your navbar size -->
18 <!-- Header -->
19 <div id="header" class="box p-4 is-flex is-justify-content-space-between is-align-items-center is-flex-shrink-0">
20 {% if subject is defined %}
21 <h2 id="room-subject" class="title is-5 has-text-weight-bold">{{- subject|urlize(nofollow=true,target='_blank') -}}</h2>
22 {% endif %}
23 </div>
24
25 <!-- Messages -->
26 <div id="messages" class="box p-4 has-background-white mb-4 is-flex-grow-1 is-flex-direction-column-reverse is-overflow-auto">
12 {% for msg in messages %} 27 {% for msg in messages %}
13 {% include 'chat/message.html' %} 28 {% include 'chat/message.html' %}
14 {% endfor %} 29 {% endfor %}
15 </div> 30 </div>
16 <textarea id="message_input" class="textarea mt-4 chat_input mb-4" name="message" type="text" rows="1" placeholder="{{_("enter your message")}}"></textarea> 31
32 <!-- Attachments -->
33 <div id="attachments" class="box has-background-white is-flex is-flex-grow-0 is-flex-shrink-0 is-align-items-center is-overflow-auto is-contracted">
34 {% for file in attachments %}
35 {% include 'chat/attachment_preview.html' %}
36 {% endfor %}
37 </div>
38
39 <!-- Input -->
40 <div id="input-area" class="field has-addons py-4 is-flex-shrink-0">
41 <p class="control is-expanded">
42 <textarea id="message_input" class="textarea" name="message" type="text" rows="1" placeholder="{{_("enter your message")}}"></textarea>
43 </p>
44 <div class="control">
45 <button class="button" id="attach_button">
46 <span class="icon is-small">
47 {{ icon('attach', cls='has-text-info') }}
48 </span>
49 </button>
50 <input id="file_input" type="file" multiple="true" style="display: none" />
51 </div>
52 <div class="control">
53 <button class="button" id="send_button">
54 <span class="icon is-small">
55 {{ icon('paper-plane-empty') }}
56 </span>
57 </button>
58 </div>
59 </div>
60
17 </div> 61 </div>
18 {% endblock body %} 62 {% endblock body %}
19 63
20 {% block footer %}{% endblock footer %} 64 {% block footer %}{% endblock footer %}