[frontend] Refactor EmojiPicker

This commit is contained in:
Lilian 2024-06-30 19:40:21 +02:00
parent 47bda1428b
commit 3d3a7da73e
No known key found for this signature in database
4 changed files with 15 additions and 17 deletions

View file

@ -39,9 +39,9 @@
<button class="footer-btn" @onclick="ToggleCw"> <button class="footer-btn" @onclick="ToggleCw">
<Icon Name="Icons.EyeSlash" Size="1.3rem"></Icon> <Icon Name="Icons.EyeSlash" Size="1.3rem"></Icon>
</button> </button>
<button class="footer-btn positioned" @onclick="ToggleEmojiPicker"> <button class="footer-btn" @onclick="ToggleEmojiPicker">
<Icon Name="Icons.Smiley" Size="1.3rem"></Icon> <Icon Name="Icons.Smiley" Size="1.3rem"></Icon>
<EmojiPicker @ref="EmojiPicker" OnEmojiSelect="AddEmoji" Fixed="true"></EmojiPicker> <EmojiPicker OnEmojiSelect="AddEmoji" />
</button> </button>
<div class="file-input"> <div class="file-input">
<InputFile @ref="UploadInput" OnChange="Upload">Upload!</InputFile> <InputFile @ref="UploadInput" OnChange="Upload">Upload!</InputFile>
@ -56,8 +56,8 @@
private InputFile UploadInput { get; set; } = null!; private InputFile UploadInput { get; set; } = null!;
private NoteBase? ReplyOrQuote { get; set; } private NoteBase? ReplyOrQuote { get; set; }
private string? TextPlaceholder { get; set; } private string? TextPlaceholder { get; set; }
private EmojiPicker EmojiPicker { get; set; } = null!;
private ElementReference Textarea { get; set; } private ElementReference Textarea { get; set; }
private EmojiPicker EmojiPicker { get; set; } = null!;
private NoteCreateRequest NoteDraft { get; set; } = new() private NoteCreateRequest NoteDraft { get; set; } = new()
{ {

View file

@ -1,6 +1,6 @@
@using Iceshrimp.Frontend.Core.Services @using Iceshrimp.Frontend.Core.Services
@using Iceshrimp.Shared.Schemas @using Iceshrimp.Shared.Schemas
@inject ApiService Api @inject EmojiService EmojiService
@if (_display) @if (_display)
{ {
@ -15,15 +15,15 @@
} }
@code { @code {
[Parameter] public bool Fixed { get; set; }
[Parameter] [EditorRequired] public required EventCallback<EmojiResponse> OnEmojiSelect { get; set; } [Parameter] [EditorRequired] public required EventCallback<EmojiResponse> OnEmojiSelect { get; set; }
[Parameter] public bool Fixed { get; set; } = false;
private List<EmojiResponse> EmojiList { get; set; } = []; private List<EmojiResponse> EmojiList { get; set; } = [];
private bool _display = false; private bool _display = false;
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
EmojiList = await Api.Emoji.GetAllEmoji(); EmojiList = await EmojiService.GetEmoji();
} }
private async void Select(EmojiResponse emoji) private async void Select(EmojiResponse emoji)
@ -33,8 +33,9 @@
StateHasChanged(); StateHasChanged();
} }
public void Toggle() public async Task Toggle()
{ {
_display = !_display; _display = !_display;
await InvokeAsync(StateHasChanged);
} }
} }

View file

@ -9,10 +9,10 @@
border-radius: 1rem; border-radius: 1rem;
min-width: 15rem; min-width: 15rem;
min-height: 10rem; min-height: 10rem;
top: 3rem;
left: -210%;
overflow: scroll; overflow: scroll;
z-index: 100; z-index: 100;
top: 2.5rem;
left: -6rem;
} }
.emoji { .emoji {
@ -23,7 +23,3 @@
} }
} }
.fixed {
position: fixed;
bottom: 10%;
}

View file

@ -59,7 +59,7 @@
[Parameter] [EditorRequired] public required bool IsLiked { get; set; } [Parameter] [EditorRequired] public required bool IsLiked { get; set; }
[Parameter] [EditorRequired] public required int Renotes { get; set; } [Parameter] [EditorRequired] public required int Renotes { get; set; }
[Parameter] public bool RenotePossible { get; set; } [Parameter] public bool RenotePossible { get; set; }
private EmojiPicker? EmojiPicker { get; set; } private EmojiPicker EmojiPicker { get; set; } = null!;
[CascadingParameter] NoteComponent NoteComponent { get; set; } = null!; [CascadingParameter] NoteComponent NoteComponent { get; set; } = null!;
@ -83,9 +83,10 @@
NoteComponent.DoQuote(); NoteComponent.DoQuote();
} }
private void ToggleEmojiPicker()
private async Task ToggleEmojiPicker()
{ {
EmojiPicker?.Toggle(); await EmojiPicker.Toggle();
} }
private void React(EmojiResponse emoji) private void React(EmojiResponse emoji)