web: more dense email headers

This commit is contained in:
Bill Thiede 2024-10-01 17:19:52 -07:00
parent e0d0ede2ce
commit 58acd8018a
2 changed files with 26 additions and 68 deletions

View File

@ -387,12 +387,13 @@ fn render_avatar(avatar: Option<String>, from: &str, big: bool) -> Node<Msg> {
.collect(); .collect();
let from_color = compute_color(from); let from_color = compute_color(from);
let size = if big { let size = if big {
C!["w-16", "h-16", "text-5xl"] C!["w-16", "h-16", "text-4xl"]
} else { } else {
C!["w-8", "h-8", "text-xl"] C!["w-8", "h-8", "text-l"]
}; };
div![ div![
C![ C![
"[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]",
"font-extrabold", "font-extrabold",
"grid", "grid",
"place-content-center", "place-content-center",
@ -491,9 +492,12 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
div![avatar], div![avatar],
div![ div![
C!["px-4", "mr-auto"], C!["px-4", "mr-auto"],
span![C!["font-semibold", "text-sm"], &from], span![
C!["font-semibold", "text-sm"],
&from,
" ", " ",
from_detail.as_ref().map(|text| copy_text_widget(&text)), from_detail.as_ref().map(|text| copy_text_widget(&text))
],
IF!(!msg.to.is_empty() =>div![ IF!(!msg.to.is_empty() =>div![
C!["text-xs"], C!["text-xs"],
span![ span![
@ -506,13 +510,7 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
span![ span![
name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown)), name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown)),
" ", " ",
span![ addr.as_ref().map(|addr| copy_text_widget(&addr)),
i![C!["far", "fa-clone"]],
addr.clone().map(|addr| ev(Ev::Click, move |e| {
e.stop_propagation();
Msg::CopyToClipboard(addr)
}))
],
" " " "
] ]
}) })
@ -530,13 +528,7 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
span![ span![
name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown)), name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown)),
" ", " ",
span![ addr.as_ref().map(|addr| copy_text_widget(&addr)),
i![C!["far", "fa-clone"]],
addr.clone().map(|addr| ev(Ev::Click, move |e| {
e.stop_propagation();
Msg::CopyToClipboard(addr)
}))
],
" " " "
] ]
}) })
@ -582,14 +574,15 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
let is_unread = has_unread(&msg.tags); let is_unread = has_unread(&msg.tags);
let avatar = render_avatar(avatar, &from, false); let avatar = render_avatar(avatar, &from, false);
let unknown = "UNKNOWN".to_string(); let unknown = "UNKNOWN".to_string();
div![figure![ div![
C!["flex"], C!["flex"],
div![avatar], div![avatar],
div![ div![
C!["px-4", "mr-auto"], C!["px-4"],
div![C!["font-semibold", "text-sm"], &from], C!["w-fit"],
span![C!["font-semibold", "text-sm"], &from],
" ", " ",
IF!(!msg.to.is_empty() => span![ IF!(!msg.to.is_empty() => div![
C!["text-xs"], C!["text-xs"],
span![ span![
C!["font-semibold"], C!["font-semibold"],
@ -606,21 +599,18 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
], ],
" " " "
]), ]),
IF!(!msg.cc.is_empty() => span![ IF!(!msg.cc.is_empty() => div![
C!["text-xs"], C!["text-xs", "max-w-full", "overflow-clip", "text-ellipsis"],
span![ span![
C!["font-semibold"], C!["font-semibold"],
"CC: " "CC: "
], ],
span![
msg.cc.iter().enumerate().map(|(i, cc)| { msg.cc.iter().enumerate().map(|(i, cc)| {
let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc; let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc;
span![ span![
if i > 0 { ", " } else { "" },
name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown)) name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown))
] , " "]
}) })
]
]) ])
], ],
span![ span![
@ -642,13 +632,13 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
Msg::SetUnread(id, !is_unread) Msg::SetUnread(id, !is_unread)
}), }),
] ]
]] ]
} }
fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) -> Node<Msg> { fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) -> Node<Msg> {
let expand_id = msg.id.clone(); let expand_id = msg.id.clone();
div![ div![
C!["message"], C!["message", "p-4" "bg-grey-900"],
div![ div![
C!["header"], C!["header"],
if open { if open {

View File

@ -41,38 +41,6 @@
} }
} }
.message {
display: inline-block;
padding: 0.5em;
width: 100%;
}
.message .header table td {
border: 0;
padding: 0;
}
.message .header .media-right {
padding: 1rem;
}
.message .headers {
position: relative;
width: 100%;
}
.message .headers .read-status {
position: absolute;
right: 1em;
top: 0em;
}
.message .headers .header {
overflow: clip;
text-overflow: ellipsis;
white-space: nowrap;
}
.message .body { .message .body {
background: white; background: white;
color: black; color: black;