From 4f21814be0a76069890313a1c43a2423e5bfd817 Mon Sep 17 00:00:00 2001 From: Bill Thiede Date: Sun, 29 Sep 2024 17:15:28 -0700 Subject: [PATCH] web: successfully rewrite some bits in tailwind --- web/index.html | 10 +- web/src/view/mod.rs | 328 +++++++++++++++++--------------------------- 2 files changed, 128 insertions(+), 210 deletions(-) diff --git a/web/index.html b/web/index.html index 24460e1..5772e5e 100644 --- a/web/index.html +++ b/web/index.html @@ -4,20 +4,16 @@ - - + + + - - diff --git a/web/src/view/mod.rs b/web/src/view/mod.rs index bc2bb75..0367ee6 100644 --- a/web/src/view/mod.rs +++ b/web/src/view/mod.rs @@ -433,7 +433,7 @@ fn render_avatar(avatar: Option, from: &str) -> Node { style! { St::Display => "block", St::FontFamily => "Poppins", - St::FontSize => pt(32), + St::FontSize => pt(28), }, g![ rect![attrs! { @@ -451,7 +451,6 @@ fn render_avatar(avatar: Option, from: &str) -> Node { text![ attrs! { At::Fill => "white", - At::X => percent(50), At::Y => percent(50), At::DominantBaseline => "middle", @@ -491,168 +490,84 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node< let id = msg.id.clone(); let is_unread = has_unread(&msg.tags); let img = render_avatar(avatar, &from); - div![ - figure![ - C!["flex"], - div![C!["w-16", "h-16", "mx-auto", "h-auto"], &img], - div![ - C!["px-4"], - &from, - " ", - from_detail.as_ref().map(|text| copy_text_widget(&text)), - IF!(!msg.to.is_empty() =>div![ - "To: ", - msg.to.iter().map(|to| { - let ShowThreadQueryThreadOnEmailThreadMessagesTo { name, addr } = to; - span![ - C!["text-nowrap"], - &name, - " ", - span![ - i![C!["far", "fa-clone"]], - addr.clone().map(|addr| ev(Ev::Click, move |e| { - e.stop_propagation(); - Msg::CopyToClipboard(addr) - })) - ], - " " - ] - })]), - IF!(!msg.cc.is_empty() =>div![ - "CC: ", - msg.cc.iter().map(|cc| { - let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc; - span![ - C!["text-nowrap"], - &name, - " ", - span![ - i![C!["far", "fa-clone"]], - addr.clone().map(|addr| ev(Ev::Click, move |e| { - e.stop_propagation(); - Msg::CopyToClipboard(addr) - })) - ], - " " - ] - })]), - msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]), + div![figure![ + C!["flex"], + div![C!["w-16", "h-16", "mx-auto", "h-auto"], &img], + div![ + C!["px-4"], + span![C!["font-semibold"], &from], + " ", + from_detail.as_ref().map(|text| copy_text_widget(&text)), + IF!(!msg.to.is_empty() =>div![ + C!["text-xs"], span![ - C!["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!["font-semibold"], + "To: " + ], + span![ + msg.to.iter().map(|to| { + let ShowThreadQueryThreadOnEmailThreadMessagesTo { name, addr } = to; + span![ + &name, + " ", + span![ + i![C!["far", "fa-clone"]], + addr.clone().map(|addr| ev(Ev::Click, move |e| { + e.stop_propagation(); + Msg::CopyToClipboard(addr) + })) + ], + " " + ] + }) ] - ] - ], - hr![], - article![ - C!["media"], - figure![C!["media-left"], p![C!["image", "is-64x64"], img]], - div![ - C!["media-content"], - div![ - C!["content"], - p![ - //C!["text-nowrap"], - strong![from], - " ", - from_detail.map(|text| copy_text_widget(&text)), - table![ - IF!(!msg.to.is_empty() => - tr![ - td![ "To:" ], - //td![ if i==0 { "To" }else { "" } ], - td![ - msg.to.iter().map(|to| - small![ - " ", - { - let ShowThreadQueryThreadOnEmailThreadMessagesTo{name, addr} = to; - span![ - //C!["text-nowrap"], - &name, " ", - span![ - i![C!["far", "fa-clone"]], - addr.clone().map(|addr| ev(Ev::Click, - move |e| { - e.stop_propagation(); - Msg::CopyToClipboard(addr) - } - )) - ] - ] - } - ]) - ] - ]), - IF!(!msg.cc.is_empty() => - tr![ - td![ "CC:" ], - td![ - msg.cc.iter().map(|cc| - small![ - " ", - { - let ShowThreadQueryThreadOnEmailThreadMessagesCc{name, addr} = cc; - span![ - //C!["text-nowrap"], - &name, " ", - span![ - i![C!["far", "fa-clone"]], - addr.clone().map(|addr| ev(Ev::Click, - move |e| { - e.stop_propagation(); - Msg::CopyToClipboard(addr) - } - )) - ] - ] - } - ]) - ] - ]), - tr![td![ - attrs! {At::ColSpan=>2}, - msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]) - ]] - ], - ], - ], - ], - div![ - C!["media-right"], + ]), + IF!(!msg.cc.is_empty() =>div![ + C!["text-xs"], span![ - C!["read-status"], - i![C![ - "far", - if is_unread { - "fa-envelope" - } else { - "fa-envelope-open" - }, - ]] + C!["font-semibold"], + "CC: " ], + span![ + msg.cc.iter().map(|cc| { + let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc; + span![ + &name, + " ", + span![ + i![C!["far", "fa-clone"]], + addr.clone().map(|addr| ev(Ev::Click, move |e| { + e.stop_propagation(); + Msg::CopyToClipboard(addr) + })) + ], + " " + ] + }) + ] + ]), + 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) }) - ] + } ] - ] + ],] } fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node { @@ -671,62 +586,69 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod let id = msg.id.clone(); let is_unread = has_unread(&msg.tags); let img = render_avatar(avatar, &from); - article![ - C!["media"], - figure![C!["media-left"], p![C!["image", "is-64x64"], img]], + div![figure![ + C!["flex"], + div![C!["w-16", "h-16", "mx-auto", "h-auto"], &img], div![ - C!["media-content"], - div![ - C!["content"], - p![ - strong![from], - br![], - IF!(!msg.to.is_empty() => - nodes![ - small![" to "], - msg.to.iter().enumerate().map(|(i, to)| small![ - if i > 0 { ", " } else { "" }, - to.name() - .as_ref() - .unwrap_or(&to.addr().unwrap_or("(UNKNOWN)")) - ]).collect::>() - ]), - IF!(!msg.cc.is_empty() => - nodes![ - small![" cc "], - msg.cc.iter().enumerate().map(|(i, cc)| small![ - if i > 0 { ", " } else { "" }, - cc.name() - .as_ref() - .unwrap_or(&cc.addr().unwrap_or("(UNKNOWN)")) - ]).collect::>() - ]), - br![], - msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]), + C!["px-4"], + span![C!["font-semibold"], &from], + " ", + IF!(!msg.to.is_empty() =>div![ + C!["text-xs"], + span![ + C!["font-semibold"], + "To: " ], - ], + span![ + msg.to.iter().enumerate().map(|(i, to)| { + let ShowThreadQueryThreadOnEmailThreadMessagesTo { name, addr } = to; + span![ + if i > 0 { ", " } else { "" }, + &name, + ] + }) + ] + ]), + IF!(!msg.cc.is_empty() =>div![ + C!["text-xs"], + span![ + C!["font-semibold"], + "CC: " + ], + span![ + msg.cc.iter().enumerate().map(|(i, cc)| { + let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc; + span![ + if i > 0 { ", " } else { "" }, + &name, + ] + }) + ] + ]), + msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]), ], - div![ - C!["media-right"], - span![ - C!["read-status"], - i![ - C![ - "far", - if is_unread { - "fa-envelope" - } else { - "fa-envelope-open" - }, - ], + div![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) }) - ] + } ] - ] - ] + ]] + ],] } fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) -> Node {