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

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

@ -7,86 +7,73 @@
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
<div class="notification"> <div class="notification">
<div class="notification-header"> @if (NotificationResponse is not { Type: "mention" } or { Type: "reply" })
@if (NotificationResponse is { User: not null }) {
{ <div class="notification-header">
<img @onclick="OpenProfile" class="user-avatar" src="@NotificationResponse.User.AvatarUrl"/>
}
<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> <img @onclick="OpenProfile" class="user-avatar" src="@NotificationResponse.User.AvatarUrl"/>
} }
@if (NotificationResponse is { Note: not null, Type: "like", User: not null }) <div class="notification-body">
{ @if (NotificationResponse is { User: not null })
<span class="notification-text">@Loc["liked your post: "]</span> {
} <span @onclick="OpenProfile" class="display-name">@(NotificationResponse.User.DisplayName ?? NotificationResponse.User.Username)</span>
else if (NotificationResponse is { Note: not null, Type: "reaction" }) }
{
<span class="notification-text">@Loc["reacted to your post:"]</span> @switch (NotificationResponse)
} {
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>
<span class="notification-text">@Loc["followed you"]</span> break;
} case { Note: not null, Type: "reaction" }:
else if (NotificationResponse is { Type: "followRequestReceived" }) <span class="notification-text">@Loc["reacted to your note"]</span>
{ break;
<span class="notification-text">@Loc["requested to follow you"]</span> case { Type: "follow", User: not null }:
} <span class="notification-text">@Loc["followed you"]</span>
else if (NotificationResponse is { Type: "followRequestAccepted" }) break;
{ case { Type: "followRequestReceived" }:
<span class="notification-text">@Loc["accepted your follow request"]</span> <span class="notification-text">@Loc["requested to follow you"]</span>
} break;
else if (NotificationResponse is { Type: "mention" }) case { Type: "followRequestAccepted" }:
{ <span class="notification-text">@Loc["accepted your follow request"]</span>
<span class="notification-text">@Loc["mentioned you:"]</span> break;
} case { Type: "renote" }:
else if (NotificationResponse is { Type: "reply" }) <span class="notification-text">@Loc["renoted your note"]</span>
{ break;
<span class="notification-text">@Loc["replied to your post:"]</span> case { Type: "quote" }:
} <span class="notification-text">@Loc["quoted your note"]</span>
else if (NotificationResponse is { Type: "renote" }) break;
{ case { Bite: { BiteBack: true }, Type: "bite" }:
<span class="notification-text">@Loc["renoted your post:"]</span> <span class="notification-text">@Loc["bit you back"]</span>
} break;
else if (NotificationResponse is { Type: "quote" }) case { Note: not null, Type: "bite" }:
{ <span class="notification-text">@Loc["bit your note"]</span>
<span class="notification-text">@Loc["quoted your post:"]</span> break;
} case { Type: "bite" }:
else if (NotificationResponse is { Bite: { BiteBack: true }, Type: "bite" }) <span class="notification-text">@Loc["bit you"]</span>
{ break;
<span class="notification-text">@Loc["bit you back"]</span> default:
} <span class="notification-text">
else if (NotificationResponse is { Note: not null, Type: "bite" }) <i>@Loc["unsupported notification type"]</i>
{ </span>
<span class="notification-text">@Loc["bit your note:"]</span> <details>
} <summary>view details</summary>
else if (NotificationResponse is { Type: "bite" }) <p>ID: @NotificationResponse.Id</p>
{ <p>Type: @NotificationResponse.Type</p>
<span class="notification-text">@Loc["bit you"]</span> </details>
} break;
else }
{ </div>
<span class="notification-text">
<i>@Loc["unsupported notification type"]</i> <span>@RenderDate(DateTime.Parse(NotificationResponse.CreatedAt))</span>
</span>
<details>
<summary>view details</summary>
<p>ID: @NotificationResponse.Id</p>
<p>Type: @NotificationResponse.Type</p>
</details>
}
</div> </div>
}
<span>@RenderDate(DateTime.Parse(NotificationResponse.CreatedAt))</span>
</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 {