From 5018cec311cde06bac57be268cdfdfa7a66ed3c4 Mon Sep 17 00:00:00 2001 From: Joelute Date: Mon, 1 May 2023 16:23:27 -0400 Subject: [PATCH] unread_banner: Refactor unread banner HTML structure. Previously, the unread banner templates just rendered on the contents of the unread banner. This works fine if we don't want to make changes towards the parent/container of the contents. This change introduces a new container to each unread banner templates and a rename. Thus, we can make unique styling changes to the unread banners while also bring the structure closer to how it is for compose banners. --- templates/zerver/app/index.html | 2 +- web/src/unread_ui.js | 13 +++++----- .../mark_as_read_disabled_banner.hbs | 25 +++++++++++-------- ...mark_as_read_only_in_conversation_view.hbs | 25 +++++++++++-------- .../mark_as_read_turned_off_banner.hbs | 19 ++++++++------ web/tests/narrow_activate.test.js | 2 +- web/tests/recent_topics.test.js | 2 +- 7 files changed, 49 insertions(+), 39 deletions(-) diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html index d44b6dfff3..0d5f13afa0 100644 --- a/templates/zerver/app/index.html +++ b/templates/zerver/app/index.html @@ -226,7 +226,7 @@
-
+
diff --git a/web/src/unread_ui.js b/web/src/unread_ui.js index 9a267d5a14..04a71a1c9f 100644 --- a/web/src/unread_ui.js +++ b/web/src/unread_ui.js @@ -27,16 +27,17 @@ export function update_unread_banner() { user_settings.web_mark_read_on_scroll_policy === web_mark_read_on_scroll_policy_values.never.code ) { - $("#mark_as_read_turned_off_banner").html(render_mark_as_read_disabled_banner()); + $("#mark_read_on_scroll_state_banner").html(render_mark_as_read_disabled_banner()); } else if ( user_settings.web_mark_read_on_scroll_policy === web_mark_read_on_scroll_policy_values.conversation_only.code && !is_conversation_view ) { - $("#mark_as_read_turned_off_banner").html(render_mark_as_read_only_in_conversation_view()); + $("#mark_read_on_scroll_state_banner").html( + render_mark_as_read_only_in_conversation_view(), + ); } else { - $("#mark_as_read_turned_off_banner").html(render_mark_as_read_turned_off_banner()); - + $("#mark_read_on_scroll_state_banner").html(render_mark_as_read_turned_off_banner()); if (message_lists.current.can_mark_messages_read_without_setting()) { hide_unread_banner(); } @@ -46,7 +47,7 @@ export function update_unread_banner() { export function hide_unread_banner() { // Use visibility instead of hide() to prevent messages on the screen from // shifting vertically. - $("#mark_as_read_turned_off_banner").toggleClass("invisible", true); + $("#mark_read_on_scroll_state_banner").toggleClass("invisible", true); } export function reset_unread_banner() { @@ -56,7 +57,7 @@ export function reset_unread_banner() { export function notify_messages_remain_unread() { if (!user_closed_unread_banner) { - $("#mark_as_read_turned_off_banner").toggleClass("invisible", false); + $("#mark_read_on_scroll_state_banner").toggleClass("invisible", false); } } diff --git a/web/templates/unread_banner/mark_as_read_disabled_banner.hbs b/web/templates/unread_banner/mark_as_read_disabled_banner.hbs index 3f5804a2d0..44942400e8 100644 --- a/web/templates/unread_banner/mark_as_read_disabled_banner.hbs +++ b/web/templates/unread_banner/mark_as_read_disabled_banner.hbs @@ -1,12 +1,15 @@ -

- {{#tr}} - Your Zulip app is configured to not mark messages as read on scroll. - {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} - {{/tr}} -

-
- +
+

+ {{#tr}} + Your Zulip app is configured to not mark messages as read on scroll. + {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} + {{/tr}} +

+
+ +
+
- + diff --git a/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs b/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs index 1b99416895..8edf118d24 100644 --- a/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs +++ b/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs @@ -1,12 +1,15 @@ -

- {{#tr}} - Your Zulip app is configured to mark messages as read on scroll only in conversation views. - {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} - {{/tr}} -

-
- +
+

+ {{#tr}} + Your Zulip app is configured to mark messages as read on scroll only in conversation views. + {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} + {{/tr}} +

+
+ +
+
- + diff --git a/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs b/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs index 3b67a4ffb8..9e4909fd25 100644 --- a/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs +++ b/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs @@ -1,9 +1,12 @@ -

- {{t 'To preserve your reading state, this view does not mark messages as read.' }} -

-
- +
+

+ {{t 'To preserve your reading state, this view does not mark messages as read.' }} +

+
+ +
+
- + diff --git a/web/tests/narrow_activate.test.js b/web/tests/narrow_activate.test.js index 47b4fd78bc..4bea97c9d9 100644 --- a/web/tests/narrow_activate.test.js +++ b/web/tests/narrow_activate.test.js @@ -98,7 +98,7 @@ function test_helper() { stub(compose_closed_ui, "update_buttons_for_stream"); stub(compose_closed_ui, "update_buttons_for_private"); // We don't test the css calls; we just skip over them. - $("#mark_as_read_turned_off_banner").toggleClass = () => {}; + $("#mark_read_on_scroll_state_banner").toggleClass = () => {}; return { clear() { diff --git a/web/tests/recent_topics.test.js b/web/tests/recent_topics.test.js index aba8656cc4..48fa37fee2 100644 --- a/web/tests/recent_topics.test.js +++ b/web/tests/recent_topics.test.js @@ -425,7 +425,7 @@ test("test_recent_topics_show", ({mock_template, override}) => { stub_out_filter_buttons(); // We don't test the css calls; we just skip over them. - $("#mark_as_read_turned_off_banner").toggleClass = () => {}; + $("#mark_read_on_scroll_state_banner").toggleClass = () => {}; rt.clear_for_tests(); rt.process_messages(messages);