mirrors/treebird
0
0
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

Bring back embedded notifications

Browse source 
FossilOrigin-Name: 8eb2f577e9a9de679829d1694231f527dfacf53938ecc52f323021ed52744bfd
This commit is contained in:
nekobit 2022-08-19 04:46:41 +00:00
parent c9eaaac234
commit 2609e9680c
7 changed files with 119 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
dist/treebird.css vendored
View file

@ -1,3 +1,10 @@
/*
* Notes:
* - Good luck :^3
* - Look into position: sticky; to handle overflows? Not sure if this works but i saw it work i think
*/
/* Variables */
:root
{
@ -37,6 +44,13 @@ form
display: inline;
}
html.embed
{
background-color: unset;
scrollbar-color: #808080 #eaecf0;
scrollbar-width: thin;
}
/* Basic elements */
h1, h2, h3, h4
{
@ -224,7 +238,7 @@ table.ui-table td
}
.sidebar-embed-container .navigation
.embed .navigation
{
position: sticky;
top: 0px;
@ -234,20 +248,20 @@ table.ui-table td
padding: 0;
}
.sidebar-embed-container .btn,
.sidebar-embed-container .nav-btn
.embed .btn,
.embed .nav-btn
{
background: unset;
padding: 2px !important;
font-size: 13px;
}
.sidebar-embed-container .btn-disabled
.embed .btn-disabled
{
background: unset;
}
.sidebar-embed-container .btn:hover
.embed .btn:hover
{
background: unset;
background-color: rgba(0, 0, 0, 0.2);
@ -334,17 +348,6 @@ table.ui-table td
list-style-type: none;
}
/* .sidebar-submenu .sidebarbtn */
/* { */
/* display: block; */
/* color: #000; */
/* padding: 8px; */
/* border-radius: 4px; */
/* padding-left: 24px; */
/* text-decoration: none; */
/* border: 1px solid transparent; */
/* } */
.sidebar-submenu .sidebarbtn.active
{
font-weight: bold;
@ -971,6 +974,14 @@ input[type=checkbox].hidden:not(:checked) + .sidebar-submenu
display: none;
}
.status-hide:checked + .status.status-compact .action-icon
{
position: initial;
float: left;
left: initial;
top: initial;
}
.pfp-td
{
position: relative;
@ -1122,17 +1133,24 @@ input[type=checkbox].hidden:not(:checked) + .sidebar-submenu
font-size: 14px;
}
.status-compact.status.status-notification
.status-compact.status.status-notification,
.notifications-compact .notification.notification-regular
{
padding: 5px;
}
.status-compact .pfp-td img
.status-compact .pfp-td img,
.notifications-compact .notification.notification-regular .pfp-td img
{
width: 28px;
height: 28px;
}
.notifications-compact .notification.notification-regular .pfp-td
{
width: 28px;
}
.status-compact .action-icon
{
position: absolute;
@ -1194,6 +1212,19 @@ input[type=checkbox].hidden:not(:checked) + .sidebar-submenu
top: -2px;
}
.status-compact .attachments img,
.status-compact .attachments video
{
display: inline;
margin-right: 6px;
width: 70px;
height: 40px;
background-color: #fff;
border: 1px solid #cacaca;
border-radius: 4px;
object-fit: cover;
}
.status-compact .status-buttons
{
float: initial;

3
perl/notifications.pm
View file

@ -10,6 +10,7 @@ use status 'generate_status';
use string_helpers qw( random_error_kaomoji );
use icons 'get_icon';
use embed 'generate_embedded_page';
use navigation 'generate_navigation';
sub generate_notification
{
@ -53,7 +54,7 @@ sub embed_notifications
ssn => $ssn,
notifs => $notifs,
notification => sub { generate_notification($ssn, $data, shift, 1); },
random_error_kaomoji => \&random_error_kaomoji,
nav => sub { generate_navigation($ssn, $data, $notifs->[0]->{id}, $notifs->[-1]->{id}) },
);
generate_embedded_page($ssn, $data, to_template(\%vars, \$data->{'notifs_embed.tt'}));

2
templates/embed.tt
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="embed">
<head>
<title>Embed</title>
<meta charset="utf-8">

15
templates/main.tt
View file

@ -176,12 +176,15 @@
</div>
<!-- Notifications -->
<div class="notifications-compact">
[% FOREACH notif IN notifs %]
[% notification(ssn, data, notif, 1) %]
[% END %]
</div>
[% IF ssn.config.notif_embed %]
<iframe class="sidebar-frame" loading="lazy" src="/notifications_compact"></iframe>
[% ELSE %]
<div class="notifications-compact">
[% FOREACH notif IN notifs %]
[% notification(ssn, data, notif, 1) %]
[% END %]
</div>
[% END %]
[% ELSE %]
<div class="sidebar-login">
<form action="$prefix/login" method="post">

2
templates/notification.tt
View file

@ -25,7 +25,7 @@
[% icon('follow') %]
</div>
<div class="notification-content">
<a href="/@[% notif.account.acct %]">@[% notif.account.acct %]</a>
<a href="/@[% notif.account.acct %]" target="_parent">@[% notif.account.acct %]</a>
</div>
</td>
</tr>

1
templates/notifs_embed.tt
View file

@ -1,3 +1,4 @@
[% nav() %]
<div class="notifications-compact">
[% IF notifs %]
[% FOREACH notif IN notifs %]

110
templates/status.tt
View file

@ -46,61 +46,58 @@
<a class="instance-info" href="$prefix/@[% status.account.acct %]">[% status.account.acct %]</a>
[% END %]
<span class="alignend">
<div class="menu-container status-visibility">
[% UNLESS notif && compact && interacted_with %]
[% vis_to_icon(status.visibility) %]
[% ELSE %]
<span class="time">[% rel_to_str(notif.created_at) %]</span>
<div class="menu-container status-visibility">
[% UNLESS notif && compact && interacted_with %]
[% vis_to_icon(status.visibility) %]
[% ELSE %]
<span class="time">[% rel_to_str(notif.created_at) %]</span>
[% END %]
<div class="menu">
[% IF notif %]
<ul>
<li>
<a href="$prefix/notification/[% notif.id %]/read" class="btn-menu">Mark as read</a>
</li>
<li>
<a href="$prefix/notification/[% notif.id %]/delete" class="btn-menu">Clear notification</a>
</li>
</ul>
[% END %]
<div class="menu">
[% IF notif %]
<ul>
<li>
<a href="$prefix/notification/[% notif.id %]/read" class="btn-menu">Mark as read</a>
</li>
<li>
<a href="$prefix/notification/[% notif.id %]/delete" class="btn-menu">Clear notification</a>
</li>
</ul>
[% END %]
[% UNLESS notif && compact && interacted_with %]
<ul>
<li>
<form action="$prefix/status/[% status.id %]/interact" method="post">
<input type="hidden" name="itype" value="mute">
<input type="submit" class="btn-menu" value="Mute">
</form>
</li>
<li>
<form action="$prefix/status/[% status.id %]/interact" method="post">
<input type="hidden" name="itype" value="bookmark">
<input type="submit" class="btn-menu" value="Bookmark">
</form>
</li>
[%# pin %]
<li>
<form action="$prefix/status/[% status.id %]/interact" method="post">
<input type="hidden" name="itype" value="pin">
<input type="submit" class="btn-menu" value="Pin">
</form>
</li>
[%# Delete %]
<li>
<form action="$prefix/status/[% status.id %]/interact" method="post">
<input type="hidden" name="itype" value="delete">
<input type="submit" class="btn-menu" value="Delete status">
</form>
</li>
[% UNLESS notif && compact && interacted_with %]
<ul>
<li>
<form action="$prefix/status/[% status.id %]/interact" method="post">
<input type="hidden" name="itype" value="mute">
<input type="submit" class="btn-menu" value="Mute">
</form>
</li>
<li>
<form action="$prefix/status/[% status.id %]/interact" method="post">
<input type="hidden" name="itype" value="bookmark">
<input type="submit" class="btn-menu" value="Bookmark">
</form>
</li>
[%# pin %]
<li>
<form action="$prefix/status/[% status.id %]/interact" method="post">
<input type="hidden" name="itype" value="pin">
<input type="submit" class="btn-menu" value="Pin">
</form>
</li>
[%# Delete %]
<li>
<form action="$prefix/status/[% status.id %]/interact" method="post">
<input type="hidden" name="itype" value="delete">
<input type="submit" class="btn-menu" value="Delete status">
</form>
</li>
</ul>
[% END %]
</div>
</ul>
[% END %]
</div>
[% UNLESS compact %]
<label for="status-toggle-[% status.id %]-[% unique_toggle_id %]" class="status-view"></label>
[% END %]
</div>
<label for="status-toggle-[% status.id %]-[% unique_toggle_id %]" class="status-view"></label>
</span>
</div>
<div class="status-data">
@ -118,15 +115,20 @@
</span>
[% IF status.media_attachments %]
<div class="attachments">
[% FOR att IN status.media_attachments %]
[% i = 0 %]
[% FOREACH att IN status.media_attachments %]
[%# Set a limit if compact %]
[% LAST IF i >= 6 && compact %]
[% make_att(ssn, data, att, status.sensitive) %]
[% i = i + 1 %]
[% END %]
</div>
[% END %]
[%# TODO {{%s:interactions}} %]
[% IF status.pleroma.emoji_reactions %]
<div class="emoji-reactions">
[% FOR emo IN status.pleroma.emoji_reactions %]
[% FOREACH emo IN status.pleroma.emoji_reactions %]
[% make_emoji(ssn, data, status.id, emo) %]
[% END %]
</div>