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 {