web: change tag list styling and show unread at the top

This commit is contained in:
Bill Thiede 2023-11-27 19:48:19 -08:00
parent 71af8179ec
commit 3a5ca74d71
4 changed files with 64 additions and 42 deletions

View File

@ -19,5 +19,6 @@ query FrontPageQuery($query: String!, $after: String $before: String, $first: In
name
bgColor
fgColor
unread
}
}

View File

@ -37,5 +37,6 @@ query ShowThreadQuery($threadId: String!) {
name
bgColor
fgColor
unread
}
}

View File

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

View File

@ -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<Msg>) {
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<Msg>) {
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<Msg> {
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<Msg> {
.take_while(|(a, b)| a == b)
.count()
}
fn view_tag_list<'a>(tags: impl Iterator<Item = &'a Tag>) -> Vec<Node<Msg>> {
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),