Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Joelute 2023-05-01 16:23:27 -04:00 committed by Tim Abbott
parent 47e0a89739
commit 5018cec311
7 changed files with 49 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/zerver/app/index.html
View File

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

13
web/src/unread_ui.js
View File

@ -27,16 +27,17 @@ export function update_unread_banner() {
user_settings.web_mark_read_on_scroll_policy === user_settings.web_mark_read_on_scroll_policy ===
web_mark_read_on_scroll_policy_values.never.code 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 ( } else if (
user_settings.web_mark_read_on_scroll_policy === user_settings.web_mark_read_on_scroll_policy ===
web_mark_read_on_scroll_policy_values.conversation_only.code && web_mark_read_on_scroll_policy_values.conversation_only.code &&
!is_conversation_view !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 { } 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()) { if (message_lists.current.can_mark_messages_read_without_setting()) {
hide_unread_banner(); hide_unread_banner();
} }
@ -46,7 +47,7 @@ export function update_unread_banner() {
export function hide_unread_banner() { export function hide_unread_banner() {
// Use visibility instead of hide() to prevent messages on the screen from // Use visibility instead of hide() to prevent messages on the screen from
// shifting vertically. // 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() { export function reset_unread_banner() {
@ -56,7 +57,7 @@ export function reset_unread_banner() {
export function notify_messages_remain_unread() { export function notify_messages_remain_unread() {
if (!user_closed_unread_banner) { if (!user_closed_unread_banner) {
$("#mark_as_read_turned_off_banner").toggleClass("invisible", false); $("#mark_read_on_scroll_state_banner").toggleClass("invisible", false);
} }
} }

25
web/templates/unread_banner/mark_as_read_disabled_banner.hbs
View File

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

25
web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs
View File

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

19
web/templates/unread_banner/mark_as_read_turned_off_banner.hbs
View File

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

2
web/tests/narrow_activate.test.js
View File

@ -98,7 +98,7 @@ function test_helper() {
stub(compose_closed_ui, "update_buttons_for_stream"); stub(compose_closed_ui, "update_buttons_for_stream");
stub(compose_closed_ui, "update_buttons_for_private"); stub(compose_closed_ui, "update_buttons_for_private");
// We don't test the css calls; we just skip over them. // 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 { return {
clear() { clear() {

2
web/tests/recent_topics.test.js
View File

@ -425,7 +425,7 @@ test("test_recent_topics_show", ({mock_template, override}) => {
stub_out_filter_buttons(); stub_out_filter_buttons();
// We don't test the css calls; we just skip over them. // 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.clear_for_tests();
rt.process_messages(messages); rt.process_messages(messages);