Mercurial > libervia-templates
annotate sat_templates/templates/bulma/chat/message_input.html @ 411:f7a434581872 default tip
chat: Add forward, rich editing and extra recipients:
- There is a new "forward" menu in message. For now, a simple prompt ask for recipient JID.
- A new "extra" menu is available next to input field. Inside there are 2 items for now:
add extra recipient, and toggle rich edit mode.
- Extra recipient option add a field to add an email-like "to", "cc" or "bcc" recipients.
- Rich edit let use rich styling such as bold, italic, underline, etc.
rel 461
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Fri, 04 Jul 2025 17:33:22 +0200 |
| parents | 049a0638f6fa |
| children |
| rev | line source |
|---|---|
| 404 | 1 |
| 2 <div id="input-panel"> | |
| 3 <!-- Attachments --> | |
| 406 | 4 <div id="attachments" class="attachments box has-background-white is-flex is-flex-grow-0 is-flex-shrink-0 is-align-items-center is-overflow-auto is-contracted"> |
| 404 | 5 {% for file in attachments %} |
| 6 {% include 'chat/attachment_preview.html' %} | |
| 7 {% endfor %} | |
| 8 </div> | |
| 9 | |
| 10 <div id="message_input" class="chat-input"> | |
| 11 | |
| 12 <!-- Reply Indicator --> | |
| 13 <div id="reply-to" class="mb-3 is-hidden"> | |
| 14 <div class="is-flex is-justify-content-space-between is-align-items-center"> | |
| 15 <div> | |
| 16 <span class="is-size-6"><strong>{% trans %}Replying to :{% endtrans %}</strong></span> | |
| 17 <div id="reply-to_message" class="mt-1 ml-1 is-size-7"></div> | |
| 18 </div> | |
| 19 <button id="cancel_reply_btn" class="button is-small is-danger is-rounded">Cancel</button> | |
| 20 </div> | |
| 21 </div> | |
| 22 | |
|
411
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
23 <!-- Rich Editor Toolbar --> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
24 <div id="rich-edit-toolbar" class="field is-grouped is-grouped-multiline is-hidden"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
25 <div class="control"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
26 <button class="rich-editor-btn button" type="button" data-action="bold"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
27 <span class="icon"><i class="fas fa-bold fa-sm"></i></span> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
28 </button> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
29 </div> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
30 <div class="control"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
31 <button class="rich-editor-btn button" type="button" data-action="italic"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
32 <span class="icon"><i class="fas fa-italic fa-sm"></i></span> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
33 </button> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
34 </div> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
35 <div class="control"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
36 <button class="rich-editor-btn button" type="button" data-action="underline"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
37 <span class="icon"><i class="fas fa-underline fa-sm"></i></span> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
38 </button> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
39 </div> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
40 <div class="control"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
41 <button class="rich-editor-btn button" type="button" data-action="list-bullet"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
42 <span class="icon"><i class="fas fa-list-ul fa-sm"></i></span> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
43 </button> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
44 </div> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
45 <div class="control"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
46 <button class="rich-editor-btn button" type="button" data-action="list-ordered"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
47 <span class="icon"><i class="fas fa-list-ol fa-sm"></i></span> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
48 </button> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
49 </div> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
50 <div class="control"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
51 <button class="rich-editor-btn button" type="button" data-action="link"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
52 <span class="icon"><i class="fas fa-link fa-sm"></i></span> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
53 </button> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
54 </div> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
55 </div> |
| 404 | 56 |
|
411
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
57 <!-- Main Input --> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
58 <div class="field has-addons is-align-items-flex-end"> |
| 404 | 59 <div class="control"> |
| 60 <button id="attach-button" class="button"> | |
| 61 <span class="icon is-small"> | |
| 62 {{ icon('paperclip') }} | |
| 63 </span> | |
| 64 </button> | |
| 65 <input id="file-input" type="file" multiple="true" style="display: none" /> | |
| 66 </div> | |
|
411
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
67 <div class="control"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
68 <button id="input-extra-button" class="button"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
69 <span class="icon is-small"> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
70 {{ icon('ellipsis-vertical') }} |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
71 </span> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
72 </button> |
|
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
73 </div> |
| 404 | 74 <div class="control is-expanded"> |
| 75 <textarea id="message_input_area" class="textarea" name="message_input_area" type="text" rows="1" placeholder="{{_("Type your message…")}}"></textarea> | |
|
411
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
76 <div id="message_input_area_rich" class="is-hidden"></div> |
| 404 | 77 </div> |
| 78 <div class="control"> | |
| 79 <button class="button is-primary"> | |
| 80 <span class="icon is-small"> | |
| 81 <i class="fas fa-paper-plane"></i> | |
| 82 </span> | |
| 83 <span id="send_button">{% trans %}Send{% endtrans %}</span> | |
| 84 </button> | |
| 85 </div> | |
| 86 </div> | |
| 87 </div> | |
| 88 </div> |