[frontend/components] Fix display of overlength notes with content warnings

This commit is contained in:
Lilian 2025-01-31 21:11:05 +01:00
parent 8ff9aea33a
commit 5205836846
No known key found for this signature in database
2 changed files with 40 additions and 49 deletions

View file

@ -4,30 +4,15 @@
@using Microsoft.Extensions.Localization
@inject IStringLocalizer<Localization> Loc;
@inject IJSRuntime Js;
@if (NoteBase.Cw != null)
{
<div class="note-content @(!_showFull ? "collapsed" : "")">
@if (NoteBase.Cw != null)
{
<div class="cw">
<span class="cw-field"><MfmText Text="@NoteBase.Cw" Emoji="@NoteBase.Emoji" Simple="@true"/></span><button class="cw-button" @onclick="ToggleCw" @onclick:stopPropagation="true">Toggle CW</button>
<span class="cw-field"><MfmText Text="@NoteBase.Cw" Emoji="@NoteBase.Emoji" Simple="@true"/></span>
<button class="cw-button" @onclick="ToggleCw" @onclick:stopPropagation="true">Toggle CW</button>
</div>
<div hidden="@_cwToggle" class="note-body @(_cwToggle ? "hidden" : "") @(Indented ? "indent" : "")" @ref="Body">
<span>
@if (ReplyInaccessible)
{
<span class="reply-inaccessible">
<Icon Name="Icons.ArrowBendLeftUp"/><Icon Name="Icons.Lock"/>
</span>
}
<MfmText Text="@NoteBase.Text" Emoji="@NoteBase.Emoji"/>
</span>
@if (NoteBase.Attachments.Count > 0)
{
<NoteAttachments Attachments="NoteBase.Attachments"/>
}
</div>
}
@if (NoteBase.Cw == null)
{
<div class="note-content @(!_showFull ? "collapsed" : "")">
@if (_overHeight & !_showFull)
{
<button class="truncate-btn" @onclick="ToggleTruncate" @onclick:stopPropagation="true">
@ -35,7 +20,8 @@
</button>
}
<div
class="note-body @(_overHeight ? "too-long" : "") @(Indented ? "indent" : "") @(_showFull ? "show-full" : "")" @ref="Body">
class="note-body @(_overHeight ? "too-long" : "") @(Indented ? "indent" : "") @(_showFull ? "show-full" : "") @(_cwToggle ? "hidden" : "")"
@ref="Body">
<span>
@if (ReplyInaccessible)
{
@ -56,13 +42,12 @@
<span>@Loc["Show less"]</span>
</button>
}
</div>
}
</div>
@code {
[Parameter] public required NoteBase NoteBase { get; set; }
[Parameter] public required bool OverLength { get; set; }
[Parameter] public bool Indented { get; set; }
[Parameter] public bool ReplyInaccessible { get; set; }
@ -76,11 +61,15 @@
protected override async Task OnInitializedAsync()
{
Module = await Js.InvokeAsync<IJSObjectReference>("import", "./Components/Note/NoteBody.razor.js");
if (NoteBase.Cw == null)
{
_cwToggle = false;
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender == false)
if (!firstRender)
{
if (Module != null && _flag == false)
{
@ -90,6 +79,12 @@
_overHeight = true;
StateHasChanged();
}
else
{
_overHeight = false;
StateHasChanged();
}
_flag = true;
}
}
@ -99,6 +94,7 @@
{
_cwToggle = !_cwToggle;
StateHasChanged();
_flag = false;
}
private void ToggleTruncate()

View file

@ -17,7 +17,7 @@
CreatedAt="DateTime.Parse(Note.CreatedAt)">
</NoteMetadata>
</div>
<NoteBody NoteBase="Note" OverLength="@CheckLen()" Indented="Indented" ReplyInaccessible="ReplyInaccessible"/>
<NoteBody NoteBase="Note" Indented="Indented" ReplyInaccessible="ReplyInaccessible"/>
@if (Quote != null)
{
<div @onclick="OpenQuote" @onclick:stopPropagation="true" class="quote">
@ -59,11 +59,6 @@
StateHasChanged();
}
private bool CheckLen()
{
return Note.Text?.Length > 500;
}
private void OpenQuote()
{
NavigationManager.NavigateTo($"/notes/{Quote!.Id}");