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

Compact notifications redo 

FossilOrigin-Name: 4c93b6fae6df82cb2c199a5df3b964f217b7866a59e7ee9a08bd681548841175
This commit is contained in:
nekobit 2022-08-17 03:43:29 +00:00
parent 2609b8d54f
commit 399fe70f08
4 changed files with 86 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
dist/treebird.css vendored
View File

@ -1104,6 +1104,50 @@ input[type=checkbox].hidden:not(:checked) + .reply-form
min-width: 0;
}
/* Compact notifications (statuses) */
.notifications-compact,
.status-compact
{
position: relative;
font-size: 14px;
}
.status-compact .status.status-notification
{
padding: 7px;
}
.status-compact .pfp-td img
{
width: 28px;
height: 28px;
}
.status-compact .action-icon
{
position: absolute;
background-color: #eaecf0;
border-radius: 50%;
width: 14px;
height: 14px;
border: 1px solid #cacaca;
padding: 3px;
top: 17px;
left: -17px;
z-index: 8;
font-size: 12px;
}
.status-compact .action-icon svg
{
width: 14px;
height: 14px;
stroke: #40455a;
/* Little fix */
position: relative;
top: -1px;
}
/* .status .notification-text-group-with-icon .username */
/* { */
/* /\* UNDO *\/ */

21
perl/status.pm
View File

@ -29,6 +29,8 @@ sub generate_status
$status = $status->{reblog};
}
my $is_statusey_notif = ($notif && ($notif->{type} eq 'mention' || $notif->{type} eq 'status'));
my %vars = (
prefix => '',
ssn => $ssn,
@ -37,9 +39,26 @@ sub generate_status
data => $data,
notif => $notif, # May be undef
compact => $is_compact, # May be undef
is_statusey_notif => ($notif && ($notif->{type} eq 'mention' || $notif->{type} eq 'status')),
is_statusey_notif => $is_statusey_notif,
unique_toggle_id => $rel_context++,
interacted_with => $boost_acct || ($notif && !$is_statusey_notif),
# Functions
action_to_string => sub {
return unless $notif;
return lang('NOTIF_LIKED') if $notif->{type} eq 'favourite';
return lang('NOTIF_REPEATED') if $boost_acct || $notif->{type} eq 'reblog';
return lang('NOTIF_REACTED_WITH') .' '. $notif->{emoji} if $boost_acct || $notif->{type} eq 'emoji reaction';
},
action_to_icon => sub {
return unless $notif;
return get_icon('like') if $notif->{type} eq 'favourite';
return get_icon('repeat') if $boost_acct || $notif->{type} eq 'reblog';
return $notif->{emoji} if $notif->{type} eq 'emoji reaction';
},
icon => \&get_icon,
lang => \&lang,
rel_to_str => \&reltime_to_str,

2
templates/main.tt
View File

@ -171,7 +171,7 @@
<!-- Notifications -->
<div class="notifications-compact">
[% FOREACH notif IN notifs %]
[% notification(ssn, data, notif) %]
[% notification(ssn, data, notif, 1) %]
[% END %]
</div>

38
templates/status.tt
View File

@ -2,31 +2,21 @@
<div class="status
[%- IF notif %] status-notification[% IF notif.pleroma && !notif.pleroma.is_seen %] notification-unread[% END %][% END %]
[%- IF is_statusey_notif -%] status-notification-mention[% END %]
[%- IF compact -%] status-compact[% END %]
[%# Blame CSS for this class %]
[%- IF boost || (notif && notif.account && !is_statusey_notif) %] notification-info-lookahead[% END -%]
[%- IF interacted_with && !compact %] notification-info-lookahead[% END -%]
" id="[% status.id %]">
[% IF boost || (notif && notif.account && !is_statusey_notif) %]
[% IF interacted_with && !compact %]
<div class="notification-info">
<img src="[% boost.avatar || notif.account.avatar %]" loading="lazy" class="avatar">
<div class="notification-user">
<span class="notification-text-group-with-icon">
<span class="username">[% format_username(boost || notif.account) %]</span>
<span class="action">
[% IF notif && notif.type == 'favourite' %]
[% lang('NOTIF_LIKED') %]
[% ELSIF boost || (notif && notif.type == 'reblog') %]
[% lang('NOTIF_REPEATED') %]
[% ELSIF boost || (notif && notif.type == 'emoji reaction') %]
[%# Yes, it can be a custom emoji too %]
[% lang('NOTIF_REACTED_WITH') %] [% notif.emoji %]
[% END %]
[% action_to_string(); %]
</span>
</span>
[% IF notif && notif.type == 'favourite' %]
[% icon('like') %]
[% ELSIF boost || (notif && notif.type == 'reblog') %] [%# It's a repeat %]
[% icon('repeat') %]
[% END %]
[% action_to_icon(); %]
</div>
</div>
[% END %]
@ -37,8 +27,22 @@
</td>
<td class="status-info">
<div class="poster-stats">
<span class="username">[% format_username(status.account) %]</span>
<a class="instance-info" href="$prefix/@[% status.account.acct %]">[% status.account.acct %]</a>
<span class="username">
[% format_username(status.account) %]
</span>
[% IF interacted_with && compact %]
<span class="action">
[% action_to_string(); %]
</span>
<span class="action-icon">
[% action_to_icon(); %]
</span>
[% END %]
[% UNLESS compact %]
<a class="instance-info" href="$prefix/@[% status.account.acct %]">[% status.account.acct %]</a>
[% END %]
<span class="alignend">
<div class="menu-container status-visibility">
[% vis_to_icon(status.visibility) %]