From 74355e83329ada972b7a0f2f33ac18d3e412b6d2 Mon Sep 17 00:00:00 2001 From: Lilian Date: Wed, 15 May 2024 19:51:13 +0200 Subject: [PATCH] [frontend] Add display of ascending notes --- .../Components/AscendedNote.razor | 26 +++++++++++++++++++ .../Components/AscendedNote.razor.css | 24 +++++++++++++++++ .../Components/RecursiveNote.razor | 2 +- .../Components/RecursiveNote.razor.css | 17 ++++++------ .../Core/Services/ComposeService.cs | 6 +++++ Iceshrimp.Frontend/Pages/SingleNote.razor | 25 +++++++++++++----- Iceshrimp.Frontend/Pages/SingleNote.razor.css | 26 ++++++++++++++----- 7 files changed, 103 insertions(+), 23 deletions(-) create mode 100644 Iceshrimp.Frontend/Components/AscendedNote.razor create mode 100644 Iceshrimp.Frontend/Components/AscendedNote.razor.css create mode 100644 Iceshrimp.Frontend/Core/Services/ComposeService.cs diff --git a/Iceshrimp.Frontend/Components/AscendedNote.razor b/Iceshrimp.Frontend/Components/AscendedNote.razor new file mode 100644 index 00000000..376fa025 --- /dev/null +++ b/Iceshrimp.Frontend/Components/AscendedNote.razor @@ -0,0 +1,26 @@ +@using Iceshrimp.Shared.Schemas +@using Iceshrimp.Frontend.Components.Note +@inject NavigationManager NavigationManager +
+
+
+ + +
+
+ +
+
+
+
+ + +@code { + [Parameter] [EditorRequired] public required NoteResponse Note { get; set; } + + private void OpenNote() + { + NavigationManager.NavigateTo($"/notes/{Note.Id}"); + } + +} \ No newline at end of file diff --git a/Iceshrimp.Frontend/Components/AscendedNote.razor.css b/Iceshrimp.Frontend/Components/AscendedNote.razor.css new file mode 100644 index 00000000..cd0d1ee3 --- /dev/null +++ b/Iceshrimp.Frontend/Components/AscendedNote.razor.css @@ -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; +} \ No newline at end of file diff --git a/Iceshrimp.Frontend/Components/RecursiveNote.razor b/Iceshrimp.Frontend/Components/RecursiveNote.razor index f67eca51..6d849119 100644 --- a/Iceshrimp.Frontend/Components/RecursiveNote.razor +++ b/Iceshrimp.Frontend/Components/RecursiveNote.razor @@ -22,7 +22,7 @@ {
- @* @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]; diff --git a/Iceshrimp.Frontend/Components/RecursiveNote.razor.css b/Iceshrimp.Frontend/Components/RecursiveNote.razor.css index b8b7adc5..d03080e9 100644 --- a/Iceshrimp.Frontend/Components/RecursiveNote.razor.css +++ b/Iceshrimp.Frontend/Components/RecursiveNote.razor.css @@ -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%; } diff --git a/Iceshrimp.Frontend/Core/Services/ComposeService.cs b/Iceshrimp.Frontend/Core/Services/ComposeService.cs new file mode 100644 index 00000000..63e4a700 --- /dev/null +++ b/Iceshrimp.Frontend/Core/Services/ComposeService.cs @@ -0,0 +1,6 @@ +namespace Iceshrimp.Frontend.Core.Services; + +public class ComposeService +{ + +} \ No newline at end of file diff --git a/Iceshrimp.Frontend/Pages/SingleNote.razor b/Iceshrimp.Frontend/Pages/SingleNote.razor index e08f953e..92549e00 100644 --- a/Iceshrimp.Frontend/Pages/SingleNote.razor +++ b/Iceshrimp.Frontend/Pages/SingleNote.razor @@ -8,6 +8,16 @@ @if (_init) {
+
+ @if (Ascendants != null) + { +
+ @foreach (var note in Ascendants) + { + + } +
+ }
@@ -20,6 +30,7 @@ }
} +
} else @@ -30,17 +41,16 @@ else {
This note does not exist!
} + @code { [Parameter] public string? NoteId { get; set; } public NoteResponse? RootNote { get; set; } private IList? Descendants { get; set; } + private IList? 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(); } diff --git a/Iceshrimp.Frontend/Pages/SingleNote.razor.css b/Iceshrimp.Frontend/Pages/SingleNote.razor.css index 888b7892..0a242e7c 100644 --- a/Iceshrimp.Frontend/Pages/SingleNote.razor.css +++ b/Iceshrimp.Frontend/Pages/SingleNote.razor.css @@ -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; } \ No newline at end of file