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 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="tailwind-css" href="./src/tailwind.css" />
</head>
<body>

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

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

160
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 from_color = compute_color(from);
svg![
attrs! {At::ViewBox=>format!("0 0 {w} {h}") },
attrs! {
At::Width=>w,
At::Height=>h,
At::ViewBox=>format!("0 0 {w} {h}")
},
style! {
St::Display => "block",
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> {
let (from, from_detail) = match &msg.from {
Some(ShowThreadQueryThreadOnEmailThreadMessagesFrom {
@ -477,6 +491,74 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
let id = msg.id.clone();
let is_unread = has_unread(&msg.tags);
let img = render_avatar(avatar, &from);
div![
figure![
C!["flex"],
div![C!["w-16", "h-16", "mx-auto", "h-auto"], &img],
div![
C!["px-4"],
&from,
" ",
from_detail.as_ref().map(|text| copy_text_widget(&text)),
IF!(!msg.to.is_empty() =>div![
"To: ",
msg.to.iter().map(|to| {
let ShowThreadQueryThreadOnEmailThreadMessagesTo { name, addr } = to;
span![
C!["text-nowrap"],
&name,
" ",
span![
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() =>div![
"CC: ",
msg.cc.iter().map(|cc| {
let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc;
span![
C!["text-nowrap"],
&name,
" ",
span![
i![C!["far", "fa-clone"]],
addr.clone().map(|addr| ev(Ev::Click, move |e| {
e.stop_propagation();
Msg::CopyToClipboard(addr)
}))
],
" "
]
})]),
msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]),
span![
C!["read-status"],
i![C![
"far",
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]],
@ -485,55 +567,35 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
div![
C!["content"],
p![
//C!["text-nowrap"],
strong![from],
br![],
small![
&from_detail,
" ",
from_detail.map(|detail| span![
i![C!["far", "fa-clone"]],
ev(Ev::Click, move |e| {
e.stop_propagation();
Msg::CopyToClipboard(detail.to_string())
})
])
],
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().enumerate().map(|(i, to)|
msg.to.iter().map(|to|
small![
if i>0 { ", " }else { "" },
" ",
{
let to = match to {
ShowThreadQueryThreadOnEmailThreadMessagesTo {
name: Some(name),
addr:Some(addr),
} => format!("{name} <{addr}>"),
ShowThreadQueryThreadOnEmailThreadMessagesTo {
name: Some(name),
addr:None
} => format!("{name}"),
ShowThreadQueryThreadOnEmailThreadMessagesTo {
addr: Some(addr), ..
} => format!("{addr}"),
_ => String::from("UNKNOWN"),
};
let ShowThreadQueryThreadOnEmailThreadMessagesTo{name, addr} = to;
span![
&to, " ",
//C!["text-nowrap"],
&name, " ",
span![
i![C!["far", "fa-clone"]],
ev(Ev::Click, move |e| {
addr.clone().map(|addr| ev(Ev::Click,
move |e| {
e.stop_propagation();
Msg::CopyToClipboard(to)
})
Msg::CopyToClipboard(addr)
}
))
]
]
}
])
]
]),
@ -541,32 +603,22 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
tr![
td![ "CC:" ],
td![
msg.cc.iter().enumerate().map(|(i, cc)|
msg.cc.iter().map(|cc|
small![
if i>0 { ", " }else { "" },
" ",
{
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"),
};
let ShowThreadQueryThreadOnEmailThreadMessagesCc{name, addr} = cc;
span![
&cc, " ",
//C!["text-nowrap"],
&name, " ",
span![
i![C!["far", "fa-clone"]],
ev(Ev::Click, move |e| {
addr.clone().map(|addr| ev(Ev::Click,
move |e| {
e.stop_propagation();
Msg::CopyToClipboard(cc)
})
Msg::CopyToClipboard(addr)
}
))
]
]
}
@ -600,6 +652,7 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
})
]
]
]
}
fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<Msg> {
@ -1127,7 +1180,6 @@ fn news_post(
}
fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg> {
let from = &post.site;
let from_detail = post.url.clone();
let avatar: Option<String> = None;
//let avatar: Option<String> = Some(String::from("https://bulma.io/images/placeholders/64x64.png"));
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: [],
}