From 0f0c52e09650d859756379817e0234c78a47a02d Mon Sep 17 00:00:00 2001 From: Satyam Bansal Date: Sat, 10 Jun 2023 01:23:24 +0530 Subject: [PATCH] drafts: Remove classes that had the same effect. In commit 5edc8fc, abstract classes were added to the drafts overlay, but the classes that were already there were not removed. This resulted in the same styles being applied twice. --- web/e2e-tests/drafts.test.ts | 28 ++++++++++++++-------------- web/src/drafts.js | 31 +++++++++++++++++-------------- web/src/messages_overlay_ui.ts | 4 ++-- web/src/rows.js | 2 +- web/styles/dark_theme.css | 2 +- web/templates/draft.hbs | 12 ++++++------ web/tests/drafts.test.js | 6 +++--- 7 files changed, 44 insertions(+), 41 deletions(-) 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(); });