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

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

82
Iceshrimp.Frontend/Components/Note/NoteBody.razor
View file

@ -4,12 +4,24 @@
@using Microsoft.Extensions.Localization @using Microsoft.Extensions.Localization
@inject IStringLocalizer<Localization> Loc; @inject IStringLocalizer<Localization> Loc;
@inject IJSRuntime Js; @inject IJSRuntime Js;
@if (NoteBase.Cw != null)
{ <div class="note-content @(!_showFull ? "collapsed" : "")">
<div class="cw"> @if (NoteBase.Cw != null)
<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 class="cw">
<div hidden="@_cwToggle" class="note-body @(_cwToggle ? "hidden" : "") @(Indented ? "indent" : "")" @ref="Body"> <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>
}
@if (_overHeight & !_showFull)
{
<button class="truncate-btn" @onclick="ToggleTruncate" @onclick:stopPropagation="true">
<span>@Loc["Show more"]</span>
</button>
}
<div
class="note-body @(_overHeight ? "too-long" : "") @(Indented ? "indent" : "") @(_showFull ? "show-full" : "") @(_cwToggle ? "hidden" : "")"
@ref="Body">
<span> <span>
@if (ReplyInaccessible) @if (ReplyInaccessible)
{ {
@ -24,63 +36,40 @@
<NoteAttachments Attachments="NoteBase.Attachments"/> <NoteAttachments Attachments="NoteBase.Attachments"/>
} }
</div> </div>
} @if (_overHeight & _showFull)
@if (NoteBase.Cw == null) {
{
<div class="note-content @(!_showFull ? "collapsed" : "")">
@if (_overHeight & !_showFull)
{
<button class="truncate-btn" @onclick="ToggleTruncate" @onclick:stopPropagation="true">
<span>@Loc["Show more"]</span>
</button>
}
<div
class="note-body @(_overHeight ? "too-long" : "") @(Indented ? "indent" : "") @(_showFull ? "show-full" : "")" @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 (_overHeight & _showFull)
{
<button class="truncate-btn show-less" @onclick="ToggleTruncate" @onclick:stopPropagation="true"> <button class="truncate-btn show-less" @onclick="ToggleTruncate" @onclick:stopPropagation="true">
<span>@Loc["Show less"]</span> <span>@Loc["Show less"]</span>
</button> </button>
} }
</div> </div>
}
@code { @code {
[Parameter] public required NoteBase NoteBase { get; set; } [Parameter] public required NoteBase NoteBase { get; set; }
[Parameter] public required bool OverLength { get; set; }
[Parameter] public bool Indented { get; set; } [Parameter] public bool Indented { get; set; }
[Parameter] public bool ReplyInaccessible { get; set; } [Parameter] public bool ReplyInaccessible { get; set; }
private IJSObjectReference? Module { get; set; } private IJSObjectReference? Module { get; set; }
private ElementReference Body { get; set; } private ElementReference Body { get; set; }
private bool _showFull = false; private bool _showFull = false;
private bool _cwToggle = true; private bool _cwToggle = true;
private bool _overHeight = false; private bool _overHeight = false;
private bool _flag = false; private bool _flag = false;
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
Module = await Js.InvokeAsync<IJSObjectReference>("import", "./Components/Note/NoteBody.razor.js"); Module = await Js.InvokeAsync<IJSObjectReference>("import", "./Components/Note/NoteBody.razor.js");
if (NoteBase.Cw == null)
{
_cwToggle = false;
}
} }
protected override async Task OnAfterRenderAsync(bool firstRender) protected override async Task OnAfterRenderAsync(bool firstRender)
{ {
if (firstRender == false) if (!firstRender)
{ {
if (Module != null && _flag == false) if (Module != null && _flag == false)
{ {
@ -90,7 +79,13 @@
_overHeight = true; _overHeight = true;
StateHasChanged(); StateHasChanged();
} }
_flag = true; else
{
_overHeight = false;
StateHasChanged();
}
_flag = true;
} }
} }
} }
@ -99,6 +94,7 @@
{ {
_cwToggle = !_cwToggle; _cwToggle = !_cwToggle;
StateHasChanged(); StateHasChanged();
_flag = false;
} }
private void ToggleTruncate() private void ToggleTruncate()

7
Iceshrimp.Frontend/Components/Note/NoteComponent.razor
View file

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