[frontend] Automatically scroll Note into view on SingleNote page
This commit is contained in:
parent
004ddedde3
commit
80d97d1a5d
3 changed files with 34 additions and 4 deletions
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -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;
|
||||||
|
|
11
Iceshrimp.Frontend/Pages/SingleNote.razor.js
Normal file
11
Iceshrimp.Frontend/Pages/SingleNote.razor.js
Normal 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)
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue