web: change up spacing in email headers. Increase density

web/src/view/mod.rs

@@ -375,7 +375,35 @@ fn has_unread(tags: &[String]) -> bool {
     tags.contains(&String::from("unread"))
 }
 
-fn render_avatar(avatar: Option<String>, from: &str) -> Node<Msg> {
+fn render_avatar(avatar: Option<String>, from: &str, big: bool) -> Node<Msg> {
+    let initials: String = from
+        .to_lowercase()
+        .trim()
+        .split(" ")
+        .map(|word| word.chars().next().unwrap())
+        .filter(|c| c.is_alphanumeric())
+        // Limit to 2 characters because more characters don't fit in the box
+        .take(2)
+        .collect();
+    let from_color = compute_color(from);
+    let size = if big {
+        C!["w-16", "h-16", "text-5xl"]
+    } else {
+        C!["w-8", "h-8", "text-xl"]
+    };
+    div![
+        C![
+            "font-extrabold",
+            "grid",
+            "place-content-center",
+            "uppercase"
+        ],
+        size,
+        style! {St::BackgroundColor=>from_color},
+        span![initials]
+    ]
+}
+fn render_svg_avatar(avatar: Option<String>, from: &str) -> Node<Msg> {
     let initials: String = from
         .to_lowercase()
         .trim()
@@ -456,14 +484,14 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
     //let avatar: Option<String> = Some(String::from("https://bulma.io/images/placeholders/64x64.png"));
     let id = msg.id.clone();
     let is_unread = has_unread(&msg.tags);
-    let img = render_avatar(avatar, &from);
+    let avatar = render_avatar(avatar, &from, true);
     let unknown = "UNKNOWN".to_string();
     div![figure![
         C!["flex"],
-        div![C!["w-16", "h-16", "h-auto"], &img],
+        div![avatar],
         div![
             C!["px-4", "mr-auto"],
-            span![C!["font-semibold"], &from],
+            span![C!["font-semibold", "text-sm"], &from],
             " ",
             from_detail.as_ref().map(|text| copy_text_widget(&text)),
             IF!(!msg.to.is_empty() =>div![
@@ -514,11 +542,14 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
                     })
                 ]
             ]),
-            msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]),
         ],
         span![
-            C!["m-4", "read-status"],
+            C!["text-right"],
+            msg.timestamp
+                .map(|ts| div![C!["text-xs", "text-nowrap"], human_age(ts)]),
             i![C![
+                "mx-4",
+                "read-status",
                 "far",
                 if is_unread {
                     "fa-envelope"
@@ -526,14 +557,10 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
                     "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)
-                })
+            }),
-            }
         ]
     ]]
 }
@@ -553,16 +580,16 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
     //let avatar: Option<String> = Some(String::from("https://bulma.io/images/placeholders/64x64.png"));
     let id = msg.id.clone();
     let is_unread = has_unread(&msg.tags);
-    let img = render_avatar(avatar, &from);
+    let avatar = render_avatar(avatar, &from, false);
     let unknown = "UNKNOWN".to_string();
     div![figure![
         C!["flex"],
-        div![C!["w-16", "h-16", "h-auto"], &img],
+        div![avatar],
         div![
             C!["px-4", "mr-auto"],
-            span![C!["font-semibold"], &from],
+            div![C!["font-semibold", "text-sm"], &from],
             " ",
-            IF!(!msg.to.is_empty() =>div![
+            IF!(!msg.to.is_empty() => span![
                 C!["text-xs"],
                 span![
                     C!["font-semibold"],
@@ -576,9 +603,10 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
                             name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown))
                         ]
                     })
-                ]
+                ],
+                " "
             ]),
-            IF!(!msg.cc.is_empty() =>div![
+            IF!(!msg.cc.is_empty() => span![
                 C!["text-xs"],
                 span![
                     C!["font-semibold"],
@@ -593,29 +621,26 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
                         ]
                     })
                 ]
-            ]),
+            ])
-            msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]),
         ],
         span![
-            C!["m-4", "read-status"],
+            C!["text-right"],
-            i![
+            msg.timestamp
-                C![
+                .map(|ts| div![C!["text-xs", "text-nowrap"], human_age(ts)]),
+            i![C![
+                "mx-4",
+                "read-status",
                 "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)
-                    })
+            }),
-                }
-            ]
         ]
     ]]
 }
@@ -1075,7 +1100,7 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
     //let avatar: Option<String> = Some(String::from("https://bulma.io/images/placeholders/64x64.png"));
     let id = post.thread_id.clone();
     let is_unread = !post.is_read;
-    let img = render_avatar(avatar, &from);
+    let img = render_avatar(avatar, &from, true);
     article![
         C!["media"],
         figure![C!["media-left"], p![C!["image", "is-64x64"], img]],