mirror of
https://github.com/zulip/zulip.git
synced 2026-06-24 21:08:25 +08:00
3a1bf04a56
@brockwhittaker wrote the original prototype for having
pills in the recipient box when users compose PMs (either
1:1 or huddle). The prototype was test deloyed on our
main realm for several weeks.
This commit includes all the original CSS and HTML from
the prototype.
After some things changed with the codebase after the initial
test deployment, I made the following changes:
* In prior commits I refactored out a module called
`user_pill.js` that implemented some common functions
against a more streamlined version of `input_pill.js`,
and this commit largely integrates with that.
* I made changes in a prior commit to handle Zephyr
semantics (emails don't get validated) and tested
this commit with zephyr.
* I fixed a reload bug by extracting code out to
`compose_pm_pill.js` and re-ordering some
calls to `initialize`.
There are still two flaws related to un-pill-ified text in the
input:
* We could be more aggressive about trying to pill-ify
emails when you blur or tab away.
* We only look at the pills when you send the message,
instead of complaining about the un-pill-ified text.
(Some folks may consider that a feature, but it's
probably surprising to others.)
137 lines
9.0 KiB
HTML
137 lines
9.0 KiB
HTML
<div id="compose">
|
|
<div id="compose-notifications" class="notifications above-composebox">
|
|
</div>
|
|
<div id="compose-container">
|
|
<div id="compose_controls" class="compose-content new-style">
|
|
<div id="nonexistent_stream_reply_error" class="alert-error">
|
|
<span class="compose-send-status-close">×</span>
|
|
<span id="compose-reply-error-msg"></span>
|
|
</div>
|
|
<div id="compose_buttons">
|
|
<span class="new_message_button">
|
|
<a class="drafts-link no-style" href="#drafts" title="{{ _('Drafts') }} (d)">
|
|
<button type="button" class="button small rounded compose_drafts_button">
|
|
<span>{{ _('Drafts') }}</span>
|
|
</button>
|
|
</a>
|
|
<span class="alert-draft pull-left">{{ _('Saved as draft') }}</span>
|
|
</span>
|
|
<span class="new_message_button">
|
|
<button type="button" class="button small rounded compose_stream_button"
|
|
id="left_bar_compose_stream_button_big"
|
|
title="{{ _('New topic') }} (c)">
|
|
<span class="compose_stream_button_label">{{ _('New topic') }}</span>
|
|
</button>
|
|
</span>
|
|
{% if not embedded %}
|
|
<span class="new_message_button">
|
|
<button type="button" class="button small rounded compose_private_button"
|
|
id="left_bar_compose_private_button_big"
|
|
title="{{ _('New private message') }} (C)">
|
|
<span class="compose_private_button_label">{{ _('New private message') }}</span>
|
|
</button>
|
|
</span>
|
|
{% endif %}
|
|
<span class="new_message_button">
|
|
<button type="button" class="button small rounded compose_reply_button"
|
|
id="left_bar_compose_reply_button_big"
|
|
title="{{ _('Reply') }} (r)">
|
|
<span class="compose_reply_button_label">{{ _('Reply') }}</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="message_comp compose-content">
|
|
<div class="alert" id="compose-send-status">
|
|
<span class="compose-send-status-close">×</span>
|
|
<span id="compose-error-msg"></span>
|
|
</div>
|
|
<div id="compose_invite_users" class="alert home-error-bar"></div>
|
|
<div id="compose-all-everyone" class="alert home-error-bar"></div>
|
|
<div id="compose-announce" class="alert home-error-bar"></div>
|
|
<div id="compose_private_stream_alert" class="alert home-error-bar"></div>
|
|
<div id="out-of-view-notification" class="notification-alert"></div>
|
|
<div class="composition-area">
|
|
<button type="button" class="close" id='compose_close' title="{{ _('Cancel compose') }} (Esc)">×</button>
|
|
<form id="send_message_form" action="/json/messages" method="post">
|
|
{{ csrf_input }}
|
|
<table class="compose_table">
|
|
<tbody>
|
|
<tr class="ztable_layout_row">
|
|
<td class="ztable_comp_col1" />
|
|
<td class="ztable_comp_col2" />
|
|
</tr>
|
|
<tr id="stream-message">
|
|
<td class="message_header_colorblock message_header_stream left_part">
|
|
</td>
|
|
<td class="right_part">
|
|
<span id="compose-lock-icon">
|
|
<i class="icon-vector-lock" title="{{ _('This is an invite-only stream') }}"></i>
|
|
</span>
|
|
<input type="text" class="recipient_box" name="stream" id="stream"
|
|
maxlength="30"
|
|
value="" placeholder="{{ _('Stream') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Stream') }}"/>
|
|
<i class="icon-vector-narrow icon-vector-small"></i>
|
|
<input type="text" class="recipient_box" name="subject" id="subject"
|
|
maxlength="60"
|
|
value="" placeholder="{{ _('Topic') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Topic') }}"/>
|
|
</td>
|
|
</tr>
|
|
<tr id="private-message">
|
|
<td class="to_text">
|
|
<span>{{ _('To') }}:</span>
|
|
</td>
|
|
<td class="right_part">
|
|
<div class="pm_recipient">
|
|
<div class="pill-container" data-before="{{ _('You and') }}">
|
|
<div class="input" contenteditable="true" id="private_message_recipient" name="recipient"
|
|
data-no-recipients-text="{{ _('Add one or more users') }}" data-some-recipients-text="{{ _('Add another user...') }}"></div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="messagebox" colspan="2">
|
|
<textarea class="new_message_textarea" name="content" id='compose-textarea'
|
|
value="" placeholder="{{ _('Compose your message here') }}" tabindex="0" maxlength="10000" aria-label="{{ _('Compose your message here...') }}"></textarea>
|
|
<div class="scrolling_list" id="preview_message_area" style="display:none;">
|
|
<div id="markdown_preview_spinner"></div>
|
|
<div id="preview_content"></div>
|
|
</div>
|
|
<div class="drag"></div>
|
|
<div id="below-compose-content">
|
|
<input type="file" id="file_input" class="notvisible pull-left" multiple />
|
|
<a class="message-control-button icon-vector-smile"
|
|
id="emoji_map" href="#" title="{{ _('Add emoji') }}"></a>
|
|
<a class="message-control-button icon-vector-font"
|
|
title="{{ _('Formatting') }}" data-overlay-trigger="markdown-help"></a>
|
|
<a class="message-control-button icon-vector-dropbox notdisplayed"
|
|
id="attach_dropbox_files" href="#" title="{{ _('Attach files from Dropbox') }}"></a>
|
|
<a class="message-control-button icon-vector-paper-clip notdisplayed"
|
|
id="attach_files" href="#" title="{{ _('Attach files') }}"></a>
|
|
<a class="message-control-button fa fa-video-camera"
|
|
id="video_link" href="#" title="{{ _('Add video call') }}"></a>
|
|
<a id="undo_markdown_preview"
|
|
class="message-control-button icon-vector-edit"
|
|
style="display:none;" title="{{ _('Write') }}"></a>
|
|
<a id="markdown_preview" class="message-control-button icon-vector-eye-open"
|
|
title="{{ _('Preview') }}"></a>
|
|
<a class="drafts-link" href="#drafts" title="{{ _('Drafts') }} (d)">{{ _('Drafts') }}</a>
|
|
<span id="sending-indicator"></span>
|
|
<div id="send_controls" class="new-style">
|
|
<label id="enter-sends-label" class="compose_checkbox_label">
|
|
<input type="checkbox" id="enter_sends" />{{ _('Press Enter to send') }}
|
|
</label>
|
|
<button type="submit" id="compose-send-button" class="button small send_message" tabindex="150" title="{{ _('Send') }} (Ctrl + Enter)">{{ _('Send') }}</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|