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

[frontend/components] Refactor notifications

Browse source
This commit is contained in:
Jeder 2024-11-06 21:40:48 +01:00 • committed by Iceshrimp development
parent 579f8c233a
commit 1cccdcb832
2 changed files with 61 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,8 @@
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
<div class="notification"> <div class="notification">
@if (NotificationResponse is not { Type: "mention" } or { Type: "reply" })
{
<div class="notification-header"> <div class="notification-header">
@if (NotificationResponse is { User: not null }) @if (NotificationResponse is { User: not null })
{ {
@ -16,59 +18,42 @@
<div class="notification-body"> <div class="notification-body">
@if (NotificationResponse is { User: not null }) @if (NotificationResponse is { User: not null })
{ {
<span @onclick="OpenProfile" class="display-name"><UserDisplayName User="@NotificationResponse.User"/></span> <span @onclick="OpenProfile" class="display-name">@(NotificationResponse.User.DisplayName ?? NotificationResponse.User.Username)</span>
} }
@if (NotificationResponse is { Note: not null, Type: "like", User: not null }) @switch (NotificationResponse)
{
<span class="notification-text">@Loc["liked your post: "]</span>
}
else if (NotificationResponse is { Note: not null, Type: "reaction" })
{
<span class="notification-text">@Loc["reacted to your post:"]</span>
}
else if (NotificationResponse is { Type: "follow", User: not null })
{ {
case { Note: not null, Type: "like", User: not null }:
<span class="notification-text">@Loc["liked your note"]</span>
break;
case { Note: not null, Type: "reaction" }:
<span class="notification-text">@Loc["reacted to your note"]</span>
break;
case { Type: "follow", User: not null }:
<span class="notification-text">@Loc["followed you"]</span> <span class="notification-text">@Loc["followed you"]</span>
} break;
else if (NotificationResponse is { Type: "followRequestReceived" }) case { Type: "followRequestReceived" }:
{
<span class="notification-text">@Loc["requested to follow you"]</span> <span class="notification-text">@Loc["requested to follow you"]</span>
} break;
else if (NotificationResponse is { Type: "followRequestAccepted" }) case { Type: "followRequestAccepted" }:
{
<span class="notification-text">@Loc["accepted your follow request"]</span> <span class="notification-text">@Loc["accepted your follow request"]</span>
} break;
else if (NotificationResponse is { Type: "mention" }) case { Type: "renote" }:
{ <span class="notification-text">@Loc["renoted your note"]</span>
<span class="notification-text">@Loc["mentioned you:"]</span> break;
} case { Type: "quote" }:
else if (NotificationResponse is { Type: "reply" }) <span class="notification-text">@Loc["quoted your note"]</span>
{ break;
<span class="notification-text">@Loc["replied to your post:"]</span> case { Bite: { BiteBack: true }, Type: "bite" }:
}
else if (NotificationResponse is { Type: "renote" })
{
<span class="notification-text">@Loc["renoted your post:"]</span>
}
else if (NotificationResponse is { Type: "quote" })
{
<span class="notification-text">@Loc["quoted your post:"]</span>
}
else if (NotificationResponse is { Bite: { BiteBack: true }, Type: "bite" })
{
<span class="notification-text">@Loc["bit you back"]</span> <span class="notification-text">@Loc["bit you back"]</span>
} break;
else if (NotificationResponse is { Note: not null, Type: "bite" }) case { Note: not null, Type: "bite" }:
{ <span class="notification-text">@Loc["bit your note"]</span>
<span class="notification-text">@Loc["bit your note:"]</span> break;
} case { Type: "bite" }:
else if (NotificationResponse is { Type: "bite" })
{
<span class="notification-text">@Loc["bit you"]</span> <span class="notification-text">@Loc["bit you"]</span>
} break;
else default:
{
<span class="notification-text"> <span class="notification-text">
<i>@Loc["unsupported notification type"]</i> <i>@Loc["unsupported notification type"]</i>
</span> </span>
@ -77,16 +62,18 @@
<p>ID: @NotificationResponse.Id</p> <p>ID: @NotificationResponse.Id</p>
<p>Type: @NotificationResponse.Type</p> <p>Type: @NotificationResponse.Type</p>
</details> </details>
break;
} }
</div> </div>
<span>@RenderDate(DateTime.Parse(NotificationResponse.CreatedAt))</span> <span>@RenderDate(DateTime.Parse(NotificationResponse.CreatedAt))</span>
</div> </div>
}
@if (NotificationResponse is { Note: not null }) @if (NotificationResponse is { Note: not null })
{ {
<div @onclick="OpenNote" class="notification-note"> <div @onclick="OpenNote" class="@(NotificationResponse is not { Type: "mention" } or { Type: "reply" } ? "notification-note" : "")">
<Note NoteResponse="NotificationResponse.Note"/> <NoteComponent Note="NotificationResponse.Note" AsQuote="@(NotificationResponse is not { Type: "mention" } or { Type: "reply" })"/>
</div> </div>
} }
</div> </div>

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

@ -10,6 +10,7 @@
} }
.notification-text { .notification-text {
font-size: 0.8em;
} }
.notification-note { .notification-note {
@ -29,7 +30,7 @@
object-fit: cover; object-fit: cover;
width: 3em; width: 3em;
height: 3em; height: 3em;
margin-right: 0.5em; margin-right: 0.75em;
} }
.display-name { .display-name {