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

[frontend/components] Show inline replies on timeline (ISH-344)

Browse source
This commit is contained in:
Lilian 2024-09-28 02:28:37 +02:00
parent f48ff0c4b3
commit 24a16f7fad
No known key found for this signature in database
2 changed files with 38 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
Iceshrimp.Frontend/Components/TimelineNote.razor
View file

@ -5,15 +5,29 @@
@if (Note.Filtered is { Hide: true }) { } @if (Note.Filtered is { Hide: true }) { }
else else
{ {
<div class="note-container" @onclick="OpenNote" id="@Note.Id"> <div class="note-container" id="@Note.Id">
<Note NoteResponse="Note"></Note> @if (Note.Reply is not null)
{
<div class="ancestor-wrapper" @onclick="() => OpenNote(Note.Reply.Id)">
<div class="note-indent">
<img class="user-avatar" src="@Note.User.AvatarUrl"/>
<Line></Line>
</div>
<div class="note">
<NoteComponent Note="Note.Reply" Indented="true"/>
</div>
</div>
}
<div class="link-wrapper" @onclick="() => OpenNote(Note.RenoteId ?? Note.Id)">
<Note NoteResponse="Note"/>
</div>
</div> </div>
} }
@code { @code {
[Parameter] [EditorRequired] public required NoteResponse Note { get; set; } [Parameter] [EditorRequired] public required NoteResponse Note { get; set; }
private void OpenNote() private void OpenNote(string id)
{ {
Navigation.NavigateTo(Note.RenoteId != null ? $"/notes/{Note.RenoteId}" : $"/notes/{Note.Id}"); Navigation.NavigateTo(Note.RenoteId != null ? $"/notes/{Note.RenoteId}" : $"/notes/{Note.Id}");
} }

21
Iceshrimp.Frontend/Components/TimelineNote.razor.css
View file

@ -10,4 +10,25 @@
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
width: 100%; width: 100%;
}
.note-indent {
display: flex;
flex-direction: column;
align-items: center;
}
.user-avatar {
border-radius: 8px;
object-fit: cover;
width: 3em;
height: 3em;
}
.ancestor-wrapper {
display: flex
}
.note {
width: 100%;
} }