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

[frontend/components] Add character count to compose and disable posting notes that are too long

Browse source
This commit is contained in:
pancakes 2024-12-18 13:10:31 +10:00 • committed by Laura Hausmann
parent b6d8f9c00b
commit f0ea307334
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
3 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
Iceshrimp.Frontend/Components/Compose.razor
View file

@ -23,7 +23,7 @@
<Icon Name="Icons.X"/> <Icon Name="Icons.X"/>
</button> </button>
<Dropdown TBind="NoteVisibility" Elements="@DropDownCreate()" @bind-Value="NoteDraft.Visibility"/> <Dropdown TBind="NoteVisibility" Elements="@DropDownCreate()" @bind-Value="NoteDraft.Visibility"/>
<StateButton OnClick="SendNote" @ref="SendButton" ExtraClasses="post-btn" AriaLabel="post"> <StateButton OnClick="SendNote" @ref="SendButton" ExtraClasses="post-btn" AriaLabel="post" Disabled="@(NoteLength - ((NoteDraft.Cw?.Length ?? 0) + NoteDraft.Text.Length) < 0)">
<Initial> <Initial>
@Loc["ComposeNote"]<Icon Name="Icons.PaperPlaneRight"/> @Loc["ComposeNote"]<Icon Name="Icons.PaperPlaneRight"/>
</Initial> </Initial>
@ -46,7 +46,7 @@
} }
@if (NoteDraft.Cw != null) @if (NoteDraft.Cw != null)
{ {
<input @bind="NoteDraft.Cw" class="input cw-field" placeholder="Content Warning" <input @bind="NoteDraft.Cw" @bind:event="oninput" class="input cw-field" placeholder="Content Warning"
aria-label="content warning"/> aria-label="content warning"/>
<hr class="separator"/> <hr class="separator"/>
} }
@ -69,6 +69,7 @@
</button> </button>
</div> </div>
<div class="buttons"> <div class="buttons">
<span title="@Loc["Character limit"]" aria-label="character limit">@(NoteLength - ((NoteDraft.Cw?.Length ?? 0) + NoteDraft.Text.Length))</span>
<button class="btn" title="@Loc["Preview"]" @onclick="() => Preview = !Preview" <button class="btn" title="@Loc["Preview"]" @onclick="() => Preview = !Preview"
aria-label="preview"> aria-label="preview">
<Icon Name="Icons.Binoculars" Size="1.3rem"></Icon> <Icon Name="Icons.Binoculars" Size="1.3rem"></Icon>
@ -105,6 +106,7 @@
private StateButton SendButton { get; set; } = null!; private StateButton SendButton { get; set; } = null!;
private bool Preview { get; set; } private bool Preview { get; set; }
private List<EmojiResponse> EmojiList { get; set; } = []; private List<EmojiResponse> EmojiList { get; set; } = [];
private int NoteLength { get; set; }
private NoteCreateRequest NoteDraft { get; set; } = new() private NoteCreateRequest NoteDraft { get; set; } = new()
{ {
@ -311,6 +313,10 @@
_module = await Js.InvokeAsync<IJSObjectReference>("import", _module = await Js.InvokeAsync<IJSObjectReference>("import",
"./Components/Compose.razor.js"); "./Components/Compose.razor.js");
EmojiList = await EmojiService.GetEmojiAsync(); EmojiList = await EmojiService.GetEmojiAsync();
var instance = await MetadataService.Instance.Value;
NoteLength = instance.Limits.NoteLength;
ComposeService.ComposeDialog = this; ComposeService.ComposeDialog = this;
} }
} }

7
Iceshrimp.Frontend/Components/Compose.razor.css
View file

@ -89,6 +89,13 @@
} }
} }
::deep {
.post-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
}
.btn { .btn {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
height: max-content; height: max-content;

3
Iceshrimp.Frontend/Components/StateButton.razor
View file

@ -1,4 +1,4 @@
<button @onclick="OnClick" class="@ExtraClasses" aria-label="@AriaLabel"> <button @onclick="OnClick" class="@ExtraClasses" aria-label="@AriaLabel" disabled="@Disabled">
@(State switch @(State switch
{ {
StateEnum.Initial => Initial, StateEnum.Initial => Initial,
@ -18,6 +18,7 @@
[Parameter] public string? ExtraClasses { get; set; } [Parameter] public string? ExtraClasses { get; set; }
// this is godawful but properties can't have dashes and I'm not actually sure how else to do this: // this is godawful but properties can't have dashes and I'm not actually sure how else to do this:
[Parameter] public string? AriaLabel { get; set; } [Parameter] public string? AriaLabel { get; set; }
[Parameter] public bool? Disabled { get; set; }
public StateEnum State { get; set; } public StateEnum State { get; set; }
public enum StateEnum public enum StateEnum