From 953f026487eef143b0cc65017ae19f3e486c9d0a Mon Sep 17 00:00:00 2001 From: yogesh sirsat Date: Sun, 30 Jan 2022 20:30:45 +0530 Subject: [PATCH] compose: Disable unneeded control buttons in preview mode. Buttons which change the content in the compose textarea were so far enabled even in preview mode, and would work, but those changes would not be reflected in the visible preview. This is extremely confusing, and can lead to the possibility of a user accidentally changing the content of the compose textarea while previewing, and sending that. Now we disable those buttons in preview mode, both when composing a new message and when editing an existing one. We still show the tooltips, but grey them out and make them unclickable. Fixes: #20962 --- web/src/compose.js | 10 ++++++++++ web/src/popover_menus.js | 1 + web/styles/compose.css | 11 +++++++++++ web/templates/compose_control_buttons.hbs | 16 +++++++++++----- .../compose_control_buttons_in_popover.hbs | 10 ++++++---- .../compose_control_buttons_popover.hbs | 2 +- web/tests/compose.test.js | 8 ++++++++ 7 files changed, 48 insertions(+), 10 deletions(-) diff --git a/web/src/compose.js b/web/src/compose.js index 70f5a85d52..0a4c8c0772 100644 --- a/web/src/compose.js +++ b/web/src/compose.js @@ -123,6 +123,11 @@ export function clear_preview_area() { $("#compose .preview_content").empty(); $("#compose .markdown_preview").show(); autosize.update($("#compose-textarea")); + + // While in preview mode we disable unneeded compose_control_buttons, + // so here we are re-enabling that compose_control_buttons + $("#compose").removeClass("preview_mode"); + $("#compose .preview_mode_disabled .compose_control_button").attr("tabindex", 0); } export function abort_xhr() { @@ -719,6 +724,11 @@ export function initialize() { e.preventDefault(); e.stopPropagation(); + // Disable unneeded compose_control_buttons as we don't + // need them in preview mode. + $("#compose").addClass("preview_mode"); + $("#compose .preview_mode_disabled .compose_control_button").attr("tabindex", -1); + const content = $("#compose-textarea").val(); $("#compose-textarea").hide(); $("#compose .markdown_preview").hide(); diff --git a/web/src/popover_menus.js b/web/src/popover_menus.js index 4ab708f1e8..2a4fc0103a 100644 --- a/web/src/popover_menus.js +++ b/web/src/popover_menus.js @@ -515,6 +515,7 @@ export function initialize() { parse_html( render_compose_control_buttons_popover({ giphy_enabled: giphy.is_giphy_enabled(), + preview_mode_on: $("#compose").hasClass("preview_mode"), }), ), ); diff --git a/web/styles/compose.css b/web/styles/compose.css index 69bfccc23c..ebb6fccd47 100644 --- a/web/styles/compose.css +++ b/web/styles/compose.css @@ -943,3 +943,14 @@ input.recipient_box { flex: 1; } } + +.preview_mode { + .preview_mode_disabled { + cursor: not-allowed; + opacity: 0.3; + + .compose_control_button { + pointer-events: none; + } + } +} diff --git a/web/templates/compose_control_buttons.hbs b/web/templates/compose_control_buttons.hbs index b02b8980b9..03ea9921a1 100644 --- a/web/templates/compose_control_buttons.hbs +++ b/web/templates/compose_control_buttons.hbs @@ -1,16 +1,22 @@
{{#if file_upload_enabled }} - +
+ +
{{/if}} - -
+
+ +
+
- -
+
+ +
+
|
diff --git a/web/templates/compose_control_buttons_in_popover.hbs b/web/templates/compose_control_buttons_in_popover.hbs index e8253426f5..f172f550d9 100644 --- a/web/templates/compose_control_buttons_in_popover.hbs +++ b/web/templates/compose_control_buttons_in_popover.hbs @@ -1,5 +1,7 @@ - - - -
|
+
+ + + +
|
+
diff --git a/web/templates/compose_control_buttons_popover.hbs b/web/templates/compose_control_buttons_popover.hbs index 0abf427e55..d2142a1b25 100644 --- a/web/templates/compose_control_buttons_popover.hbs +++ b/web/templates/compose_control_buttons_popover.hbs @@ -1,3 +1,3 @@ -
+
{{> compose_control_buttons_in_popover}}
diff --git a/web/tests/compose.test.js b/web/tests/compose.test.js index c51fcf2e90..4468ba3ad6 100644 --- a/web/tests/compose.test.js +++ b/web/tests/compose.test.js @@ -324,6 +324,7 @@ test_ui("enter_with_preview_open", ({override, override_rewire}) => { $("#compose .undo_markdown_preview").show(); $("#compose .preview_message_area").show(); $("#compose .markdown_preview").hide(); + $("#compose").addClass("preview_mode"); user_settings.enter_sends = true; let send_message_called = false; override_rewire(compose, "send_message", () => { @@ -334,6 +335,7 @@ test_ui("enter_with_preview_open", ({override, override_rewire}) => { assert.ok(!$("#compose .undo_markdown_preview").visible()); assert.ok(!$("#compose .preview_message_area").visible()); assert.ok($("#compose .markdown_preview").visible()); + assert.ok(!$("#compose").hasClass("preview_mode")); assert.ok(send_message_called); assert.ok(show_button_spinner_called); @@ -386,6 +388,7 @@ test_ui("finish", ({override, override_rewire}) => { $("#compose .undo_markdown_preview").show(); $("#compose .preview_message_area").show(); $("#compose .markdown_preview").hide(); + $("#compsoe").addClass("preview_mode"); $("#compose-textarea").val("foobarfoobar"); override_rewire(compose_ui, "compose_spinner_visible", false); compose_state.set_message_type("private"); @@ -405,6 +408,7 @@ test_ui("finish", ({override, override_rewire}) => { assert.ok(!$("#compose .undo_markdown_preview").visible()); assert.ok(!$("#compose .preview_message_area").visible()); assert.ok($("#compose .markdown_preview").visible()); + assert.ok(!$("#compose").hasClass("preview_mode")); assert.ok(send_message_called); assert.ok(compose_finished_event_checked); })(); @@ -579,6 +583,7 @@ test_ui("on_events", ({override, override_rewire}) => { $("#compose .markdown_preview").show(); $("#compose .undo_markdown_preview").hide(); $("#compose .preview_message_area").hide(); + $("#compose").removeClass("preview_mode"); } function assert_visibilities() { @@ -586,6 +591,7 @@ test_ui("on_events", ({override, override_rewire}) => { assert.ok(!$("#compose .markdown_preview").visible()); assert.ok($("#compose .undo_markdown_preview").visible()); assert.ok($("#compose .preview_message_area").visible()); + assert.ok($("#compose").hasClass("preview_mode")); } function setup_mock_markdown_contains_backend_only_syntax(msg_content, return_val) { @@ -704,6 +710,7 @@ test_ui("on_events", ({override, override_rewire}) => { $("#compose .undo_markdown_preview").show(); $("#compose .preview_message_area").show(); $("#compose .markdown_preview").hide(); + $("#compose").removeClass("preview_mode"); const event = { preventDefault: noop, @@ -718,6 +725,7 @@ test_ui("on_events", ({override, override_rewire}) => { assert.ok(!$("#compose .undo_markdown_preview").visible()); assert.ok(!$("#compose .preview_message_area").visible()); assert.ok($("#compose .markdown_preview").visible()); + assert.ok(!$("#compose").hasClass("preview_mode")); })(); });