diff --git a/web/src/view/mod.rs b/web/src/view/mod.rs index ea0ba6c..73e0708 100644 --- a/web/src/view/mod.rs +++ b/web/src/view/mod.rs @@ -20,7 +20,23 @@ use crate::{ // format!() calls all over with magic strings representing notmuch specific syntax. const MAX_RAW_MESSAGE_SIZE: usize = 100_000; -mod styles { +mod tw_classes { + pub const TAG: &[&str] = &[ + "rounded-md", + "px-2", + "py-1", + "text-xs", + "[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]", + ]; + pub const TAG_X: &[&str] = &[ + "rounded-r", + "bg-slate-800", + "px-2", + "py-1", + "mr-1", + "text-xs", + "[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]", + ]; pub const BUTTON: &[&str] = &[ "bg-slate-900", "rounded-md", @@ -122,7 +138,7 @@ fn search_results( div![ C!["flex", "items-center", "mr-4"], input![ - C![&styles::CHECKBOX], + C![&tw_classes::CHECKBOX], attrs! { At::Type=>"checkbox", At::Checked=>selected_threads.contains(&tid).as_at_value(), @@ -178,20 +194,15 @@ fn tags_chiclet(tags: &[String], is_mobile: bool) -> impl Iteratorhex}; - let classes = C![ - "rounded-md", - "px-2", - "py-1", - "mr-1", - "text-xs", - "[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]", - ]; let tag = tag.clone(); - a![match tag.as_str() { - "attachment" => span![classes, style, "📎"], - "replied" => span![classes, style, i![C!["fa-solid", "fa-reply"]]], - _ => span![classes, style, &tag], - },] + a![ + C!["mr-1"], + match tag.as_str() { + "attachment" => span![C![&tw_classes::TAG], style, "📎"], + "replied" => span![C![&tw_classes::TAG], style, i![C!["fa-solid", "fa-reply"]]], + _ => span![C![&tw_classes::TAG], style, &tag], + } + ] }) } @@ -201,47 +212,38 @@ fn removable_tags_chiclet<'a>( is_mobile: bool, ) -> Node { div![ - C![ - "message-tags", - "field", - "is-grouped", - "is-grouped-multiline" - ], + C!["flex"], tags.iter().map(move |tag| { let thread_id = thread_id.to_string(); let hex = compute_color(tag); let style = style! {St::BackgroundColor=>hex}; - let classes = C!["NOTPORTED", "tag", IF!(is_mobile => "is-small")]; let attrs = attrs! { At::Href => urls::search(&format!("tag:{tag}"), 0) }; let tag = tag.clone(); let rm_tag = tag.clone(); div![ - C!["NOTPORTED", "control"], - div![ - C!["NOTPORTED", "tags", "has-addons"], - a![ - classes, - attrs, - style, - match tag.as_str() { - "attachment" => span!["📎"], - "replied" => span![i![C!["NOTPORTED", "fa-solid", "fa-reply"]]], - _ => span![&tag], - }, - ev(Ev::Click, move |_| Msg::FrontPageRequest { - query: format!("tag:{tag}"), - after: None, - before: None, - first: None, - last: None, - }) - ], - a![ - C!["NOTPORTED", "tag", "is-delete"], - ev(Ev::Click, move |_| Msg::RemoveTag(thread_id, rm_tag)) - ] + a![ + C![&tw_classes::TAG, "rounded-r-none"], + attrs, + style, + match tag.as_str() { + "attachment" => span!["📎"], + "replied" => span![i![C!["fa-solid", "fa-reply"]]], + _ => span![&tag], + }, + ev(Ev::Click, move |_| Msg::FrontPageRequest { + query: format!("tag:{tag}"), + after: None, + before: None, + first: None, + last: None, + }) + ], + a![ + C![&tw_classes::TAG_X], + span![i![C!["fa-solid", "fa-xmark"]]], + ev(Ev::Click, move |_| Msg::RemoveTag(thread_id, rm_tag)) ] ] }) @@ -439,14 +441,14 @@ fn search_toolbar( div![ div![ button![ - C![&styles::BUTTON, "rounded-r-none"], + C![&tw_classes::BUTTON, "rounded-r-none"], attrs!{At::Title => "Mark as read"}, span![i![C!["far", "fa-envelope-open"]]], span![C!["pl-2", "hidden", "md:inline"], "Read"], ev(Ev::Click, |_| Msg::SelectionMarkAsRead) ], button![ - C![&styles::BUTTON, "rounded-l-none"], + C![&tw_classes::BUTTON, "rounded-l-none"], attrs!{At::Title => "Mark as unread"}, span![i![C!["far", "fa-envelope"]]], span![C!["pl-2", "hidden", "md:inline"], "Unread"], @@ -458,7 +460,7 @@ fn search_toolbar( div![ div![ button![ - C![&styles::BUTTON, "text-red-500"], + C![&tw_classes::BUTTON, "text-red-500"], attrs!{At::Title => "Mark as spam"}, span![i![C!["far", "fa-hand"]]], span![C!["pl-2", "hidden", "md:inline"], "Spam"], @@ -476,13 +478,13 @@ fn search_toolbar( C!["flex", "gap-2", "items-center"], p![format!("{count} results")], button![ - C![&styles::BUTTON], + C![&tw_classes::BUTTON], IF!(!pager.has_previous_page => attrs!{ At::Disabled=>true }), "<", IF!(pager.has_previous_page => ev(Ev::Click, |_| Msg::PreviousPage)), ], button![ - C![&styles::BUTTON], + C![&tw_classes::BUTTON], IF!(!pager.has_next_page => attrs!{ At::Disabled=>true }), ">", IF!(pager.has_next_page => ev(Ev::Click, |_| Msg::NextPage)) @@ -752,9 +754,7 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) -> Node { let expand_id = msg.id.clone(); div![ - C!["NOTPORTED", "message", "bg-grey-900"], div![ - C!["NOTPORTED", "header"], if open { render_open_header(&msg) } else { @@ -771,7 +771,7 @@ fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) ], IF!(open => div![ - C!["NOTPORTED","body", "mail"], + C![], match &msg.body { ShowThreadQueryThreadOnEmailThreadMessagesBody::UnhandledContentType( ShowThreadQueryThreadOnEmailThreadMessagesBodyOnUnhandledContentType { contents ,content_tree}, @@ -890,8 +890,8 @@ fn thread( let spam_add_thread_id = thread.thread_id.clone(); let spam_unread_thread_id = thread.thread_id.clone(); div![ - C!["NOTPORTED", "thread"], - h3![C!["NOTPORTED", "is-size-5"], subject], + C!["p-4"], + h3![C!["text-xl"], subject], span![ C!["NOTPORTED", "tags"], removable_tags_chiclet(&thread.thread_id, &tags, false) @@ -1001,7 +1001,7 @@ fn view_header( C!["flex", "p-4"], a![ C![IF![is_error => "bg-red-500"], "rounded-r-none"], - C![&styles::BUTTON], + C![&tw_classes::BUTTON], span![i![C![ "fa-solid", "fa-arrow-rotate-right", @@ -1010,7 +1010,7 @@ fn view_header( ev(Ev::Click, |_| Msg::RefreshStart), ], a![ - C![&styles::BUTTON], + C![&tw_classes::BUTTON], C!["px-4", "rounded-none"], attrs! { At::Href => urls::search(unread_query(), 0) @@ -1018,7 +1018,7 @@ fn view_header( "Unread", ], a![ - C![&styles::BUTTON], + C![&tw_classes::BUTTON], C!["px-4", "rounded-none"], attrs! { At::Href => urls::search("", 0)