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