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

@@ -226,7 +226,7 @@
                         </div>
                         <div id="typing_notifications">
                         </div>
-                        <div id="mark_as_read_turned_off_banner" class="alert home-error-bar">
+                        <div id="mark_read_on_scroll_state_banner">
                         </div>
                         <div id="bottom_whitespace">
                         </div>

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);
     }
 }
 

web/templates/unread_banner/mark_as_read_disabled_banner.hbs

@@ -1,12 +1,15 @@
-<p id="mark_as_read_turned_off_content">
-    {{#tr}}
-        Your Zulip app is <z-link>configured</z-link> to not mark messages as read on scroll.
-        {{#*inline "z-link"}}<a href='help/marking-messages-as-read'>{{> @partial-block}}</a>{{/inline}}
-    {{/tr}}
-</p>
-<div id="mark_as_read_controls">
-    <button id="mark_view_read" class="btn btn-warning">
-        {{t 'Mark as read' }}
-    </button>
+<div id="mark_as_read_turned_off_banner" class="alert home-error-bar">
+    <p id="mark_as_read_turned_off_content">
+        {{#tr}}
+            Your Zulip app is <z-link>configured</z-link> to not mark messages as read on scroll.
+            {{#*inline "z-link"}}<a href='help/marking-messages-as-read'>{{> @partial-block}}</a>{{/inline}}
+        {{/tr}}
+    </p>
+    <div id="mark_as_read_controls">
+        <button id="mark_view_read" class="btn btn-warning">
+            {{t 'Mark as read' }}
+        </button>
+    </div>
+    <button type="button" id="mark_as_read_close" class="close">×</button>
 </div>
-<button type="button" id="mark_as_read_close" class="close">×</button>
+

web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs

@@ -1,12 +1,15 @@
-<p id="mark_as_read_turned_off_content">
-    {{#tr}}
-        Your Zulip app is <z-link>configured</z-link> to mark messages as read on scroll only in conversation views.
-        {{#*inline "z-link"}}<a href='help/marking-messages-as-read'>{{> @partial-block}}</a>{{/inline}}
-    {{/tr}}
-</p>
-<div id="mark_as_read_controls">
-    <button id="mark_view_read" class="btn btn-warning">
-        {{t 'Mark as read' }}
-    </button>
+<div id="mark_as_read_turned_off_banner" class="alert home-error-bar">
+    <p id="mark_as_read_turned_off_content">
+        {{#tr}}
+            Your Zulip app is <z-link>configured</z-link> to mark messages as read on scroll only in conversation views.
+            {{#*inline "z-link"}}<a href='help/marking-messages-as-read'>{{> @partial-block}}</a>{{/inline}}
+        {{/tr}}
+    </p>
+    <div id="mark_as_read_controls">
+        <button id="mark_view_read" class="btn btn-warning">
+            {{t 'Mark as read' }}
+        </button>
+    </div>
+    <button type="button" id="mark_as_read_close" class="close">×</button>
 </div>
-<button type="button" id="mark_as_read_close" class="close">×</button>
+

web/templates/unread_banner/mark_as_read_turned_off_banner.hbs

@@ -1,9 +1,12 @@
-<p id="mark_as_read_turned_off_content">
-    {{t 'To preserve your reading state, this view does not mark messages as read.' }}
-</p>
-<div id="mark_as_read_controls">
-    <button id="mark_view_read" class="btn btn-warning">
-        {{t 'Mark as read' }}
-    </button>
+<div id="mark_as_read_turned_off_banner" class="alert home-error-bar">
+    <p id="mark_as_read_turned_off_content">
+        {{t 'To preserve your reading state, this view does not mark messages as read.' }}
+    </p>
+    <div id="mark_as_read_controls">
+        <button id="mark_view_read" class="btn btn-warning">
+            {{t 'Mark as read' }}
+        </button>
+    </div>
+    <button type="button" id="mark_as_read_close" class="close">×</button>
 </div>
-<button type="button" id="mark_as_read_close" class="close">×</button>
+

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() {

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);