comparison 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
comparison
equal deleted inserted replaced
410:a5588ea3bcd6 411:f7a434581872
18 </div> 18 </div>
19 <button id="cancel_reply_btn" class="button is-small is-danger is-rounded">Cancel</button> 19 <button id="cancel_reply_btn" class="button is-small is-danger is-rounded">Cancel</button>
20 </div> 20 </div>
21 </div> 21 </div>
22 22
23 <!-- Rich Editor Toolbar -->
24 <div id="rich-edit-toolbar" class="field is-grouped is-grouped-multiline is-hidden">
25 <div class="control">
26 <button class="rich-editor-btn button" type="button" data-action="bold">
27 <span class="icon"><i class="fas fa-bold fa-sm"></i></span>
28 </button>
29 </div>
30 <div class="control">
31 <button class="rich-editor-btn button" type="button" data-action="italic">
32 <span class="icon"><i class="fas fa-italic fa-sm"></i></span>
33 </button>
34 </div>
35 <div class="control">
36 <button class="rich-editor-btn button" type="button" data-action="underline">
37 <span class="icon"><i class="fas fa-underline fa-sm"></i></span>
38 </button>
39 </div>
40 <div class="control">
41 <button class="rich-editor-btn button" type="button" data-action="list-bullet">
42 <span class="icon"><i class="fas fa-list-ul fa-sm"></i></span>
43 </button>
44 </div>
45 <div class="control">
46 <button class="rich-editor-btn button" type="button" data-action="list-ordered">
47 <span class="icon"><i class="fas fa-list-ol fa-sm"></i></span>
48 </button>
49 </div>
50 <div class="control">
51 <button class="rich-editor-btn button" type="button" data-action="link">
52 <span class="icon"><i class="fas fa-link fa-sm"></i></span>
53 </button>
54 </div>
55 </div>
23 56
24 <div class="field has-addons"> 57 <!-- Main Input -->
58 <div class="field has-addons is-align-items-flex-end">
25 <div class="control"> 59 <div class="control">
26 <button id="attach-button" class="button"> 60 <button id="attach-button" class="button">
27 <span class="icon is-small"> 61 <span class="icon is-small">
28 {{ icon('paperclip') }} 62 {{ icon('paperclip') }}
29 </span> 63 </span>
30 </button> 64 </button>
31 <input id="file-input" type="file" multiple="true" style="display: none" /> 65 <input id="file-input" type="file" multiple="true" style="display: none" />
32 </div> 66 </div>
67 <div class="control">
68 <button id="input-extra-button" class="button">
69 <span class="icon is-small">
70 {{ icon('ellipsis-vertical') }}
71 </span>
72 </button>
73 </div>
33 <div class="control is-expanded"> 74 <div class="control is-expanded">
34 <textarea id="message_input_area" class="textarea" name="message_input_area" type="text" rows="1" placeholder="{{_("Type your message…")}}"></textarea> 75 <textarea id="message_input_area" class="textarea" name="message_input_area" type="text" rows="1" placeholder="{{_("Type your message…")}}"></textarea>
76 <div id="message_input_area_rich" class="is-hidden"></div>
35 </div> 77 </div>
36 <div class="control"> 78 <div class="control">
37 <button class="button is-primary"> 79 <button class="button is-primary">
38 <span class="icon is-small"> 80 <span class="icon is-small">
39 <i class="fas fa-paper-plane"></i> 81 <i class="fas fa-paper-plane"></i>