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

web: WIP tailwind integration

Browse Source
This commit is contained in:
Bill Thiede 2024-09-28 11:18:18 -07:00
parent 5b8639b80f
commit 17da489229
4 changed files with 177 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/index.html
View File

@ -23,6 +23,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<link data-trunk rel="css" href="static/site-specific.css" /> <link data-trunk rel="css" href="static/site-specific.css" />
<link data-trunk rel="tailwind-css" href="./src/tailwind.css" />
</head> </head>
<body> <body>

3
web/src/tailwind.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

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

@ -425,7 +425,11 @@ fn render_avatar(avatar: Option<String>, from: &str) -> Node<Msg> {
let h = 64; let h = 64;
let from_color = compute_color(from); let from_color = compute_color(from);
svg![ svg![
attrs! {At::ViewBox=>format!("0 0 {w} {h}") }, attrs! {
At::Width=>w,
At::Height=>h,
At::ViewBox=>format!("0 0 {w} {h}")
},
style! { style! {
St::Display => "block", St::Display => "block",
St::FontFamily => "Poppins", St::FontFamily => "Poppins",
@ -460,6 +464,16 @@ fn render_avatar(avatar: Option<String>, from: &str) -> Node<Msg> {
} }
} }
fn copy_text_widget(text: &str) -> Node<Msg> {
let text = text.to_string();
span![
i![C!["far", "fa-clone"]],
ev(Ev::Click, move |e| {
e.stop_propagation();
Msg::CopyToClipboard(text)
})
]
}
fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<Msg> { fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<Msg> {
let (from, from_detail) = match &msg.from { let (from, from_detail) = match &msg.from {
Some(ShowThreadQueryThreadOnEmailThreadMessagesFrom { Some(ShowThreadQueryThreadOnEmailThreadMessagesFrom {
@ -477,127 +491,166 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
let id = msg.id.clone(); let id = msg.id.clone();
let is_unread = has_unread(&msg.tags); let is_unread = has_unread(&msg.tags);
let img = render_avatar(avatar, &from); let img = render_avatar(avatar, &from);
article![ div![
C!["media"], figure![
figure![C!["media-left"], p![C!["image", "is-64x64"], img]], C!["flex"],
div![ div![C!["w-16", "h-16", "mx-auto", "h-auto"], &img],
C!["media-content"],
div![ div![
C!["content"], C!["px-4"],
p![ &from,
strong![from], " ",
br![], from_detail.as_ref().map(|text| copy_text_widget(&text)),
small![ IF!(!msg.to.is_empty() =>div![
&from_detail, "To: ",
msg.to.iter().map(|to| {
let ShowThreadQueryThreadOnEmailThreadMessagesTo { name, addr } = to;
span![
C!["text-nowrap"],
&name,
" ", " ",
from_detail.map(|detail| span![ span![
i![C!["far", "fa-clone"]], i![C!["far", "fa-clone"]],
ev(Ev::Click, move |e| { addr.clone().map(|addr| ev(Ev::Click, move |e| {
e.stop_propagation(); e.stop_propagation();
Msg::CopyToClipboard(detail.to_string()) Msg::CopyToClipboard(addr)
}) }))
]) ],
], " "
table![ ]
IF!(!msg.to.is_empty() => })]),
tr![ IF!(!msg.cc.is_empty() =>div![
td![ "To:" ], "CC: ",
//td![ if i==0 { "To" }else { "" } ], msg.cc.iter().map(|cc| {
td![ let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc;
msg.to.iter().enumerate().map(|(i, to)| span![
small![ C!["text-nowrap"],
if i>0 { ", " }else { "" }, &name,
{ " ",
let to = match to { span![
ShowThreadQueryThreadOnEmailThreadMessagesTo { i![C!["far", "fa-clone"]],
name: Some(name), addr.clone().map(|addr| ev(Ev::Click, move |e| {
addr:Some(addr), e.stop_propagation();
} => format!("{name} <{addr}>"), Msg::CopyToClipboard(addr)
ShowThreadQueryThreadOnEmailThreadMessagesTo { }))
name: Some(name), ],
addr:None " "
} => format!("{name}"), ]
ShowThreadQueryThreadOnEmailThreadMessagesTo { })]),
addr: Some(addr), .. msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]),
} => format!("{addr}"), span![
_ => String::from("UNKNOWN"), C!["read-status"],
}; i![C![
span![ "far",
&to, " ", if is_unread {
"fa-envelope"
} else {
"fa-envelope-open"
},
]],
{
// TODO remove clone and code block when removing article![] below
let id = id.clone();
ev(Ev::Click, move |e| {
e.stop_propagation();
Msg::SetUnread(id, !is_unread)
})
}
]
]
],
hr![],
article![
C!["media"],
figure![C!["media-left"], p![C!["image", "is-64x64"], img]],
div![
C!["media-content"],
div![
C!["content"],
p![
//C!["text-nowrap"],
strong![from],
" ",
from_detail.map(|text| copy_text_widget(&text)),
table![
IF!(!msg.to.is_empty() =>
tr![
td![ "To:" ],
//td![ if i==0 { "To" }else { "" } ],
td![
msg.to.iter().map(|to|
small![
" ",
{
let ShowThreadQueryThreadOnEmailThreadMessagesTo{name, addr} = to;
span![ span![
i![C!["far", "fa-clone"]], //C!["text-nowrap"],
ev(Ev::Click, move |e| { &name, " ",
e.stop_propagation(); span![
Msg::CopyToClipboard(to) i![C!["far", "fa-clone"]],
}) addr.clone().map(|addr| ev(Ev::Click,
move |e| {
e.stop_propagation();
Msg::CopyToClipboard(addr)
}
))
]
] ]
] }
} ])
]
]) ]),
] IF!(!msg.cc.is_empty() =>
]), tr![
IF!(!msg.cc.is_empty() => td![ "CC:" ],
tr![ td![
td![ "CC:" ], msg.cc.iter().map(|cc|
td![ small![
msg.cc.iter().enumerate().map(|(i, cc)| " ",
small![ {
if i>0 { ", " }else { "" }, let ShowThreadQueryThreadOnEmailThreadMessagesCc{name, addr} = cc;
{
let cc = match cc {
ShowThreadQueryThreadOnEmailThreadMessagesCc {
name: Some(name),
addr:Some(addr),
} => format!("{name} <{addr}>"),
ShowThreadQueryThreadOnEmailThreadMessagesCc {
name: Some(name),
addr:None
} => format!("{name}"),
ShowThreadQueryThreadOnEmailThreadMessagesCc {
addr: Some(addr), ..
} => format!("<{addr}>"),
_ => String::from("UNKNOWN"),
};
span![
&cc, " ",
span![ span![
i![C!["far", "fa-clone"]], //C!["text-nowrap"],
ev(Ev::Click, move |e| { &name, " ",
e.stop_propagation(); span![
Msg::CopyToClipboard(cc) i![C!["far", "fa-clone"]],
}) addr.clone().map(|addr| ev(Ev::Click,
move |e| {
e.stop_propagation();
Msg::CopyToClipboard(addr)
}
))
]
] ]
] }
} ])
]) ]
] ]),
]), tr![td![
tr![td![ attrs! {At::ColSpan=>2},
attrs! {At::ColSpan=>2}, msg.timestamp.map(|ts| span![C!["header"], human_age(ts)])
msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]) ]]
]] ],
], ],
], ],
], ],
], div![
div![ C!["media-right"],
C!["media-right"], span![
span![ C!["read-status"],
C!["read-status"], i![C![
i![C![ "far",
"far", if is_unread {
if is_unread { "fa-envelope"
"fa-envelope" } else {
} else { "fa-envelope-open"
"fa-envelope-open" },
}, ]]
]] ],
], ev(Ev::Click, move |e| {
ev(Ev::Click, move |e| { e.stop_propagation();
e.stop_propagation(); Msg::SetUnread(id, !is_unread)
Msg::SetUnread(id, !is_unread) })
}) ]
] ]
] ]
} }
@ -1127,7 +1180,6 @@ fn news_post(
} }
fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg> { fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg> {
let from = &post.site; let from = &post.site;
let from_detail = post.url.clone();
let avatar: Option<String> = None; let avatar: Option<String> = None;
//let avatar: Option<String> = Some(String::from("https://bulma.io/images/placeholders/64x64.png")); //let avatar: Option<String> = Some(String::from("https://bulma.io/images/placeholders/64x64.png"));
let id = post.thread_id.clone(); let id = post.thread_id.clone();

9
web/tailwind.config.js Normal file
View File

@ -0,0 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.rs'],
theme: {
extend: {},
},
plugins: [],
}