web: more dense email headers
This commit is contained in:
parent
e0d0ede2ce
commit
58acd8018a
@ -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_detail.as_ref().map(|text| copy_text_widget(&text)),
|
&from,
|
||||||
|
" ",
|
||||||
|
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![
|
name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown))
|
||||||
if i > 0 { ", " } else { "" },
|
, " "]
|
||||||
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 {
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user