From 3f268415e9a19ad9427393e9c4e6b426e740fe3a Mon Sep 17 00:00:00 2001 From: Bill Thiede Date: Thu, 22 Feb 2024 18:54:34 -0800 Subject: [PATCH] web: rework header in thread view, tweak some styles, remove some logging --- web/index.html | 16 +++-- web/src/state.rs | 5 -- web/src/view/mod.rs | 152 +++++++++++++++++++------------------------- 3 files changed, 79 insertions(+), 94 deletions(-) diff --git a/web/index.html b/web/index.html index cb17602..fc234de 100644 --- a/web/index.html +++ b/web/index.html @@ -38,11 +38,11 @@ .body { background: white; color: black; - margin-left: -0.5em; - margin-right: -0.5em; margin-top: 0.5em; + padding: 1em; width: 0; min-width: 100%; + overflow-wrap: break-word; } .error { @@ -146,11 +146,19 @@ color: #555; } - .mobile .search-results, - .mobile .thread { + .mobile .search-results { padding: 1em; } + .mobile .thread h3 { + padding: 1em 1em 0; + overflow-wrap: break-word; + } + + .mobile .thread .tags { + padding: 0 1em; + } + .search-results .row { display: flex; flex-direction: row; diff --git a/web/src/state.rs b/web/src/state.rs index 98bc3ce..6a5b908 100644 --- a/web/src/state.rs +++ b/web/src/state.rs @@ -180,7 +180,6 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders) { first, last, } => { - info!("making FrontPageRequest: {query} after:{after:?} before:{before:?} first:{first:?} last:{last:?}"); model.query = query.clone(); orders.skip().perform_cmd(async move { Msg::FrontPageResult( @@ -336,7 +335,6 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders) { } = &mut model.context { selected_threads.insert(tid); - info!("selected threads {selected_threads:?}"); } } Msg::SelectionRemoveThread(tid) => { @@ -345,19 +343,16 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders) { } = &mut model.context { selected_threads.remove(&tid); - info!("selected threads {selected_threads:?}"); } } Msg::MessageCollapse(id) => { if let Context::ThreadResult { open_messages, .. } = &mut model.context { open_messages.remove(&id); - info!("open_messages threads {open_messages:?}"); } } Msg::MessageExpand(id) => { if let Context::ThreadResult { open_messages, .. } = &mut model.context { open_messages.insert(id); - info!("open_messages threads {open_messages:?}"); } } } diff --git a/web/src/view/mod.rs b/web/src/view/mod.rs index cd2aa6a..0dd8f6b 100644 --- a/web/src/view/mod.rs +++ b/web/src/view/mod.rs @@ -5,7 +5,7 @@ use std::{ use chrono::{DateTime, Datelike, Duration, Local, Utc}; use itertools::Itertools; -use log::error; +use log::{error, info}; use seed::{prelude::*, *}; use seed_hooks::{state_access::CloneState, topo, use_state}; use wasm_timer::Instant; @@ -351,90 +351,75 @@ fn has_unread(tags: &[String]) -> bool { tags.contains(&String::from("unread")) } -fn read_message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node { +fn message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node { let id = msg.id.clone(); let expand_id = msg.id.clone(); let is_unread = has_unread(&msg.tags); div![ C!["message"], - div![ - C!["headers"], - span![ - C!["read-status"], - i![ - style! { - St::Color => "gold" - }, - C![ - "far", - if is_unread { - "fa-envelope" - } else { - "fa-envelope-open" - }, - ], - ev(Ev::Click, move |e| { - e.stop_propagation(); - Msg::SetUnread(format!("id:{id}"), !is_unread) - }), + article![ + C!["media"], + figure![ + C!["media-left"], + p![ + C!["image", "is-64x64"], + img![attrs! {At::Src=>"https://bulma.io/images/placeholders/128x128.png"}], ], ], - " ", - msg.from - .as_ref() - .map(|from| span![C!["header"], view_address(&from)]), - " ", - msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]), - // TODO(wathiede): add first line of message body - ], - ev(Ev::Click, move |e| { - e.stop_propagation(); - if open { - Msg::MessageCollapse(expand_id) - } else { - Msg::MessageExpand(expand_id) - } - }), - ] -} -fn unread_message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node { - let id = msg.id.clone(); - let expand_id = msg.id.clone(); - let is_unread = has_unread(&msg.tags); - div![ - C!["message"], - div![ - C!["headers"], - span![ - C!["read-status"], - i![ - style! { - St::Color => "gold" - }, - C![ - "far", - if is_unread { - "fa-envelope" - } else { - "fa-envelope-open" - }, - ], - ev(Ev::Click, move |e| { - e.stop_propagation(); - Msg::SetUnread(format!("id:{id}"), !is_unread) - }), - ], - ], - msg.from - .as_ref() - .map(|from| div![C!["header"], "From: ", view_address(&from)]), - msg.timestamp - .map(|ts| div![C!["header"], "Date: ", human_age(ts)]), - div![C!["header"], "Message-ID: ", &msg.id], div![ - C!["header"], - IF!(!msg.to.is_empty() => span!["To: ", view_addresses(&msg.to)]), - IF!(!msg.cc.is_empty() => span!["CC: ", view_addresses(&msg.cc)]) + C!["media-content"], + div![ + C!["content"], + p![ + msg.from.as_ref().map(|from| strong![from + .name() + .as_ref() + .unwrap_or(&from.addr().unwrap_or("(UNKNOWN)"))]), + 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)]), + ], + ], + ], + div![ + C!["media-right"], + span![ + C!["read-status"], + i![ + C![ + "far", + if is_unread { + "fa-envelope" + } else { + "fa-envelope-open" + }, + ], + ev(Ev::Click, move |e| { + e.stop_propagation(); + Msg::SetUnread(format!("id:{id}"), !is_unread) + }), + ], + ], ], ev(Ev::Click, move |e| { e.stop_propagation(); @@ -445,6 +430,7 @@ fn unread_message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Nod } }), ], + IF!(open => div![ C!["body"], match &msg.body { @@ -480,7 +466,7 @@ fn unread_message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Nod view_content_tree(&content_tree), ], } - ], + ]) ] } @@ -500,18 +486,14 @@ fn thread(thread: &ShowThreadQueryThread, open_messages: &HashSet) -> No tags.sort(); let messages = thread.messages.iter().map(|msg| { let open = open_messages.contains(&msg.id); - if open { - unread_message_render(&msg, open) - } else { - read_message_render(&msg, open) - } + message_render(&msg, open) }); let read_thread_id = thread.thread_id.clone(); let unread_thread_id = thread.thread_id.clone(); div![ C!["thread"], - h3![C!["is-size-5"], &thread.subject,], - tags_chiclet(&tags, false), + h3![C!["is-size-5"], &thread.subject], + span![C!["tags"], tags_chiclet(&tags, false)], span![ C!["level-item", "buttons", "has-addons"], button![