compose: Improve preview mode tooltips.

Also modernize help center instructions for message previews.
This commit is contained in:
Alya Abbott
2025-07-18 13:27:44 -07:00
committed by Tim Abbott
parent bfdd858799
commit fdb35f2f81
3 changed files with 17 additions and 9 deletions

View File

@@ -2,21 +2,25 @@
{start_tabs}
{tab|desktop-web}
{!start-composing.md!}
1. Write a message.
1. Click the **eye** (<i class="zulip-icon zulip-icon-preview"></i>) icon at
the bottom of the compose box.
1. Click the **preview mode** (<i class="zulip-icon zulip-icon-preview"></i>)
icon at the bottom of the compose box.
1. *(optional)* Click the **exit preview mode** (<i class="zulip-icon
zulip-icon-edit"></i>) icon to edit your message.
!!! keyboard_tip ""
You can also use <kbd>Alt</kbd> + <kbd>P</kbd> to toggle between previewing and editing your message.
You can also use <kbd>Alt</kbd> + <kbd>P</kbd> to toggle between previewing
and editing your message.
{end_tabs}
Click the **pencil and paper** (<i class="zulip-icon zulip-icon-edit"></i>) icon to resume editing.
## Related articles
* [Message formatting](/help/format-your-message-using-markdown)

View File

@@ -1,10 +1,10 @@
<div class="compose-scrollable-buttons compose-control-buttons-container order-1" tabindex="-1">
<input type="file" class="file_input notvisible" multiple />
<div class="compose_control_button_container compose_button_tooltip" data-tooltip-template-id="preview-tooltip" data-tippy-maxWidth="none">
<a role="button" class="markdown_preview compose_control_button zulip-icon zulip-icon-preview" aria-label="{{t 'Preview' }}" tabindex=0></a>
<a role="button" class="markdown_preview compose_control_button zulip-icon zulip-icon-preview" aria-label="{{t 'Preview mode' }}" tabindex=0></a>
</div>
<div class="compose_control_button_container compose_button_tooltip" data-tippy-content="{{t 'Write' }}">
<a role="button" class="undo_markdown_preview compose_control_button zulip-icon zulip-icon-compose-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;"></a>
<div class="compose_control_button_container compose_button_tooltip" data-tooltip-template-id="exit-preview-tooltip" data-tippy-maxWidth="none">
<a role="button" class="undo_markdown_preview compose_control_button zulip-icon zulip-icon-compose-edit" aria-label="{{t 'Exit preview mode' }}" tabindex=0 style="display:none;"></a>
</div>
{{#if file_upload_enabled }}
<div class="compose_control_button_container preview_mode_disabled compose_button_tooltip" data-tippy-content="{{t 'Upload files' }}">

View File

@@ -53,7 +53,11 @@
{{tooltip_hotkey_hints "Ctrl" "Enter"}}
</template>
<template id="preview-tooltip">
{{t 'Preview' }}
{{t 'Preview mode' }}
{{tooltip_hotkey_hints "Alt" "P"}}
</template>
<template id="exit-preview-tooltip">
{{t 'Exit preview mode' }}
{{tooltip_hotkey_hints "Alt" "P"}}
</template>
<template id="add-global-time-tooltip">