web: successfully rewrite some bits in tailwind
This commit is contained in:
parent
17da489229
commit
4f21814be0
@ -4,20 +4,16 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/cyborg/bulmaswatch.min.css">
|
|
||||||
<!--
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
|
||||||
-->
|
|
||||||
<!--
|
<!--
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
|
|
||||||
-->
|
-->
|
||||||
|
<link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/cyborg/bulmaswatch.min.css">
|
||||||
|
<!-- Pretty checkboxes from https://justboil.github.io/bulma-checkbox/ -->
|
||||||
|
<link data-trunk rel="css" href="static/main.css" />
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
|
||||||
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
|
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
|
||||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||||
<link rel="icon" href="https://static.xinu.tv/favicon/letterbox.svg" />
|
<link rel="icon" href="https://static.xinu.tv/favicon/letterbox.svg" />
|
||||||
<link data-trunk rel="css" href="static/style.css" />
|
<link data-trunk rel="css" href="static/style.css" />
|
||||||
<!-- Pretty checkboxes from https://justboil.github.io/bulma-checkbox/ -->
|
|
||||||
<link data-trunk rel="css" href="static/main.css" />
|
|
||||||
<!-- tall thin font for user icon -->
|
<!-- tall thin font for user icon -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
|||||||
@ -433,7 +433,7 @@ fn render_avatar(avatar: Option<String>, from: &str) -> Node<Msg> {
|
|||||||
style! {
|
style! {
|
||||||
St::Display => "block",
|
St::Display => "block",
|
||||||
St::FontFamily => "Poppins",
|
St::FontFamily => "Poppins",
|
||||||
St::FontSize => pt(32),
|
St::FontSize => pt(28),
|
||||||
},
|
},
|
||||||
g![
|
g![
|
||||||
rect![attrs! {
|
rect![attrs! {
|
||||||
@ -451,7 +451,6 @@ fn render_avatar(avatar: Option<String>, from: &str) -> Node<Msg> {
|
|||||||
text![
|
text![
|
||||||
attrs! {
|
attrs! {
|
||||||
At::Fill => "white",
|
At::Fill => "white",
|
||||||
|
|
||||||
At::X => percent(50),
|
At::X => percent(50),
|
||||||
At::Y => percent(50),
|
At::Y => percent(50),
|
||||||
At::DominantBaseline => "middle",
|
At::DominantBaseline => "middle",
|
||||||
@ -491,168 +490,84 @@ 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);
|
||||||
div![
|
div![figure![
|
||||||
figure![
|
C!["flex"],
|
||||||
C!["flex"],
|
div![C!["w-16", "h-16", "mx-auto", "h-auto"], &img],
|
||||||
div![C!["w-16", "h-16", "mx-auto", "h-auto"], &img],
|
div![
|
||||||
div![
|
C!["px-4"],
|
||||||
C!["px-4"],
|
span![C!["font-semibold"], &from],
|
||||||
&from,
|
" ",
|
||||||
" ",
|
from_detail.as_ref().map(|text| copy_text_widget(&text)),
|
||||||
from_detail.as_ref().map(|text| copy_text_widget(&text)),
|
IF!(!msg.to.is_empty() =>div![
|
||||||
IF!(!msg.to.is_empty() =>div![
|
C!["text-xs"],
|
||||||
"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![
|
span![
|
||||||
C!["read-status"],
|
C!["font-semibold"],
|
||||||
i![C![
|
"To: "
|
||||||
"far",
|
],
|
||||||
if is_unread {
|
span![
|
||||||
"fa-envelope"
|
msg.to.iter().map(|to| {
|
||||||
} else {
|
let ShowThreadQueryThreadOnEmailThreadMessagesTo { name, addr } = to;
|
||||||
"fa-envelope-open"
|
span![
|
||||||
},
|
&name,
|
||||||
]],
|
" ",
|
||||||
{
|
span![
|
||||||
// TODO remove clone and code block when removing article![] below
|
i![C!["far", "fa-clone"]],
|
||||||
let id = id.clone();
|
addr.clone().map(|addr| ev(Ev::Click, move |e| {
|
||||||
ev(Ev::Click, move |e| {
|
e.stop_propagation();
|
||||||
e.stop_propagation();
|
Msg::CopyToClipboard(addr)
|
||||||
Msg::SetUnread(id, !is_unread)
|
}))
|
||||||
})
|
],
|
||||||
}
|
" "
|
||||||
|
]
|
||||||
|
})
|
||||||
]
|
]
|
||||||
]
|
]),
|
||||||
],
|
IF!(!msg.cc.is_empty() =>div![
|
||||||
hr![],
|
C!["text-xs"],
|
||||||
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![
|
|
||||||
//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() =>
|
|
||||||
tr![
|
|
||||||
td![ "CC:" ],
|
|
||||||
td![
|
|
||||||
msg.cc.iter().map(|cc|
|
|
||||||
small![
|
|
||||||
" ",
|
|
||||||
{
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
))
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
])
|
|
||||||
]
|
|
||||||
]),
|
|
||||||
tr![td![
|
|
||||||
attrs! {At::ColSpan=>2},
|
|
||||||
msg.timestamp.map(|ts| span![C!["header"], human_age(ts)])
|
|
||||||
]]
|
|
||||||
],
|
|
||||||
],
|
|
||||||
],
|
|
||||||
],
|
|
||||||
div![
|
|
||||||
C!["media-right"],
|
|
||||||
span![
|
span![
|
||||||
C!["read-status"],
|
C!["font-semibold"],
|
||||||
i![C![
|
"CC: "
|
||||||
"far",
|
|
||||||
if is_unread {
|
|
||||||
"fa-envelope"
|
|
||||||
} else {
|
|
||||||
"fa-envelope-open"
|
|
||||||
},
|
|
||||||
]]
|
|
||||||
],
|
],
|
||||||
|
span![
|
||||||
|
msg.cc.iter().map(|cc| {
|
||||||
|
let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc;
|
||||||
|
span![
|
||||||
|
&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!["m-4", "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| {
|
ev(Ev::Click, move |e| {
|
||||||
e.stop_propagation();
|
e.stop_propagation();
|
||||||
Msg::SetUnread(id, !is_unread)
|
Msg::SetUnread(id, !is_unread)
|
||||||
})
|
})
|
||||||
]
|
}
|
||||||
]
|
]
|
||||||
]
|
],]
|
||||||
}
|
}
|
||||||
|
|
||||||
fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<Msg> {
|
fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<Msg> {
|
||||||
@ -671,62 +586,69 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
|
|||||||
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![figure![
|
||||||
C!["media"],
|
C!["flex"],
|
||||||
figure![C!["media-left"], p![C!["image", "is-64x64"], img]],
|
div![C!["w-16", "h-16", "mx-auto", "h-auto"], &img],
|
||||||
div![
|
div![
|
||||||
C!["media-content"],
|
C!["px-4"],
|
||||||
div![
|
span![C!["font-semibold"], &from],
|
||||||
C!["content"],
|
" ",
|
||||||
p![
|
IF!(!msg.to.is_empty() =>div![
|
||||||
strong![from],
|
C!["text-xs"],
|
||||||
br![],
|
span![
|
||||||
IF!(!msg.to.is_empty() =>
|
C!["font-semibold"],
|
||||||
nodes![
|
"To: "
|
||||||
small![" to "],
|
|
||||||
msg.to.iter().enumerate().map(|(i, to)| small![
|
|
||||||
if i > 0 { ", " } else { "" },
|
|
||||||
to.name()
|
|
||||||
.as_ref()
|
|
||||||
.unwrap_or(&to.addr().unwrap_or("(UNKNOWN)"))
|
|
||||||
]).collect::<Vec<_>>()
|
|
||||||
]),
|
|
||||||
IF!(!msg.cc.is_empty() =>
|
|
||||||
nodes![
|
|
||||||
small![" cc "],
|
|
||||||
msg.cc.iter().enumerate().map(|(i, cc)| small![
|
|
||||||
if i > 0 { ", " } else { "" },
|
|
||||||
cc.name()
|
|
||||||
.as_ref()
|
|
||||||
.unwrap_or(&cc.addr().unwrap_or("(UNKNOWN)"))
|
|
||||||
]).collect::<Vec<_>>()
|
|
||||||
]),
|
|
||||||
br![],
|
|
||||||
msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]),
|
|
||||||
],
|
],
|
||||||
],
|
span![
|
||||||
|
msg.to.iter().enumerate().map(|(i, to)| {
|
||||||
|
let ShowThreadQueryThreadOnEmailThreadMessagesTo { name, addr } = to;
|
||||||
|
span![
|
||||||
|
if i > 0 { ", " } else { "" },
|
||||||
|
&name,
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
]),
|
||||||
|
IF!(!msg.cc.is_empty() =>div![
|
||||||
|
C!["text-xs"],
|
||||||
|
span![
|
||||||
|
C!["font-semibold"],
|
||||||
|
"CC: "
|
||||||
|
],
|
||||||
|
span![
|
||||||
|
msg.cc.iter().enumerate().map(|(i, cc)| {
|
||||||
|
let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc;
|
||||||
|
span![
|
||||||
|
if i > 0 { ", " } else { "" },
|
||||||
|
&name,
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
]),
|
||||||
|
msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]),
|
||||||
],
|
],
|
||||||
div![
|
div![span![
|
||||||
C!["media-right"],
|
C!["m-4", "read-status"],
|
||||||
span![
|
i![
|
||||||
C!["read-status"],
|
C![
|
||||||
i![
|
"far",
|
||||||
C![
|
if is_unread {
|
||||||
"far",
|
"fa-envelope"
|
||||||
if is_unread {
|
} else {
|
||||||
"fa-envelope"
|
"fa-envelope-open"
|
||||||
} else {
|
},
|
||||||
"fa-envelope-open"
|
],
|
||||||
},
|
{
|
||||||
],
|
// TODO remove clone and code block when removing article![] below
|
||||||
|
let id = id.clone();
|
||||||
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)
|
||||||
})
|
})
|
||||||
]
|
}
|
||||||
]
|
]
|
||||||
]
|
]]
|
||||||
]
|
],]
|
||||||
}
|
}
|
||||||
|
|
||||||
fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) -> Node<Msg> {
|
fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) -> Node<Msg> {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user