Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/templates/zerver/app/compose.html

122 lines
8.6 KiB
HTML
Raw Normal View History

Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
<div id="compose">
compose.html: Clean up to use 4 space indentation.
2018-01-27 18:25:34 +01:00
<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">&times;</span>
<span id="compose-reply-error-msg"></span>
</div>
<div id="compose_buttons">
<span class="new_message_button">
HTML validation: Replace Drafts button with styled link. <button> inside <a> is invalid. Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2018-07-06 23:20:47 +02:00
<a class="drafts-link no-underline button small rounded compose_drafts_button" href="#drafts" title="{{ _('Drafts') }} (d)">
{{ _('Drafts') }}
compose.html: Clean up to use 4 space indentation.
2018-01-27 18:25:34 +01:00
</a>
<span class="alert-draft pull-left">{{ _('Saved as draft') }}</span>
</span>
compose: Create the mobile compose `+` button. Use CSS to display a `+` button on mobile but keep the more verbose buttons on desktop. In the future, this button will be used to display a popop for a new message.
2018-08-12 23:26:00 +02:00
<span class="new_message_button">
<button type="button" class="button small rounded compose_mobile_button"
id="left_bar_compose_mobile_button_big"
title="{{ _('New message') }} (c)">
compose: Use a more reasonable plus sign for opening send menu. This icon styling definitely still doesn't look great, but it's an improvement over what we had before.
2018-11-01 00:58:43 +01:00
<span>+</span>
compose: Create the mobile compose `+` button. Use CSS to display a `+` button on mobile but keep the more verbose buttons on desktop. In the future, this button will be used to display a popop for a new message.
2018-08-12 23:26:00 +02:00
</button>
</span>
compose.html: Clean up to use 4 space indentation.
2018-01-27 18:25:34 +01:00
<span class="new_message_button">
<button type="button" class="button small rounded compose_stream_button"
linter: Enforce 2 space indents on tags spread over multiple lines. We make some specific cases of tags use 2 space indents. The case description: * A tag with opening tag spread over multiple lines and closing tag on the same line as of the closing angle bracket of the opening tag. * A tag with opening tag spread over multiple lines and closing tag not on the same line as of the closing angle bracket of the opening tag. Example: Case 1: Not linted: <button type="button" class="btn btn-primary btn-small">{{t "Yes" }}</button> After linting: <button type="button" class="btn btn-primary btn-small">{{t "Yes" }}</button> Case 2: Before linting: <div class = "foo" id = "bar" role = "whatever"> {{ bla }} </div> After linting: <div class = "foo" id = "bar" role = "whatever"> {{ bla }} </div>
2018-04-05 08:38:46 +02:00
id="left_bar_compose_stream_button_big"
title="{{ _('New topic') }} (c)">
compose.html: Clean up to use 4 space indentation.
2018-01-27 18:25:34 +01:00
<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"
linter: Enforce 2 space indents on tags spread over multiple lines. We make some specific cases of tags use 2 space indents. The case description: * A tag with opening tag spread over multiple lines and closing tag on the same line as of the closing angle bracket of the opening tag. * A tag with opening tag spread over multiple lines and closing tag not on the same line as of the closing angle bracket of the opening tag. Example: Case 1: Not linted: <button type="button" class="btn btn-primary btn-small">{{t "Yes" }}</button> After linting: <button type="button" class="btn btn-primary btn-small">{{t "Yes" }}</button> Case 2: Before linting: <div class = "foo" id = "bar" role = "whatever"> {{ bla }} </div> After linting: <div class = "foo" id = "bar" role = "whatever"> {{ bla }} </div>
2018-04-05 08:38:46 +02:00
id="left_bar_compose_private_button_big"
title="{{ _('New private message') }} (x)">
compose.html: Clean up to use 4 space indentation.
2018-01-27 18:25:34 +01:00
<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"
linter: Enforce 2 space indents on tags spread over multiple lines. We make some specific cases of tags use 2 space indents. The case description: * A tag with opening tag spread over multiple lines and closing tag on the same line as of the closing angle bracket of the opening tag. * A tag with opening tag spread over multiple lines and closing tag not on the same line as of the closing angle bracket of the opening tag. Example: Case 1: Not linted: <button type="button" class="btn btn-primary btn-small">{{t "Yes" }}</button> After linting: <button type="button" class="btn btn-primary btn-small">{{t "Yes" }}</button> Case 2: Before linting: <div class = "foo" id = "bar" role = "whatever"> {{ bla }} </div> After linting: <div class = "foo" id = "bar" role = "whatever"> {{ bla }} </div>
2018-04-05 08:38:46 +02:00
id="left_bar_compose_reply_button_big"
title="{{ _('Reply') }} (r)">
compose.html: Clean up to use 4 space indentation.
2018-01-27 18:25:34 +01:00
<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">&times;</span>
compose: Fix extra space below compose error text. Fixes #9433. Extra bottom margin was observed when using `compose_error` which was caused by paragraphs in bootstrap having a bottom margin of 10px. The paragraph tag has been replaced by a span tag.
2018-05-16 23:16:11 +02:00
<span id="compose-error-msg"></span>
compose.html: Clean up to use 4 space indentation.
2018-01-27 18:25:34 +01:00
</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>
compose: Add subscribe button to the not subscribed stream error message. Before that, we needed to go the stream settings to subscribe to a particular stream. Fixes #3877.
2018-04-04 19:38:09 +02:00
<div id="compose_not_subscribed" class="alert home-error-bar"></div>
compose.html: Clean up to use 4 space indentation.
2018-01-27 18:25:34 +01:00
<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)">&times;</button>
<form id="send_message_form" action="/json/messages" method="post">
{{ csrf_input }}
compose: Refactor compose box from `<table>` to `<div>` structure. `<td>` elements are fixed-width, so we refactor the entire `<table>` structure for responsive design. This fixes a bug with how the `To:` block looks in other languages. Fixes #9152.
2018-03-31 01:46:43 +02:00
<div class="compose_table">
<div id="stream-message">
stream_header_colorblock: Create resuable css class. stream-selection-header-colorblock css class can now be used to reproduce stream header color block everywhere.
2020-06-13 17:32:03 +02:00
<div class="stream-selection-header-colorblock message_header_stream left_part"></div>
compose: Refactor compose box from `<table>` to `<div>` structure. `<td>` elements are fixed-width, so we refactor the entire `<table>` structure for responsive design. This fixes a bug with how the `To:` block looks in other languages. Fixes #9152.
2018-03-31 01:46:43 +02:00
<div class="right_part">
<span id="compose-lock-icon">
compose.html: Upgrade to use font-awesome 4.7 icon prefixes. We also adjust some CSS so that icons after this upgrade look exactly or nearly the same as they did before the upgrade.
2018-07-02 23:02:43 +02:00
<i class="fa fa-lock" title="{{ _('This is a private stream') }}" aria-hidden="true"></i>
compose: Refactor compose box from `<table>` to `<div>` structure. `<td>` elements are fixed-width, so we refactor the entire `<table>` structure for responsive design. This fixes a bug with how the `To:` block looks in other languages. Fixes #9152.
2018-03-31 01:46:43 +02:00
</span>
subject -> topic: Rename compose fields. The stream/topic edit areas now have these ids: #stream_message_recipient_stream #stream_message_recipient_topic They are pretty verbose, but being able to grep for these without noise does have some value.
2018-11-13 17:16:02 +01:00
<input type="text" class="recipient_box" name="stream_message_recipient_stream" id="stream_message_recipient_stream" maxlength="30" value="" placeholder="{{ _('Stream') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Stream') }}" />
compose.html: Upgrade to use font-awesome 4.7 icon prefixes. We also adjust some CSS so that icons after this upgrade look exactly or nearly the same as they did before the upgrade.
2018-07-02 23:02:43 +02:00
<i class="fa fa-angle-right" aria-hidden="true"></i>
subject -> topic: Rename compose fields. The stream/topic edit areas now have these ids: #stream_message_recipient_stream #stream_message_recipient_topic They are pretty verbose, but being able to grep for these without noise does have some value.
2018-11-13 17:16:02 +01:00
<input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="60" value="" placeholder="{{ _('Topic') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Topic') }}" />
compose: Refactor compose box from `<table>` to `<div>` structure. `<td>` elements are fixed-width, so we refactor the entire `<table>` structure for responsive design. This fixes a bug with how the `To:` block looks in other languages. Fixes #9152.
2018-03-31 01:46:43 +02:00
</div>
</div>
<div id="private-message">
<div class="to_text">
<span>{{ _('To') }}:</span>
</div>
<div class="right_part">
<div class="pm_recipient">
<div class="pill-container" data-before="{{ _('You and') }}">
HTML validation: Remove invalid attributes. Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2018-07-06 23:24:02 +02:00
<div class="input" contenteditable="true" id="private_message_recipient" data-no-recipients-text="{{ _('Add one or more users') }}" data-some-recipients-text="{{ _('Add another user...') }}"></div>
compose.html: Clean up to use 4 space indentation.
2018-01-27 18:25:34 +01:00
</div>
compose: Refactor compose box from `<table>` to `<div>` structure. `<td>` elements are fixed-width, so we refactor the entire `<table>` structure for responsive design. This fixes a bug with how the `To:` block looks in other languages. Fixes #9152.
2018-03-31 01:46:43 +02:00
</div>
</div>
</div>
<div>
HTML validation: Remove invalid attributes. Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2018-07-06 23:24:02 +02:00
<div class="messagebox">
<textarea class="new_message_textarea" name="content" id='compose-textarea' placeholder="{{ _('Compose your message here') }}" tabindex="0" maxlength="10000" aria-label="{{ _('Compose your message here...') }}"></textarea>
preview_message_area: Use simplebar scrollbar. Add `data-simplebar` attribrute to `preview_message_area` div in `templates/zerver/app/compose.html`. This will cause preview_message_area div to use simplebar scrollbar instead of normal scrollbar. Fixes #16468.
2020-10-17 09:27:20 +02:00
<div class="scrolling_list preview_message_area" data-simplebar id="preview_message_area" style="display:none;">
compose: Refactor compose box from `<table>` to `<div>` structure. `<td>` elements are fixed-width, so we refactor the entire `<table>` structure for responsive design. This fixes a bug with how the `To:` block looks in other languages. Fixes #9152.
2018-03-31 01:46:43 +02:00
<div id="markdown_preview_spinner"></div>
markdown: Add .rendered_markdown for all elements with rendered MD content. This adds a class `rendered_markdown` for all the elements which have rendered markdown content; This is done to add different styles for rendered content in day mode and night mode. Also replace the element selectors from CSS to use the class.
2019-03-22 17:03:19 +01:00
<div id="preview_content" class="preview_content rendered_markdown"></div>
compose: Refactor compose box from `<table>` to `<div>` structure. `<td>` elements are fixed-width, so we refactor the entire `<table>` structure for responsive design. This fixes a bug with how the `To:` block looks in other languages. Fixes #9152.
2018-03-31 01:46:43 +02:00
</div>
<div class="drag"></div>
<div id="below-compose-content">
compose: Move send button after textarea in DOM. This restores the Tab + Enter shortcut to send. We are floating the send button to the right so that it still looks like before. Instead of moving the button we could have also given every message control button a tabindex, but these would be cumbersome to maintain. Tweaked by tabbott to add a comment recording the reasoning behind the somewhat unusual CSS here. Part of #15910.
2020-08-11 08:11:14 +02:00
<button type="submit" id="compose-send-button" class="button small send_message" title="{{ _('Send') }} (Ctrl + Enter)">{{ _('Send') }}</button>
compose: Refactor compose box from `<table>` to `<div>` structure. `<td>` elements are fixed-width, so we refactor the entire `<table>` structure for responsive design. This fixes a bug with how the `To:` block looks in other languages. Fixes #9152.
2018-03-31 01:46:43 +02:00
<input type="file" id="file_input" class="notvisible pull-left" multiple />
home/page_params: Add suffix `_mib` to clarify the size units. The docs say "megabytes" or "MB", but client software needs to know the actual meaning, which is in mebibytes.
2020-05-08 06:57:19 +02:00
{% if max_file_upload_size_mib > 0 %}
compose: Add role=button to message control buttons. Fixes #9143. Part of #15910.
2020-08-11 10:36:37 +02:00
<a role="button" class="message-control-button fa fa-paperclip notdisplayed" aria-label="{{ _('Attach files') }}" id="attach_files" tabindex=0 title="{{ _('Attach files') }}"></a>
uploads: Remove unusable UI elements if file uploading is disabled. If MAX_FILE_UPLOAD_SIZE is set to 0, then UI elements like the upload icon in the compose and message edit UI and "Attachments" menu in "/#settings" are not displayed. A different error message is also displayed if a user tries to drag and drop or paste a file into the compose message box. Fixes #12152.
2019-05-04 20:24:36 +02:00
{% endif %}
compose: Add role=button to message control buttons. Fixes #9143. Part of #15910.
2020-08-11 10:36:37 +02:00
<a role="button" id="markdown_preview" class="message-control-button fa fa-eye" aria-label="{{ _('Preview') }}" tabindex=0 title="{{ _('Preview') }}"></a>
compose: Reorder message action buttons. Now that they are tab accessible, we should order them by importance. Previously the order was: 1. Add emoji 2. Formatting 3. Attach files 4. Add video call 5. Preview 6. Drafts This commit changes the order to: 1. Attach files 2. Preview 3. Add video call 4. Add emoji 5. Drafts 6. Formatting The "Add emoji" button is moved back because emojis can be more conveniently entered using the typeahead triggered with ":" or the emoticon conversions.
2020-09-23 06:08:23 +02:00
<a role="button" id="undo_markdown_preview" class="message-control-button fa fa-edit" aria-label="{{ _('Write') }}" tabindex=0 style="display:none;" title="{{ _('Write') }}"></a>
<a role="button" class="message-control-button fa fa-video-camera video_link" aria-label="{{ _('Add video call') }}" tabindex=0 title="{{ _('Add video call') }}"></a>
<a role="button" class="message-control-button fa fa-smile-o" aria-label="{{_('Add emoji')}}" id="emoji_map" tabindex=0 title="{{ _('Add emoji') }}"></a>
compose: Display Formatting button as "Help". The Formatting button that opens our Markdown help popover previously had an "A" as its icon (the Font Awesome icon for font). This commit changes the link to spell out "Help" to make it more discoverable.
2020-09-23 06:08:23 +02:00
<a class="message-control-link drafts-link" href="#drafts" title="{{ _('Drafts') }} (d)">{{ _('Drafts') }}</a>
<a role="button" class="message-control-link" tabindex=0 data-overlay-trigger="message-formatting">{{ _('Help') }}</a>
compose: Refactor compose box from `<table>` to `<div>` structure. `<td>` elements are fixed-width, so we refactor the entire `<table>` structure for responsive design. This fixes a bug with how the `To:` block looks in other languages. Fixes #9152.
2018-03-31 01:46:43 +02:00
<span id="sending-indicator"></span>
<div id="send_controls" class="new-style">
compose: Change style of `Press Enter to send` checkbox. This checkbox style will now be more consistent with checkboxes used in settings modal.
2020-07-06 02:56:23 +02:00
<label id="enter-sends-label" class="compose_checkbox_label checkbox">
<input type="checkbox" id="enter_sends" />
<span></span>{{ _('Press Enter to send') }}
compose: Refactor compose box from `<table>` to `<div>` structure. `<td>` elements are fixed-width, so we refactor the entire `<table>` structure for responsive design. This fixes a bug with how the `To:` block looks in other languages. Fixes #9152.
2018-03-31 01:46:43 +02:00
</label>
compose.html: Clean up to use 4 space indentation.
2018-01-27 18:25:34 +01:00
</div>
compose: Refactor compose box from `<table>` to `<div>` structure. `<td>` elements are fixed-width, so we refactor the entire `<table>` structure for responsive design. This fixes a bug with how the `To:` block looks in other languages. Fixes #9152.
2018-03-31 01:46:43 +02:00
</div>
</div>
</div>
</div>
compose.html: Clean up to use 4 space indentation.
2018-01-27 18:25:34 +01:00
</form>
</div>
</div>
Move composebox into its own file. Similarly, here, no code should have changed. (imported from commit 0d739a28b4894dd28acea0a3d9ee503109368425)
2013-02-28 19:41:33 +01:00
</div>
</div>