From 3a5ca74d710932fafc498006bcb7071e5b8f5a2b Mon Sep 17 00:00:00 2001 From: Bill Thiede Date: Mon, 27 Nov 2023 19:48:19 -0800 Subject: [PATCH] web: change tag list styling and show unread at the top --- web/graphql/front_page.graphql | 1 + web/graphql/show_thread.graphql | 1 + web/index.html | 6 +- web/src/lib.rs | 98 +++++++++++++++++++-------------- 4 files changed, 64 insertions(+), 42 deletions(-) diff --git a/web/graphql/front_page.graphql b/web/graphql/front_page.graphql index f43cdf8..2f0b2b3 100644 --- a/web/graphql/front_page.graphql +++ b/web/graphql/front_page.graphql @@ -19,5 +19,6 @@ query FrontPageQuery($query: String!, $after: String $before: String, $first: In name bgColor fgColor + unread } } diff --git a/web/graphql/show_thread.graphql b/web/graphql/show_thread.graphql index 4c6af64..14eb3eb 100644 --- a/web/graphql/show_thread.graphql +++ b/web/graphql/show_thread.graphql @@ -37,5 +37,6 @@ query ShowThreadQuery($threadId: String!) { name bgColor fgColor + unread } } diff --git a/web/index.html b/web/index.html index 08ad6fd..8710ded 100644 --- a/web/index.html +++ b/web/index.html @@ -144,7 +144,11 @@ blockquote[type="cite"], padding: 0.25em 0.5em; } .tags-menu .tag-indent { - padding-left: 1em; + padding-left: .5em; +} +.tags-menu .tag-tag { + margin-left: -1em; + padding-right: .25em; } .navbar { border: none; diff --git a/web/src/lib.rs b/web/src/lib.rs index 759eca8..51d2632 100644 --- a/web/src/lib.rs +++ b/web/src/lib.rs @@ -180,6 +180,7 @@ struct Tag { name: String, bg_color: String, fg_color: String, + unread: i64, } #[derive(Debug, PartialEq)] @@ -394,6 +395,7 @@ fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders) { name: t.name, bg_color: t.bg_color, fg_color: t.fg_color, + unread: t.unread, }) .collect(), ); @@ -425,6 +427,7 @@ fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders) { name: t.name, bg_color: t.bg_color, fg_color: t.fg_color, + unread: t.unread, }) .collect(), ); @@ -1240,12 +1243,16 @@ fn view_desktop(model: &Model) -> Node { attrs! { At::Href => urls::search(&format!("tag:{}", t.name), 0) }, - style! { - St::BackgroundColor => t.bg_color, - St::Color => t.fg_color, - }, (0..indent).map(|_| span![C!["tag-indent"], ""]), - display_name + i![ + C!["tag-tag", "fa-solid", "fa-tag"], + style! { + //"--fa-primary-color" => t.fg_color, + St::Color => t.bg_color, + }, + ], + display_name, + IF!(t.unread>0 => format!(" ({})", t.unread)) ]] } fn matches(a: &[&str], b: &[&str]) -> usize { @@ -1253,46 +1260,55 @@ fn view_desktop(model: &Model) -> Node { .take_while(|(a, b)| a == b) .count() } + fn view_tag_list<'a>(tags: impl Iterator) -> Vec> { + let mut lis = Vec::new(); + let mut last = Vec::new(); + for t in tags { + let parts: Vec<_> = t.name.split('/').collect(); + let mut n = matches(&last, &parts); + if t.name.starts_with("ZZCrap/Free") { + info!("n: {n}, parts: {parts:?} last: {last:?}"); + } + if n <= parts.len() - 2 && parts.len() > 1 { + // Synthesize fake tags for proper indenting. + for i in n..parts.len() - 1 { + let display_name = parts[n]; + lis.push(view_tag_li( + &display_name, + n, + &Tag { + name: parts[..i + 1].join("/"), + bg_color: "#000".to_string(), + fg_color: "#fff".to_string(), + unread: 0, + }, + )); + } + last = parts[..parts.len() - 1].to_vec(); + n = parts.len() - 1; + } + let display_name = parts[n]; + lis.push(view_tag_li(&display_name, n, t)); + last = parts; + } + lis + } + let unread = model + .tags + .as_ref() + .map(|tags| tags.iter().filter(|t| t.unread > 0)); + let read = model + .tags + .as_ref() + .map(|tags| tags.iter().filter(|t| t.unread == 0)); div![ C!["desktop-main-content"], aside![ C!["tags-menu", "menu"], - p![C!["menu-label"], "Tags"], - ul![ - C!["menu-list"], - model.tags.as_ref().map(|tags| { - let mut lis = Vec::new(); - let mut last = Vec::new(); - for t in tags { - let parts: Vec<_> = t.name.split('/').collect(); - let mut n = matches(&last, &parts); - if t.name.starts_with("ZZCrap/Free") { - info!("n: {n}, parts: {parts:?} last: {last:?}"); - } - if n <= parts.len() - 2 && parts.len() > 1 { - // Synthesize fake tags for proper indenting. - for i in n..parts.len() - 1 { - let display_name = parts[n]; - lis.push(view_tag_li( - &display_name, - n, - &Tag { - name: parts[..i + 1].join("/"), - bg_color: "#000".to_string(), - fg_color: "#fff".to_string(), - }, - )); - } - last = parts[..parts.len() - 1].to_vec(); - n = parts.len() - 1; - } - let display_name = parts[n]; - lis.push(view_tag_li(&display_name, n, t)); - last = parts; - } - lis - }) - ] + p![C!["menu-label"], "Unread"], + ul![C!["menu-list"], unread.map(view_tag_list)], + p![C!["menu-label"], "Read"], + ul![C!["menu-list"], read.map(view_tag_list)] ], div![ view_header(&model.query, &model.refreshing_state),