web: trimmed views for catchup mode

This commit is contained in:
Bill Thiede 2025-02-25 20:43:27 -08:00
parent 09fb14a796
commit ed9fe11fbf

View File

@ -93,13 +93,13 @@ pub fn view(model: &Model) -> Node<Msg> {
} => { } => {
if let Some(catchup) = &model.catchup { if let Some(catchup) = &model.catchup {
catchup_view( catchup_view(
thread(thread_data, open_messages, &model.content_el), thread(thread_data, open_messages, &model.content_el, true),
&catchup.items, &catchup.items,
model.read_completion_ratio, model.read_completion_ratio,
) )
} else { } else {
normal_view( normal_view(
thread(thread_data, open_messages, &model.content_el), thread(thread_data, open_messages, &model.content_el, false),
&model.versions, &model.versions,
&model.query, &model.query,
&model.refreshing_state, &model.refreshing_state,
@ -114,13 +114,13 @@ pub fn view(model: &Model) -> Node<Msg> {
} => { } => {
if let Some(catchup) = &model.catchup { if let Some(catchup) = &model.catchup {
catchup_view( catchup_view(
news_post(post, &model.content_el), news_post(post, &model.content_el, true),
&catchup.items, &catchup.items,
model.read_completion_ratio, model.read_completion_ratio,
) )
} else { } else {
normal_view( normal_view(
news_post(post, &model.content_el), news_post(post, &model.content_el, false),
&model.versions, &model.versions,
&model.query, &model.query,
&model.refreshing_state, &model.refreshing_state,
@ -199,9 +199,10 @@ fn catchup_view(
"border-b", "border-b",
"border-gray-500", "border-gray-500",
"bg-black", "bg-black",
"opacity-50",
], ],
div![ div![
C!["absolute", "right-4", "text-gray-500"], C!["absolute", "top-0", "right-4", "text-gray-500", "p-4"],
span![i![C!["fas", "fa-x"]]], span![i![C!["fas", "fa-x"]]],
ev(Ev::Click, move |_| Msg::CatchupExit) ev(Ev::Click, move |_| Msg::CatchupExit)
], ],
@ -210,7 +211,7 @@ fn catchup_view(
format!("{} left ", items.iter().filter(|i| !i.seen).count(),) format!("{} left ", items.iter().filter(|i| !i.seen).count(),)
] ]
], ],
div![C!["mt-12", "mb-4"], content], div![C!["mt-12", "mb-20"], content],
div![ div![
C![ C![
"fixed", "fixed",
@ -224,6 +225,7 @@ fn catchup_view(
"border-t", "border-t",
"border-gray-500", "border-gray-500",
"bg-black", "bg-black",
"opacity-50",
], ],
button![ button![
tw_classes::button(), tw_classes::button(),
@ -1054,6 +1056,7 @@ fn thread(
thread: &ShowThreadQueryThreadOnEmailThread, thread: &ShowThreadQueryThreadOnEmailThread,
open_messages: &HashSet<String>, open_messages: &HashSet<String>,
content_el: &ElRef<HtmlElement>, content_el: &ElRef<HtmlElement>,
catchup_mode: bool,
) -> Node<Msg> { ) -> Node<Msg> {
// TODO(wathiede): show per-message subject if it changes significantly from top-level subject // TODO(wathiede): show per-message subject if it changes significantly from top-level subject
let subject = if thread.subject.is_empty() { let subject = if thread.subject.is_empty() {
@ -1086,7 +1089,7 @@ fn thread(
C!["p-4", "lg:p-0"], C!["p-4", "lg:p-0"],
h3![C!["text-xl"], subject], h3![C!["text-xl"], subject],
span![removable_tags_chiclet(&thread.thread_id, &tags)], span![removable_tags_chiclet(&thread.thread_id, &tags)],
div![ IF!(!catchup_mode => div![
C!["pt-4", "gap-2", "flex", "justify-around"], C!["pt-4", "gap-2", "flex", "justify-around"],
div![ div![
button![ button![
@ -1124,13 +1127,13 @@ fn thread(
Msg::GoToSearchResults Msg::GoToSearchResults
])), ])),
]] ]]
], ]),
], ],
div![ div![
C!["lg:mt-4", "mail-thread"], C!["lg:mt-4", "mail-thread"],
el_ref(content_el), el_ref(content_el),
messages, messages,
click_to_top() IF!(!catchup_mode => click_to_top())
], ],
/* TODO(wathiede): plumb in orignal id /* TODO(wathiede): plumb in orignal id
a![ a![
@ -1351,7 +1354,11 @@ pub fn view_tags(tags: &Option<Vec<Tag>>) -> Node<Msg> {
} }
// TODO: add cathup_mode:bool and hide elements when true // TODO: add cathup_mode:bool and hide elements when true
fn news_post(post: &ShowThreadQueryThreadOnNewsPost, content_el: &ElRef<HtmlElement>) -> Node<Msg> { fn news_post(
post: &ShowThreadQueryThreadOnNewsPost,
content_el: &ElRef<HtmlElement>,
catchup_mode: bool,
) -> Node<Msg> {
let subject = &post.title; let subject = &post.title;
set_title(subject); set_title(subject);
let read_thread_id = post.thread_id.clone(); let read_thread_id = post.thread_id.clone();
@ -1382,7 +1389,7 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, content_el: &ElRef<HtmlElem
C!["p-4", "lg:p-0"], C!["p-4", "lg:p-0"],
h3![C!["text-xl"], subject], h3![C!["text-xl"], subject],
span![tag(format!("News/{}", post.slug))], span![tag(format!("News/{}", post.slug))],
div![ IF!(!catchup_mode => div![
C!["pt-4", "gap-2", "flex", "justify-around"], C!["pt-4", "gap-2", "flex", "justify-around"],
div![ div![
button![ button![
@ -1410,7 +1417,7 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, content_el: &ElRef<HtmlElem
], ],
// Placeholder for symmetry with email view that has Spam button // Placeholder for symmetry with email view that has Spam button
div![], div![],
], ]),
], ],
div![ div![
C!["lg:mt-4"], C!["lg:mt-4"],
@ -1430,12 +1437,11 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, content_el: &ElRef<HtmlElem
raw![&post.body] raw![&post.body]
] ]
], ],
click_to_top(), IF!(!catchup_mode => click_to_top()),
] ]
} }
fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg> { fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg> {
let from = &post.site; let from = &post.site;
// TODO: move avatar/favicon stuff to the server side and and come up with a solution for emails
let id = post.thread_id.clone(); let id = post.thread_id.clone();
let is_unread = !post.is_read; let is_unread = !post.is_read;
let url = &post.url; let url = &post.url;