wathiede/letterbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Releases Wiki Activity

web: update stylings for removable tag chiclets

Browse Source
This commit is contained in:
Bill Thiede 2025-01-26 14:02:39 -08:00
parent 44b60d5070
commit 87321fb669
1 changed files with 59 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
web/src/view/mod.rs
View File

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