wathiede/letterbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Releases Wiki Activity

web: change up spacing in email headers. Increase density

Browse Source
This commit is contained in:
Bill Thiede 2024-10-01 15:12:02 -07:00
parent e12ea2d7e4
commit ac46b0e4d0
1 changed files with 67 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
web/src/view/mod.rs
View File

@ -375,7 +375,35 @@ fn has_unread(tags: &[String]) -> bool {
tags.contains(&String::from("unread"))
}
fn render_avatar(avatar: Option<String>, from: &str) -> Node<Msg> {
fn render_avatar(avatar: Option<String>, from: &str, big: bool) -> Node<Msg> {
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<String>, from: &str) -> Node<Msg> {
let initials: String = from
.to_lowercase()
.trim()
@ -456,14 +484,14 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
//let avatar: Option<String> = 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<String> = 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<Msg>
//let avatar: Option<String> = 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]],