From 67d7efefdc8066f48859527e56b0ecfa351bed98 Mon Sep 17 00:00:00 2001 From: Akarsh Jain Date: Wed, 3 Aug 2022 11:18:43 +0530 Subject: [PATCH] message_actions: Split the View source / Move message option into two menu options. Split the View source / Move message option into two menu options that take you to the same UI: Move message and View message source. Previously, it was confusing to have this double option, and hard to parse it at a glance. -View message source uses the current icon. -Move message uses the arrows icon from the Move topic menu option. -New option order: (1) Move message, (2) Quote and reply or forward, (3) View message source. Also remove the "Topic editing only" and "View source" text on the bottom right of the message edit UI along with the tooltips. Only the timer text is shown (along with tooltip) when content editing is allowed. --- static/js/message_edit.js | 6 +----- static/js/popovers.js | 18 ++++++++++++------ static/templates/actions_popover_content.hbs | 12 ++++++++++-- static/templates/message_edit_form.hbs | 4 ++-- .../help/move-content-to-another-stream.md | 5 ++--- .../help/move-content-to-another-topic.md | 5 ++--- templates/zerver/help/rename-a-topic.md | 5 ++--- 7 files changed, 31 insertions(+), 24 deletions(-) diff --git a/static/js/message_edit.js b/static/js/message_edit.js index 871ca38ed3..d5e6b79ff3 100644 --- a/static/js/message_edit.js +++ b/static/js/message_edit.js @@ -454,8 +454,6 @@ function edit_message($row, raw_content) { message_id: message.id, is_editable, is_content_editable, - is_widget_message: is_widget_message(message), - has_been_editable: editability !== editability_types.NO, topic: message.topic, content: raw_content, file_upload_enabled, @@ -517,13 +515,11 @@ function edit_message($row, raw_content) { // in streams), then we'll need to disable // row.find('input.message_edit_topic') as well. $message_edit_content.attr("readonly", "readonly"); - $message_edit_countdown_timer.text($t({defaultMessage: "View source"})); create_copy_to_clipboard_handler($row, $copy_message[0], message.id); break; case editability_types.TOPIC_ONLY: $message_edit_content.attr("readonly", "readonly"); // Hint why you can edit the topic but not the message content - $message_edit_countdown_timer.text($t({defaultMessage: "Topic editing only"})); create_copy_to_clipboard_handler($row, $copy_message[0], message.id); break; case editability_types.FULL: { @@ -547,7 +543,7 @@ function edit_message($row, raw_content) { // Add tooltip if ( - editability !== editability_types.NO && + editability === editability_types.FULL && page_params.realm_message_content_edit_limit_seconds > 0 ) { $row.find(".message-edit-timer").show(); diff --git a/static/js/popovers.js b/static/js/popovers.js index 59c4a110ab..dd526ce386 100644 --- a/static/js/popovers.js +++ b/static/js/popovers.js @@ -469,15 +469,18 @@ export function toggle_actions_popover(element, id) { const editability = message_edit.get_editability(message); let use_edit_icon; let editability_menu_item; + let view_source_menu_item; + if (editability === message_edit.editability_types.FULL) { use_edit_icon = true; editability_menu_item = $t({defaultMessage: "Edit message"}); } else if (editability === message_edit.editability_types.TOPIC_ONLY) { use_edit_icon = false; - editability_menu_item = $t({defaultMessage: "View source / Move message"}); + editability_menu_item = $t({defaultMessage: "Move message"}); + view_source_menu_item = $t({defaultMessage: "View message source"}); } else { use_edit_icon = false; - editability_menu_item = $t({defaultMessage: "View source"}); + view_source_menu_item = $t({defaultMessage: "View message source"}); } // Theoretically, it could be useful to offer this even for a @@ -513,10 +516,11 @@ export function toggle_actions_popover(element, id) { const should_display_uncollapse = !message.locally_echoed && !message.is_me_message && message.collapsed; - const should_display_edit_and_view_source = - message.content !== "

(deleted)

" || + const should_display_edit_and_move_message = editability === message_edit.editability_types.FULL || editability === message_edit.editability_types.TOPIC_ONLY; + const should_display_view_source = editability !== message_edit.editability_types.FULL; + const should_display_quote_and_reply = message.content !== "

(deleted)

" && not_spectator; @@ -534,6 +538,7 @@ export function toggle_actions_popover(element, id) { use_edit_icon, editability_menu_item, should_display_mark_as_unread, + view_source_menu_item, should_display_collapse, should_display_uncollapse, should_display_add_reaction_option: message.sent_by_me, @@ -544,7 +549,8 @@ export function toggle_actions_popover(element, id) { should_display_delete_option, should_display_read_receipts_option, should_display_reminder_option: feature_flags.reminders_in_message_action_menu, - should_display_edit_and_view_source, + should_display_edit_and_move_message, + should_display_view_source, should_display_quote_and_reply, }; @@ -1230,7 +1236,7 @@ export function register_click_handlers() { e.stopPropagation(); e.preventDefault(); }); - $("body").on("click", ".popover_edit_message", (e) => { + $("body").on("click", ".popover_edit_message, .popover_view_source", (e) => { const message_id = $(e.currentTarget).data("message-id"); const $row = message_lists.current.get_row(message_id); hide_actions_popover(); diff --git a/static/templates/actions_popover_content.hbs b/static/templates/actions_popover_content.hbs index 57c2075234..39d085983f 100644 --- a/static/templates/actions_popover_content.hbs +++ b/static/templates/actions_popover_content.hbs @@ -9,10 +9,10 @@ {{/if}} - {{#if should_display_edit_and_view_source}} + {{#if should_display_edit_and_move_message}}
  • - {{editability_menu_item}} + {{editability_menu_item}} (e)
    • @@ -27,6 +27,14 @@ {{/if}} + {{#if should_display_view_source}} +
  • + + {{view_source_menu_item}} + +
    • + {{/if}} + {{#if should_display_mark_as_unread}}
  • diff --git a/static/templates/message_edit_form.hbs b/static/templates/message_edit_form.hbs index 97a7df6abd..ff0abdc294 100644 --- a/static/templates/message_edit_form.hbs +++ b/static/templates/message_edit_form.hbs @@ -65,12 +65,12 @@ {{else}} {{/if}} - {{#if has_been_editable}} + {{#if is_content_editable}}
    diff --git a/templates/zerver/help/move-content-to-another-stream.md b/templates/zerver/help/move-content-to-another-stream.md index 330b547435..fe03f0ff5d 100644 --- a/templates/zerver/help/move-content-to-another-stream.md +++ b/templates/zerver/help/move-content-to-another-stream.md @@ -47,9 +47,8 @@ destination streams. {!message-actions-menu.md!} -1. Select the first option. It may be called **View source / Move message**, - or simply **Edit message**. If it's called **View source**, then you are not - allowed to edit the stream of that message. +1. Select **Move message** or **Edit message** (only one of these options will be shown). If you do + not see either option, you do not have permission to move this message. 1. Select the destination stream for the message from the streams dropdown list. diff --git a/templates/zerver/help/move-content-to-another-topic.md b/templates/zerver/help/move-content-to-another-topic.md index b467960e4f..cd7776b8f3 100644 --- a/templates/zerver/help/move-content-to-another-topic.md +++ b/templates/zerver/help/move-content-to-another-topic.md @@ -22,9 +22,8 @@ for the details on when topic editing is allowed. {!message-actions-menu.md!} -1. Select the first option. It may be called **View source / Move message**, - or simply **Edit message**. If it's called **View source**, then you are not - allowed to edit the topic of that message. +1. Select **Move message** or **Edit message** (only one of these options will be shown). If you do + not see either option, you do not have permission to move this message. 1. Set the destination topic. diff --git a/templates/zerver/help/rename-a-topic.md b/templates/zerver/help/rename-a-topic.md index bc850cc28d..de96ccdc60 100644 --- a/templates/zerver/help/rename-a-topic.md +++ b/templates/zerver/help/rename-a-topic.md @@ -36,9 +36,8 @@ for the details on when topic editing is allowed. {!message-actions-menu.md!} -1. Select the first option. It may be called **View source / Move message**, - or simply **Edit message**. If it's called **View source**, then you are not - allowed to edit the topic of that message. +1. Select **Move message** or **Edit message** (only one of these options will be shown). If you do + not see either option, you do not have permission to edit the topic of this message. 1. Edit the topic.