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.
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 Iterator<Item = Node<M
tags.iter().map(move |tag| {
let hex = compute_color(tag);
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();
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,33 +212,24 @@ fn removable_tags_chiclet<'a>(
is_mobile: bool,
) -> Node<Msg> {
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,
C![&tw_classes::TAG, "rounded-r-none"],
attrs,
style,
match tag.as_str() {
"attachment" => span!["📎"],
"replied" => span![i![C!["NOTPORTED", "fa-solid", "fa-reply"]]],
"replied" => span![i![C!["fa-solid", "fa-reply"]]],
_ => span![&tag],
},
ev(Ev::Click, move |_| Msg::FrontPageRequest {
@ -239,11 +241,11 @@ fn removable_tags_chiclet<'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))
]
]
]
})
]
}
@ -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<Msg> {
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)