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

web: update style for rendering emails, including attachments

Browse Source
This commit is contained in:
Bill Thiede 2025-01-26 15:56:08 -08:00
parent 87321fb669
commit fb73d8272e
2 changed files with 125 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
server/src/nm.rs
View File

@ -223,7 +223,7 @@ pub async fn thread(
}
format!(
r#"<p class="view-part-text-plain">{}</p>"#,
r#"<p class="view-part-text-plain font-mono whitespace-pre">{}</p>"#,
// Trim newlines to prevent excessive white space at the beginning/end of
// presenation. Leave tabs and spaces incase plain text attempts to center a
// header on the first line.
@ -578,7 +578,7 @@ fn flatten_body_parts(parts: &[Body]) -> Body {
.map(|p| match p {
Body::PlainText(PlainText { text, .. }) => {
format!(
r#"<p class="view-part-text-plain">{}</p>"#,
r#"<p class="view-part-text-plain font-mono whitespace-pre">{}</p>"#,
// Trim newlines to prevent excessive white space at the beginning/end of
// presenation. Leave tabs and spaces incase plain text attempts to center a
// header on the first line.

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

@ -30,7 +30,7 @@ mod tw_classes {
];
pub const TAG_X: &[&str] = &[
"rounded-r",
"bg-slate-800",
"bg-neutral-800",
"px-2",
"py-1",
"mr-1",
@ -38,17 +38,17 @@ mod tw_classes {
"[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]",
];
pub const BUTTON: &[&str] = &[
"bg-slate-900",
"bg-neutral-900",
"rounded-md",
"p-2",
"border",
"border-slate-700",
"border-neutral-700",
"text-center",
"text-sm",
"transition-all",
"shadow-md",
"hover:shadow-lg",
"hover:bg-slate-700",
"hover:bg-neutral-700",
"disabled:pointer-events-none",
"disabled:opacity-50",
"disabled:shadow-none",
@ -62,7 +62,7 @@ mod tw_classes {
"checked:appearance-auto",
"rounded",
"border",
"border-gray-500",
"border-neutral-500",
];
}
@ -133,7 +133,7 @@ fn search_results(
"flex-auto",
"py-4",
"border-b",
"border-gray-800"
"border-neutral-800"
],
div![
C!["flex", "items-center", "mr-4"],
@ -432,13 +432,11 @@ fn search_toolbar(
pager: &FrontPageQuerySearchPageInfo,
show_bulk_edit: bool,
) -> Node<Msg> {
info!("pager {pager:#?}");
nav![
C!["p-4", "flex", "w-full", "justify-between"],
div![
C!["gap-2", "flex"],
IF!(show_bulk_edit =>
div![
div![
button![
C![&tw_classes::BUTTON, "rounded-r-none"],
@ -454,10 +452,8 @@ fn search_toolbar(
span![C!["pl-2", "hidden", "md:inline"], "Unread"],
ev(Ev::Click, |_| Msg::SelectionMarkAsUnread)
]
]
]),
IF!(show_bulk_edit =>
div![
div![
button![
C![&tw_classes::BUTTON, "text-red-500"],
@ -470,8 +466,7 @@ fn search_toolbar(
Msg::SelectionMarkAsRead
])
)
],
],
]
]),
],
div![
@ -503,7 +498,7 @@ fn raw_text_message(contents: &str) -> Node<Msg> {
(contents, None)
};
div![
C!["NOTPORTED", "view-part-text-plain"],
C!["view-part-text-plain", "font-mono", "whitespace-pre"],
contents,
truncated_msg,
]
@ -582,7 +577,7 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
let avatar = render_avatar(photo_url, &from, true);
let unknown = "UNKNOWN".to_string();
div![
C!["flex", "p-4"],
C!["flex", "p-4", "bg-neutral-800"],
div![avatar],
div![
C!["px-4", "mr-auto"],
@ -679,7 +674,7 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
let avatar = render_avatar(photo_url, &from, false);
let unknown = "UNKNOWN".to_string();
div![
C!["flex", "p-4"],
C!["flex", "p-4", "bg-neutral-800"],
div![avatar],
div![
C!["px-4", "mr-auto"],
@ -754,6 +749,7 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) -> Node<Msg> {
let expand_id = msg.id.clone();
div![
C!["lg:mb-4"],
div![
if open {
render_open_header(&msg)
@ -771,13 +767,13 @@ fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool)
],
IF!(open =>
div![
C![],
C!["bg-white", "text-black", "p-4", "min-w-full", "w-0","overflow-x-auto"],
match &msg.body {
ShowThreadQueryThreadOnEmailThreadMessagesBody::UnhandledContentType(
ShowThreadQueryThreadOnEmailThreadMessagesBodyOnUnhandledContentType { contents ,content_tree},
) => div![
raw_text_message(&contents),
div![C!["NOTPORTED","error"],
div![C!["bg-red-500","p-4", "min-w-full", "w-0", "overflow-x-auto"],
view_content_tree(&content_tree),
]
],
@ -796,17 +792,25 @@ fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool)
content_tree,
},
) => div![
C!["NOTPORTED","view-part-text-html"],
C!["view-part-text-html"],
raw![contents],
IF!(!msg.attachments.is_empty() =>
IF!(!msg.attachments.is_empty() => render_attachements(&msg.attachments)),
view_content_tree(&content_tree),
],
}
])
]
}
fn render_attachements(
attachments: &[ShowThreadQueryThreadOnEmailThreadMessagesAttachments],
) -> Node<Msg> {
div![
C!["NOTPORTED","attachments"],
hr![],
h2!["NOTPORTED","Attachments"],
div![C!["NOTPORTED","grid","is-col-min-6"],
msg.attachments
.iter()
.map(|a| {
C!["border-t", "border-neutral-200", "mt-2", "pt-2"],
h2![C!["text-lg"], "Attachments"],
div![
C!["flex", "flex-wrap", "gap-2"],
attachments.iter().map(|a| {
let default = "UNKNOWN_FILE".to_string();
let filename = a.filename.as_ref().unwrap_or(&default);
let host = seed::window().location().host().expect("couldn't get host");
@ -816,43 +820,49 @@ fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool)
fmtr.with_scales(Scales::Binary());
div![
C!["NOTPORTED","attachment", "card"],
a.content_type.as_ref().map(|content_type|
IF!(content_type.starts_with("image/") =>
div![C!["NOTPORTED","card-image","is-1by1"],
div![
C!["NOTPORTED","image","is-1by1"],
style!{
St::BackgroundImage=>format!(r#"url("{url}");"#),
St::BackgroundSize=>"cover",
St::BackgroundPosition=>"center",
}
]
]
)),
div![C!["NOTPORTED","card-content"],
div![C!["NOTPORTED","content"],
&a.filename, br![],
small![ fmtr.format(a.size as f64),"B"]
]
C![
"flex",
"flex-col",
"flex-none",
"p-2",
"bg-neutral-200",
"border",
"border-neutral-400",
],
footer![
C!["NOTPORTED","card-footer"],
a![C!["NOTPORTED","card-footer-item"],span![C!["NOTPORTED","icon"], i![C!["NOTPORTED","fas", "fa-download"]]],
ev(Ev::Click, move |_| {
seed::window().location().set_href(&url
).expect("failed to set URL");
})
]
]
]
})
]
]),
view_content_tree(&content_tree),
],
}
a.content_type.as_ref().map(
|content_type| IF!(content_type.starts_with("image/") => img![
C!["w-32", "h-32", "md:w-64", "md:h-64", "object-cover"],
attrs!{At::Src=>url},
])
),
div![
C!["py-2", "flex", "flex-nowrap", "items-center"],
div![
C!["flex", "flex-col", "grow", "w-16", "md:w-32"],
span![C!["shrink", "truncate"], &a.filename],
span![C!["text-xs"], fmtr.format(a.size as f64), "B"]
],
a![
C![
"aspect-square",
"px-2",
"pt-1",
"bg-neutral-300",
"border",
"border-neutral-400"
],
span![i![C!["fas", "fa-download"]]],
ev(Ev::Click, move |_| {
seed::window()
.location()
.set_href(&url)
.expect("failed to set URL");
})
]
]
]
})
]
]
}
@ -862,8 +872,6 @@ fn thread(
open_messages: &HashSet<String>,
content_el: &ElRef<HtmlElement>,
) -> Node<Msg> {
// TODO remove and replace with CSS styling
let show_icon_text = true;
// TODO(wathiede): show per-message subject if it changes significantly from top-level subject
let subject = if thread.subject.is_empty() {
"(no subject)"
@ -890,68 +898,49 @@ fn thread(
let spam_add_thread_id = thread.thread_id.clone();
let spam_unread_thread_id = thread.thread_id.clone();
div![
C!["p-4"],
C!["lg:p-4"],
div![
C!["p-4", "lg:p-0"],
h3![C!["text-xl"], subject],
span![
C!["NOTPORTED", "tags"],
removable_tags_chiclet(&thread.thread_id, &tags, false)
],
span![removable_tags_chiclet(&thread.thread_id, &tags, false)],
div![
C!["NOTPORTED", "level", "is-mobile"],
C!["pt-4", "gap-2", "flex", "justify-around"],
div![
C!["NOTPORTED", "level-item"],
div![
C!["NOTPORTED", "buttons", "has-addons"],
button![
C!["NOTPORTED", "button", "mark-read"],
C![&tw_classes::BUTTON, "rounded-r-none"],
attrs! {At::Title => "Mark as read"},
span![
C!["NOTPORTED", "icon", "is-small"],
i![C!["NOTPORTED", "far", "fa-envelope-open"]]
],
IF!(show_icon_text=>span!["Read"]),
span![i![C!["far", "fa-envelope-open"]]],
span![C!["pl-2", "hidden", "md:inline"], "Read"],
ev(Ev::Click, move |_| Msg::MultiMsg(vec![
Msg::SetUnread(read_thread_id, false),
Msg::GoToSearchResults
])),
],
button![
C!["NOTPORTED", "button", "mark-unread"],
C![&tw_classes::BUTTON, "rounded-l-none"],
attrs! {At::Title => "Mark as unread"},
span![
C!["NOTPORTED", "icon", "is-small"],
i![C!["NOTPORTED", "far", "fa-envelope"]]
],
IF!(show_icon_text=>span!["Unread"]),
span![i![C!["far", "fa-envelope"]]],
span![C!["pl-2", "hidden", "md:inline"], "Unread"],
ev(Ev::Click, move |_| Msg::MultiMsg(vec![
Msg::SetUnread(unread_thread_id, true),
Msg::GoToSearchResults
])),
],
],
],
div![
C!["NOTPORTED", "level-item"],
div![
C!["NOTPORTED", "buttons", "has-addons"],
button![
C!["NOTPORTED", "button", "spam"],
div![button![
C![&tw_classes::BUTTON, "text-red-500"],
attrs! {At::Title => "Spam"},
span![
C!["NOTPORTED", "icon", "is-small"],
i![C!["NOTPORTED", "far", "fa-hand"]]
],
IF!(show_icon_text=>span!["Spam"]),
span![i![C!["far", "fa-hand"]]],
span![C!["pl-2", "hidden", "md:inline"], "Spam"],
ev(Ev::Click, move |_| Msg::MultiMsg(vec![
Msg::AddTag(spam_add_thread_id, "Spam".to_string()),
Msg::SetUnread(spam_unread_thread_id, false),
Msg::GoToSearchResults
])),
]]
],
],
],
],
div![el_ref(content_el), messages, click_to_top()],
div![C!["lg:mt-4"], el_ref(content_el), messages, click_to_top()],
/* TODO(wathiede): plumb in orignal id
a![
attrs! {At::Href=>api::original(&thread_node.0.as_ref().expect("message missing").id)},
@ -998,7 +987,7 @@ fn view_header(
};
let query = Url::decode_uri_component(query).unwrap_or("".to_string());
nav![
C!["flex", "p-4"],
C!["flex", "px-4", "pt-4"],
a![
C![IF![is_error => "bg-red-500"], "rounded-r-none"],
C![&tw_classes::BUTTON],
@ -1081,7 +1070,7 @@ pub fn tags(model: &Model) -> Node<Msg> {
"self-center",
"justify-self-end",
"text-sm",
"text-gray-400"
"text-neutral-400"
],
IF!(t.unread>0 => format!("{}", t.unread))
],
@ -1305,7 +1294,7 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
div![
C!["px-4", "mr-auto"],
div![
span![C!["font-semibold", "text-sm"], from,],
span![C!["font-semibold", "text-sm"], from],
div![
C!["text-xs"],
small![a![
@ -1341,15 +1330,23 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
}
fn reading_progress(ratio: f64) -> Node<Msg> {
let percent = ratio * 100.;
// TODO: percent broken with no styles
info!("percent {percent}");
progress![
C!["absolute", "w-screen", IF!(percent<1. => "hidden")],
attrs! {
At::Value=>percent,
At::Max=>"100"
},
format!("{percent}%")
div![
C![
"fixed",
"top-0",
"left-0",
"w-screen",
"h-1",
"bg-gray-200",
IF!(percent<1. => "hidden")
],
div![
C!["h-1", "bg-green-500"],
style! {
St::Width => format!("{}%", percent)
}
]
]
}
pub fn versions(versions: &crate::state::Version) -> Node<Msg> {
@ -1372,12 +1369,9 @@ pub fn versions(versions: &crate::state::Version) -> Node<Msg> {
fn click_to_top() -> Node<Msg> {
button![
C!["NOTPORTED", "button", "is-danger", "is-small"],
C![&tw_classes::BUTTON, "bg-red-500", "lg:m-0", "m-4"],
span!["Top"],
span![
C!["NOTPORTED", "icon"],
i![C!["NOTPORTED", "fas", "fa-arrow-turn-up"]]
],
span![i![C!["fas", "fa-arrow-turn-up"]]],
ev(Ev::Click, |_| web_sys::window()
.unwrap()
.scroll_to_with_x_and_y(0., 0.))