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

web: enable properly styled buttons

Browse Source
This commit is contained in:
Bill Thiede 2025-02-25 10:26:16 -08:00
parent e4eb495a70
commit 3c72929a4f
1 changed files with 55 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,8 @@ use crate::{
const MAX_RAW_MESSAGE_SIZE: usize = 100_000; const MAX_RAW_MESSAGE_SIZE: usize = 100_000;
mod tw_classes { mod tw_classes {
use seed::{prelude::*, *};
pub const TAG: &[&str] = &[ pub const TAG: &[&str] = &[
"rounded-md", "rounded-md",
"px-2", "px-2",
@ -37,22 +39,30 @@ mod tw_classes {
"text-xs", "text-xs",
"[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]", "[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]",
]; ];
pub const BUTTON: &[&str] = &[
"bg-neutral-900", // TODO: should this be a builder pattern?
"rounded-md", pub fn button() -> seed::Attrs {
"p-2", button_with_color("bg-neutral-900", "hover:bg-neutral-700")
"border", }
"border-neutral-700",
"text-center", pub fn button_with_color<T: ToClasses>(bg: T, hover: T) -> seed::Attrs {
"text-sm", C![
"transition-all", "rounded-md",
"shadow-md", "p-2",
"hover:shadow-lg", "border",
"hover:bg-neutral-700", "border-neutral-700",
"disabled:pointer-events-none", "text-center",
"disabled:opacity-50", "text-sm",
"disabled:shadow-none", "transition-all",
]; "shadow-md",
"hover:shadow-lg",
"disabled:pointer-events-none",
"disabled:opacity-50",
"disabled:shadow-none",
bg,
hover,
]
}
pub const CHECKBOX: &[&str] = &[ pub const CHECKBOX: &[&str] = &[
"w-8", "w-8",
@ -216,13 +226,13 @@ fn catchup_view(
"bg-black", "bg-black",
], ],
button![ button![
C![&tw_classes::BUTTON], tw_classes::button(),
span![i![C!["far", "fa-envelope"]]], span![i![C!["far", "fa-envelope"]]],
span![C!["pl-2"], "Keep unread"], span![C!["pl-2"], "Keep unread"],
ev(Ev::Click, move |_| Msg::CatchupKeepUnread) ev(Ev::Click, move |_| Msg::CatchupKeepUnread)
], ],
button![ button![
C![&tw_classes::BUTTON, "bg-green-500"], tw_classes::button_with_color("bg-green-800", "hover:bg-neutral-700"),
span![i![C!["far", "fa-envelope-open"]]], span![i![C!["far", "fa-envelope-open"]]],
span![C!["pl-2"], "Mark as read"], span![C!["pl-2"], "Mark as read"],
ev(Ev::Click, move |_| Msg::CatchupMarkAsRead) ev(Ev::Click, move |_| Msg::CatchupMarkAsRead)
@ -447,7 +457,7 @@ fn search_toolbar(
div![ div![
C!["gap-2", "flex", IF!(show_bulk_edit => "hidden")], C!["gap-2", "flex", IF!(show_bulk_edit => "hidden")],
div![button![ div![button![
C![&tw_classes::BUTTON], tw_classes::button(),
attrs! {At::Title => "Mark as read"}, attrs! {At::Title => "Mark as read"},
span![i![C!["far", "fa-eye"]]], span![i![C!["far", "fa-eye"]]],
span![C!["pl-2", "hidden", "md:inline"], "Catch-up"], span![C!["pl-2", "hidden", "md:inline"], "Catch-up"],
@ -476,14 +486,16 @@ fn search_toolbar(
], ],
div![ div![
button![ button![
C![&tw_classes::BUTTON, "rounded-r-none"], tw_classes::button(),
C!["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![&tw_classes::BUTTON, "rounded-l-none"], tw_classes::button(),
C!["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"],
@ -491,7 +503,8 @@ fn search_toolbar(
] ]
], ],
div![button![ div![button![
C![&tw_classes::BUTTON, "text-red-500"], tw_classes::button(),
C!["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"],
@ -505,13 +518,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![&tw_classes::BUTTON], 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![&tw_classes::BUTTON], 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))
@ -1076,7 +1089,8 @@ fn thread(
C!["pt-4", "gap-2", "flex", "justify-around"], C!["pt-4", "gap-2", "flex", "justify-around"],
div![ div![
button![ button![
C![&tw_classes::BUTTON, "rounded-r-none"], tw_classes::button(),
C!["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"], "Read"], span![C!["pl-2"], "Read"],
@ -1086,7 +1100,8 @@ fn thread(
])), ])),
], ],
button![ button![
C![&tw_classes::BUTTON, "rounded-l-none"], tw_classes::button(),
C!["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"], "Unread"], span![C!["pl-2"], "Unread"],
@ -1097,7 +1112,8 @@ fn thread(
], ],
], ],
div![button![ div![button![
C![&tw_classes::BUTTON, "text-red-500"], tw_classes::button(),
C!["text-red-500"],
attrs! {At::Title => "Spam"}, attrs! {At::Title => "Spam"},
span![i![C!["far", "fa-hand"]]], span![i![C!["far", "fa-hand"]]],
span![C!["pl-2"], "Spam"], span![C!["pl-2"], "Spam"],
@ -1163,7 +1179,7 @@ fn view_header(
C!["flex", "px-4", "pt-4", "overflow-hidden"], C!["flex", "px-4", "pt-4", "overflow-hidden"],
a![ a![
C![IF![is_error => "bg-red-500"], "rounded-r-none"], C![IF![is_error => "bg-red-500"], "rounded-r-none"],
C![&tw_classes::BUTTON], tw_classes::button(),
span![i![C![ span![i![C![
"fa-solid", "fa-solid",
"fa-arrow-rotate-right", "fa-arrow-rotate-right",
@ -1172,7 +1188,7 @@ fn view_header(
ev(Ev::Click, |_| Msg::RefreshStart), ev(Ev::Click, |_| Msg::RefreshStart),
], ],
a![ a![
C![&tw_classes::BUTTON], 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)
@ -1180,7 +1196,7 @@ fn view_header(
"Unread", "Unread",
], ],
a![ a![
C![&tw_classes::BUTTON], 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)
@ -1367,7 +1383,8 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, content_el: &ElRef<HtmlElem
C!["pt-4", "gap-2", "flex", "justify-around"], C!["pt-4", "gap-2", "flex", "justify-around"],
div![ div![
button![ button![
C![&tw_classes::BUTTON, "rounded-r-none"], tw_classes::button(),
C!["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"], "Read"], span![C!["pl-2"], "Read"],
@ -1377,7 +1394,8 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, content_el: &ElRef<HtmlElem
])), ])),
], ],
button![ button![
C![&tw_classes::BUTTON, "rounded-l-none"], tw_classes::button(),
C!["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"], "Unread"], span![C!["pl-2"], "Unread"],
@ -1452,7 +1470,7 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
div![ div![
C!["flex", "gap-2", "pt-2", "text-sm"], C!["flex", "gap-2", "pt-2", "text-sm"],
a![ a![
C![&tw_classes::BUTTON], tw_classes::button(),
attrs! { attrs! {
At::Href => post.url, At::Href => post.url,
At::Target => "_blank", At::Target => "_blank",
@ -1461,7 +1479,7 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
i![C!["fas", "fa-up-right-from-square"]], i![C!["fas", "fa-up-right-from-square"]],
], ],
a![ a![
C![&tw_classes::BUTTON], tw_classes::button(),
attrs! { attrs! {
At::Href => add_archive_url, At::Href => add_archive_url,
At::Target => "_blank", At::Target => "_blank",
@ -1470,7 +1488,7 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
i![C!["fas", "fa-plus"]], i![C!["fas", "fa-plus"]],
], ],
a![ a![
C![&tw_classes::BUTTON], tw_classes::button(),
attrs! { attrs! {
At::Href => view_archive_url, At::Href => view_archive_url,
At::Target => "_blank", At::Target => "_blank",
@ -1537,7 +1555,8 @@ pub fn view_versions(versions: &Version) -> Node<Msg> {
fn click_to_top() -> Node<Msg> { fn click_to_top() -> Node<Msg> {
button![ button![
C![&tw_classes::BUTTON, "bg-red-500", "lg:m-0", "m-4"], tw_classes::button_with_color("bg-red-500", "hover:bg-neutral-700"),
C!["lg:m-0", "m-4"],
span!["Top"], span!["Top"],
span![i![C!["fas", "fa-arrow-turn-up"]]], span![i![C!["fas", "fa-arrow-turn-up"]]],
ev(Ev::Click, |_| Msg::ScrollToTop) ev(Ev::Click, |_| Msg::ScrollToTop)