notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend/components] Use InlineEmoji for reaction notifications

Browse source
This commit is contained in:
pancakes 2024-12-02 15:45:47 +10:00 • committed by Laura Hausmann
parent 8cb9f272e3
commit d8c5a43100
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
2 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Iceshrimp.Frontend/Components/NotificationComponent.razor
View file

@ -31,7 +31,9 @@
<span class="notification-text">@Loc["liked note"]</span>
break;
case { Note: not null, Reaction: not null, Type: "reaction" }:
<img class="notification-reaction" src="@NotificationResponse.Reaction.Url" alt="@NotificationResponse.Reaction.Name.Trim(':')" title="@NotificationResponse.Reaction.Name"/>
<span class="notification-reaction" title="@NotificationResponse.Reaction.Name">
<InlineEmoji Name="@NotificationResponse.Reaction.Name" Url="@NotificationResponse.Reaction.Url"/>
</span>
<span class="notification-text">@Loc["reacted to your note"]</span>
break;
case { Type: "follow", User: not null }:

25
Iceshrimp.Frontend/Components/NotificationComponent.razor.css
View file

@ -36,16 +36,27 @@
top: 3em;
left: 3em;
display: inline-block;
width: 1.25em;
height: 1.25em;
object-fit: contain;
filter: drop-shadow(0 0 0.2em rgba(0, 0, 0, 0.7));
transition-duration: 250ms;
}
.notification-reaction:hover {
transform: scale(1.5);
z-index: +1;
::deep {
.notification-reaction .custom-reaction {
font-size: 1.25em;
transition-duration: 250ms;
}
}
::deep {
.notification-reaction .custom-reaction:hover {
transform: scale(1.5);
z-index: +1;
}
}
::deep {
.notification-reaction .unicode-reaction {
font-size: 1.25em;
}
}
.notification-text {