From ac46b0e4d0155a2beb8725097e121279db3a3a79 Mon Sep 17 00:00:00 2001 From: Bill Thiede Date: Tue, 1 Oct 2024 15:12:02 -0700 Subject: [PATCH] web: change up spacing in email headers. Increase density --- web/src/view/mod.rs | 109 +++++++++++++++++++++++++++----------------- 1 file changed, 67 insertions(+), 42 deletions(-) diff --git a/web/src/view/mod.rs b/web/src/view/mod.rs index d9d6b83..ab04fcd 100644 --- a/web/src/view/mod.rs +++ b/web/src/view/mod.rs @@ -375,7 +375,35 @@ fn has_unread(tags: &[String]) -> bool { tags.contains(&String::from("unread")) } -fn render_avatar(avatar: Option, from: &str) -> Node { +fn render_avatar(avatar: Option, from: &str, big: bool) -> Node { + let initials: String = from + .to_lowercase() + .trim() + .split(" ") + .map(|word| word.chars().next().unwrap()) + .filter(|c| c.is_alphanumeric()) + // Limit to 2 characters because more characters don't fit in the box + .take(2) + .collect(); + let from_color = compute_color(from); + let size = if big { + C!["w-16", "h-16", "text-5xl"] + } else { + C!["w-8", "h-8", "text-xl"] + }; + div![ + C![ + "font-extrabold", + "grid", + "place-content-center", + "uppercase" + ], + size, + style! {St::BackgroundColor=>from_color}, + span![initials] + ] +} +fn render_svg_avatar(avatar: Option, from: &str) -> Node { let initials: String = from .to_lowercase() .trim() @@ -456,14 +484,14 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node< //let avatar: Option = Some(String::from("https://bulma.io/images/placeholders/64x64.png")); let id = msg.id.clone(); let is_unread = has_unread(&msg.tags); - let img = render_avatar(avatar, &from); + let avatar = render_avatar(avatar, &from, true); let unknown = "UNKNOWN".to_string(); div![figure![ C!["flex"], - div![C!["w-16", "h-16", "h-auto"], &img], + div![avatar], div![ C!["px-4", "mr-auto"], - span![C!["font-semibold"], &from], + span![C!["font-semibold", "text-sm"], &from], " ", from_detail.as_ref().map(|text| copy_text_widget(&text)), IF!(!msg.to.is_empty() =>div![ @@ -514,11 +542,14 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node< }) ] ]), - msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]), ], span![ - C!["m-4", "read-status"], + C!["text-right"], + msg.timestamp + .map(|ts| div![C!["text-xs", "text-nowrap"], human_age(ts)]), i![C![ + "mx-4", + "read-status", "far", if is_unread { "fa-envelope" @@ -526,14 +557,10 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node< "fa-envelope-open" }, ]], - { - // TODO remove clone and code block when removing article![] below - let id = id.clone(); - ev(Ev::Click, move |e| { - e.stop_propagation(); - Msg::SetUnread(id, !is_unread) - }) - } + ev(Ev::Click, move |e| { + e.stop_propagation(); + Msg::SetUnread(id, !is_unread) + }), ] ]] } @@ -553,16 +580,16 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod //let avatar: Option = Some(String::from("https://bulma.io/images/placeholders/64x64.png")); let id = msg.id.clone(); let is_unread = has_unread(&msg.tags); - let img = render_avatar(avatar, &from); + let avatar = render_avatar(avatar, &from, false); let unknown = "UNKNOWN".to_string(); div![figure![ C!["flex"], - div![C!["w-16", "h-16", "h-auto"], &img], + div![avatar], div![ C!["px-4", "mr-auto"], - span![C!["font-semibold"], &from], + div![C!["font-semibold", "text-sm"], &from], " ", - IF!(!msg.to.is_empty() =>div![ + IF!(!msg.to.is_empty() => span![ C!["text-xs"], span![ C!["font-semibold"], @@ -576,9 +603,10 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown)) ] }) - ] + ], + " " ]), - IF!(!msg.cc.is_empty() =>div![ + IF!(!msg.cc.is_empty() => span![ C!["text-xs"], span![ C!["font-semibold"], @@ -593,29 +621,26 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod ] }) ] - ]), - msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]), + ]) ], span![ - C!["m-4", "read-status"], - i![ - C![ - "far", - if is_unread { - "fa-envelope" - } else { - "fa-envelope-open" - }, - ], - { - // TODO remove clone and code block when removing article![] below - let id = id.clone(); - ev(Ev::Click, move |e| { - e.stop_propagation(); - Msg::SetUnread(id, !is_unread) - }) - } - ] + C!["text-right"], + msg.timestamp + .map(|ts| div![C!["text-xs", "text-nowrap"], human_age(ts)]), + i![C![ + "mx-4", + "read-status", + "far", + if is_unread { + "fa-envelope" + } else { + "fa-envelope-open" + }, + ]], + ev(Ev::Click, move |e| { + e.stop_propagation(); + Msg::SetUnread(id, !is_unread) + }), ] ]] } @@ -1075,7 +1100,7 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node //let avatar: Option = Some(String::from("https://bulma.io/images/placeholders/64x64.png")); let id = post.thread_id.clone(); let is_unread = !post.is_read; - let img = render_avatar(avatar, &from); + let img = render_avatar(avatar, &from, true); article![ C!["media"], figure![C!["media-left"], p![C!["image", "is-64x64"], img]],