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

[frontend] Add display of ascending notes

Browse source
This commit is contained in:
Lilian 2024-05-15 19:51:13 +02:00
parent a30f08c949
commit 74355e8332
No known key found for this signature in database
GPG key ID: 007CA12D692829E1
7 changed files with 103 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
Iceshrimp.Frontend/Components/AscendedNote.razor Normal file
View file

@ -0,0 +1,26 @@
@using Iceshrimp.Shared.Schemas
@using Iceshrimp.Frontend.Components.Note
@inject NavigationManager NavigationManager
<div class="note">
<div class="note-container">
<div class="note-indent">
<img class="user-avatar" src="@Note.User.AvatarUrl"/>
<Line></Line>
</div>
<div class="note" @onclick="OpenNote">
<Note Indented="true" NoteResponse="Note"/>
<div class="pad"></div>
</div>
</div>
</div>
@code {
[Parameter] [EditorRequired] public required NoteResponse Note { get; set; }
private void OpenNote()
{
NavigationManager.NavigateTo($"/notes/{Note.Id}");
}
}

24
Iceshrimp.Frontend/Components/AscendedNote.razor.css Normal file
View file

@ -0,0 +1,24 @@
.note {
width: 100%;
}
.note-indent {
display: flex;
flex-direction: column;
align-items: center;
}
.user-avatar {
border-radius: 8px;
object-fit: cover;
width: 3em;
height: 3em;
}
.note-container {
display: flex;
max-width: 45rem;
min-width: 25rem;
width: 100%;
}
.pad {
height: 1rem;
width: 1px;
}

2
Iceshrimp.Frontend/Components/RecursiveNote.razor
View file

@ -22,7 +22,7 @@
{
<div class="@(Note.Descendants?.Count > 1 ? "replies" : "reply")">
@* @foreach (var note in Note.Descendants!) // We are checking for null 3 lines up. *@
@* We are checking for null 3 lines up. *@
@for (int i = 0; i < Note.Descendants!.Count; i++)
{
var note = Note.Descendants[i];

17
Iceshrimp.Frontend/Components/RecursiveNote.razor.css
View file

@ -19,23 +19,22 @@
width: 100%;
}
.root-note {
max-width: 40rem;
min-width: 15rem;
max-width: 45rem;
min-width: 25rem;
background-color: var(--foreground-color);
padding: 1.5rem 1.5rem 1rem 1.5rem; /* top, left-right, bottom*/
border-radius: 0.75rem;
margin-top: 1rem;
margin-right: 1rem;
margin-left: 1rem;
padding: 1.25rem 1.5rem 1rem; /* top, left-right, bottom*/
@media (max-width: 1000px) {
padding: 1.25rem 1rem 1rem;
}
border-top: solid var(--highlight-color) 0.1rem;
width: 100%;
}
.descendant {
max-width: 40rem;
max-width: 45rem;
min-width: 15rem;
background-color: var(--foreground-color);
padding: 0; /* top, right, bottom, left*/
border-radius: 0.75rem;
margin: 0;
width: 100%;
}

6
Iceshrimp.Frontend/Core/Services/ComposeService.cs Normal file
View file

@ -0,0 +1,6 @@
namespace Iceshrimp.Frontend.Core.Services;
public class ComposeService
{
}

25
Iceshrimp.Frontend/Pages/SingleNote.razor
View file

@ -8,6 +8,16 @@
@if (_init)
{
<div class="scroller">
<div class="wrapper">
@if (Ascendants != null)
{
<div class="ascendants">
@foreach (var note in Ascendants)
{
<AscendedNote Note="note"/>
}
</div>
}
<div class="root-note">
<Note NoteResponse="RootNote"></Note>
</div>
@ -20,6 +30,7 @@
}
</div>
}
</div>
</div>
}
else
@ -30,17 +41,16 @@ else
{
<div>This note does not exist!</div>
}
@code {
[Parameter] public string? NoteId { get; set; }
public NoteResponse? RootNote { get; set; }
private IList<NoteResponse>? Descendants { get; set; }
private IList<NoteResponse>? Ascendants { get; set; }
private bool _init = false;
private bool _error = false;
protected override async Task OnInitializedAsync()
{
}
protected override async Task OnInitializedAsync() { }
protected override async Task OnParametersSetAsync()
{
@ -49,15 +59,18 @@ else
_error = true;
return;
}
RootNote = await ApiService.Notes.GetNote(NoteId);
RootNote = await ApiService.Notes.GetNote(NoteId);
if (RootNote == null)
{
_error = true;
return;
}
Descendants = await ApiService.Notes.GetNoteDescendants(NoteId, default);
Ascendants = await ApiService.Notes.GetNoteAscendants(NoteId, default);
_init = true;
StateHasChanged();
}

26
Iceshrimp.Frontend/Pages/SingleNote.razor.css
View file

@ -1,13 +1,12 @@
.root-note {
max-width: 40rem;
min-width: 15rem;
max-width: 45rem;
min-width: 25rem;
background-color: var(--foreground-color);
padding: 1.5rem 1.5rem 1rem; /* top, left-right, bottom*/
border-radius: 0.75rem;
margin-top: 1rem;
margin-right: 1.5rem;
margin-left: 1.5rem;
width: 100%;
padding-bottom: 1rem;
border-bottom: solid var(--highlight-color) 0.1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.scroller {
height: 100vh;
@ -21,4 +20,17 @@
flex-direction: column;
width: 100%;
align-items: center;
}
.wrapper {
background-color: var(--foreground-color);
border-radius: 0.75rem;
margin-top: 1rem;
margin-bottom: 1rem;
padding-top: 1.5rem;
padding-bottom: 1rem;
}
.ascendants {
padding-left: 1.5rem;
padding-right: 1.5rem;
}