[frontend] Automatically scroll Note into view on SingleNote page

This commit is contained in:
Lilian 2024-06-16 18:37:51 +02:00
parent 004ddedde3
commit 80d97d1a5d
No known key found for this signature in database
GPG key ID: 007CA12D692829E1
3 changed files with 34 additions and 4 deletions

View file

@ -4,6 +4,7 @@
@using Iceshrimp.Frontend.Core.Services @using Iceshrimp.Frontend.Core.Services
@using Iceshrimp.Frontend.Components.Note @using Iceshrimp.Frontend.Components.Note
@inject ApiService ApiService @inject ApiService ApiService
@inject IJSRuntime Js
@if (_init) @if (_init)
{ {
@ -19,7 +20,7 @@
} }
</div> </div>
} }
<div class="root-note"> <div @ref="RootNoteRef" class="root-note">
<Note NoteResponse="RootNote"></Note> <Note NoteResponse="RootNote"></Note>
</div> </div>
@if (Descendants != null) @if (Descendants != null)
@ -49,6 +50,8 @@ else
public NoteResponse? RootNote { get; set; } public NoteResponse? RootNote { get; set; }
private IList<NoteResponse>? Descendants { get; set; } private IList<NoteResponse>? Descendants { get; set; }
private IList<NoteResponse>? Ascendants { get; set; } private IList<NoteResponse>? Ascendants { get; set; }
private IJSObjectReference? Module { get; set; }
private ElementReference RootNoteRef { get; set; }
private bool _init = false; private bool _init = false;
private bool _error = false; private bool _error = false;
@ -77,4 +80,17 @@ else
StateHasChanged(); StateHasChanged();
} }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
Module = await Js.InvokeAsync<IJSObjectReference>("import", "/Pages/SingleNote.razor.js");
}
if (_init)
{
await Module.InvokeVoidAsync("ScrollIntoView", RootNoteRef);
}
}
} }

View file

@ -1,6 +1,6 @@
.root-note { .root-note {
max-width: 45rem; max-width: 45rem;
/*min-width: 25rem;*/ min-width: 25rem;
background-color: var(--foreground-color); background-color: var(--foreground-color);
width: 100%; width: 100%;
padding-bottom: 1rem; padding-bottom: 1rem;
@ -10,6 +10,9 @@
height: 100vh; height: 100vh;
overflow-y: scroll; overflow-y: scroll;
overflow-x: clip; overflow-x: clip;
@media (max-width: 1000px) {
padding-bottom: 5rem;
}
} }
.descendants { .descendants {
display: flex; display: flex;

View file

@ -0,0 +1,11 @@
export function GetScrollTop(ref) {
return ref.scrollTop;
}
export function SetScrollTop(ref, number) {
ref.scrollTop = number;
}
export function ScrollIntoView(ref) {
ref.scrollIntoView(true)
}