diff --git a/web/e2e-tests/drafts.test.ts b/web/e2e-tests/drafts.test.ts index 972ed7f3b3..ff901f547c 100644 --- a/web/e2e-tests/drafts.test.ts +++ b/web/e2e-tests/drafts.test.ts @@ -13,7 +13,7 @@ async function wait_for_drafts_to_appear(page: Page): Promise { } async function get_drafts_count(page: Page): Promise { - return await page.$$eval(".draft-row", (drafts) => drafts.length); + return await page.$$eval("#drafts_table .overlay-message-row", (drafts) => drafts.length); } const drafts_button = ".top_left_drafts"; @@ -76,35 +76,35 @@ async function test_previously_created_drafts_rendered(page: Page): Promise { console.log("Restoring stream message draft"); - await page.click("#drafts_table .message_row:not(.private-message) .restore-draft"); + await page.click("#drafts_table .message_row:not(.private-message) .restore-overlay-message"); await wait_for_drafts_to_disappear(page); await page.waitForSelector("#stream_message_recipient_topic", {visible: true}); await page.waitForSelector("#preview_message_area", {hidden: true}); @@ -145,21 +145,21 @@ async function test_edited_draft_message(page: Page): Promise { assert.strictEqual( await common.get_text_from_selector( page, - ".draft-row .message_header_stream .stream_label", + "#drafts_table .overlay-message-row .message_header_stream .stream_label", ), "Denmark", ); assert.strictEqual( await common.get_text_from_selector( page, - ".draft-row .message_header_stream .stream_topic", + "#drafts_table .overlay-message-row .message_header_stream .stream_topic", ), "tests", ); assert.strictEqual( await common.get_text_from_selector( page, - ".draft-row .message_row:not(.private-message) .rendered_markdown.restore-draft", + "#drafts_table .overlay-message-row .message_row:not(.private-message) .rendered_markdown.restore-overlay-message", ), "Updated stream message", ); @@ -167,7 +167,7 @@ async function test_edited_draft_message(page: Page): Promise { async function test_restore_private_message_draft_via_draft_overlay(page: Page): Promise { console.log("Restoring direct message draft."); - await page.click(".message_row.private-message .restore-draft"); + await page.click(".message_row.private-message .restore-overlay-message"); await wait_for_drafts_to_disappear(page); await page.waitForSelector("#compose-direct-recipient", {visible: true}); await common.check_compose_state(page, { @@ -189,7 +189,7 @@ async function test_delete_draft(page: Page): Promise { await page.waitForSelector(drafts_button, {visible: true}); await page.click(drafts_button); await wait_for_drafts_to_appear(page); - await page.click("#drafts_table .message_row.private-message .delete-draft"); + await page.click("#drafts_table .message_row.private-message .delete-overlay-message"); const drafts_count = await get_drafts_count(page); assert.strictEqual(drafts_count, 1, "Draft not deleted."); await page.waitForSelector("#drafts_table .message_row.private-message", {hidden: true}); @@ -223,14 +223,14 @@ async function test_save_draft_by_reloading(page: Page): Promise { assert.strictEqual( await common.get_text_from_selector( page, - ".draft-row .message_header_private_message .stream_label", + "#drafts_table .overlay-message-row .message_header_private_message .stream_label", ), "You and Cordelia, Lear's daughter", ); assert.strictEqual( await common.get_text_from_selector( page, - ".draft-row:nth-last-child(2) .rendered_markdown.restore-draft", + "#drafts_table .overlay-message-row:nth-last-child(2) .rendered_markdown.restore-overlay-message", ), "Test direct message draft.", ); diff --git a/web/src/drafts.js b/web/src/drafts.js index 02e08700b4..1ac86a08fe 100644 --- a/web/src/drafts.js +++ b/web/src/drafts.js @@ -427,12 +427,12 @@ function remove_draft($draft_row) { $draft_row.remove(); - if ($("#drafts_table .draft-row").length === 0) { + if ($("#drafts_table .overlay-message-row").length === 0) { $("#drafts_table .no-drafts").show(); } update_rendered_drafts( - $("#drafts-from-conversation .draft-row").length > 0, - $("#other-drafts .draft-row").length > 0, + $("#drafts-from-conversation .overlay-message-row").length > 0, + $("#other-drafts .overlay-message-row").length > 0, ); } @@ -551,8 +551,8 @@ const keyboard_handling_context = { }, items_container_selector: "drafts-container", items_list_selector: "drafts-list", - row_item_selector: "draft-row", - box_item_selector: "draft-info-box", + row_item_selector: "overlay-message-row", + box_item_selector: "overlay-message-info-box", id_attribute_name: "data-draft-id", }; @@ -606,11 +606,11 @@ export function launch() { }); const $drafts_table = $("#drafts_table"); $drafts_table.append(rendered); - if ($("#drafts_table .draft-row").length > 0) { + if ($("#drafts_table .overlay-message-row").length > 0) { $("#drafts_table .no-drafts").hide(); // Update possible dynamic elements. const $rendered_drafts = $drafts_table.find( - ".message_content.rendered_markdown.restore-draft", + ".message_content.rendered_markdown.restore-overlay-message", ); $rendered_drafts.each(function () { rendered_markdown.update_elements($(this)); @@ -620,23 +620,26 @@ export function launch() { } function setup_event_handlers() { - $(".restore-draft").on("click", function (e) { + $("#drafts_table .restore-overlay-message").on("click", function (e) { if (document.getSelection().type === "Range") { return; } e.stopPropagation(); - const $draft_row = $(this).closest(".draft-row"); + const $draft_row = $(this).closest(".overlay-message-row"); const $draft_id = $draft_row.data("draft-id"); restore_draft($draft_id); }); - $(".draft_controls .delete-draft").on("click", function () { - const $draft_row = $(this).closest(".draft-row"); + $("#drafts_table .overlay_message_controls .delete-overlay-message").on( + "click", + function () { + const $draft_row = $(this).closest(".overlay-message-row"); - remove_draft($draft_row); - }); + remove_draft($draft_row); + }, + ); } const drafts = draft_model.get(); @@ -685,7 +688,7 @@ export function initialize() { set_count(Object.keys(draft_model.get()).length); - $("body").on("focus", ".draft-info-box", (e) => { + $("body").on("focus", "#drafts_table .overlay-message-info-box", (e) => { messages_overlay_ui.activate_element(e.target, keyboard_handling_context); }); } diff --git a/web/src/messages_overlay_ui.ts b/web/src/messages_overlay_ui.ts index 3595585293..c5fee8a891 100644 --- a/web/src/messages_overlay_ui.ts +++ b/web/src/messages_overlay_ui.ts @@ -89,7 +89,7 @@ function row_before_focus(context: Context): JQuery { $focused_row.parent().attr("id") === "other-drafts" && $("#drafts-from-conversation").is(":visible") ) { - return $($("#drafts-from-conversation").children(".draft-row:visible").last()); + return $($("#drafts-from-conversation").children(".overlay-message-row:visible").last()); } return $prev_row; @@ -106,7 +106,7 @@ function row_after_focus(context: Context): JQuery { $focused_row.parent().attr("id") === "drafts-from-conversation" && $("#other-drafts").is(":visible") ) { - return $("#other-drafts").children(".draft-row:visible").first(); + return $("#other-drafts").children(".overlay-message-row:visible").first(); } return $next_row; } diff --git a/web/src/rows.js b/web/src/rows.js index 09e08d73d1..62c9b0adaf 100644 --- a/web/src/rows.js +++ b/web/src/rows.js @@ -71,7 +71,7 @@ export function visible_range(start_id, end_id) { } export function is_draft_row($row) { - return $row.find(".restore-draft").length >= 1; + return $row.find("#drafts_table .restore-overlay-message").length >= 1; } export function id($message_row) { diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index a4d9dd77c5..d1258935ad 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -612,7 +612,7 @@ #compose-content, .message_list .recipient_row, .message_row, - .draft-row .draft-info-box, + .overlay-message-row .overlay-message-info-box, .preview_message_area { border-color: hsl(0deg 0% 0% / 40%); } diff --git a/web/templates/draft.hbs b/web/templates/draft.hbs index 56a8a2140c..73bc01eb57 100644 --- a/web/templates/draft.hbs +++ b/web/templates/draft.hbs @@ -1,5 +1,5 @@ -
-
+
+
{{#if is_stream}}
@@ -34,12 +34,12 @@
-
- - +
+ +
-
{{rendered_markdown content}}
+
{{rendered_markdown content}}
diff --git a/web/tests/drafts.test.js b/web/tests/drafts.test.js index c832a7e9af..bbdae49dfc 100644 --- a/web/tests/drafts.test.js +++ b/web/tests/drafts.test.js @@ -609,11 +609,11 @@ test("format_drafts", ({override_rewire, mock_template}) => { const $unread_count = $(""); $(".top_left_drafts").set_find_results(".unread_count", $unread_count); - $.create("#drafts_table .draft-row", {children: []}); + $.create("#drafts_table .overlay-message-row", {children: []}); drafts.launch(); $.clear_all_elements(); - $.create("#drafts_table .draft-row", {children: []}); + $.create("#drafts_table .overlay-message-row", {children: []}); $("#draft_overlay").css = () => {}; override_rewire(sub_store, "get", (stream_id) => { @@ -769,6 +769,6 @@ test("filter_drafts", ({override_rewire, mock_template}) => { compose_state.set_message_type("private"); compose_state.private_message_recipient(aaron.email); - $.create("#drafts_table .draft-row", {children: []}); + $.create("#drafts_table .overlay-message-row", {children: []}); drafts.launch(); });