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

[frontend] Add emoji picker and add it to Note

Browse source
This commit is contained in:
Lilian 2024-06-28 00:43:19 +02:00 • committed by Laura Hausmann
parent c9b282a90e
commit da124c5c98
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
5 changed files with 124 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
Iceshrimp.Frontend/Components/EmojiPicker.razor Normal file
View file

@ -0,0 +1,38 @@
@using Iceshrimp.Frontend.Core.Services
@using Iceshrimp.Shared.Schemas
@inject ApiService Api
@if (_display){
<div class="emoji-picker">
@foreach (var el in EmojiList)
{
<div class="emoji">
<img @onclick="() => Select(el)" src="@el.PublicUrl" alt="@el.Name"/>
</div>
}
</div>
}
@code {
[Parameter] [EditorRequired] public required EventCallback<EmojiResponse> OnEmojiSelect { get; set; }
private List<EmojiResponse> EmojiList { get; set; } = [];
private bool _display = false;
protected override async Task OnInitializedAsync()
{
EmojiList = await Api.Emoji.GetAllEmoji();
}
private async void Select(EmojiResponse emoji)
{
await OnEmojiSelect.InvokeAsync(emoji);
_display = false;
StateHasChanged();
}
public void Toggle()
{
_display = !_display;
}
}

23
Iceshrimp.Frontend/Components/EmojiPicker.razor.css Normal file
View file

@ -0,0 +1,23 @@
.emoji-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
grid-template-rows: repeat(auto-fill, minmax(2.5rem, 1fr));
position: absolute;
background-color: var(--foreground-color);
border: var(--highlight-color) solid 0.1rem;
padding: 1rem;
border-radius: 1rem;
min-width: 15rem;
min-height: 10rem;
top: 3rem;
left: -210%;
overflow: scroll;
}
.emoji {
> img {
object-fit: cover;
height: 2rem;
width: 2rem;
}
}

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

@ -3,20 +3,20 @@
@using Iceshrimp.Shared.Schemas
@inject ApiService ApiService;
@inject NavigationManager NavigationManager
@inject ComposeService ComposeService
@inject ComposeService ComposeService
<CascadingValue Value="this">
<div class="note-header">
<NoteUserInfo
AvatarUrl="@Note.User.AvatarUrl"
DisplayName="@Note.User.DisplayName"
Username="@Note.User.Username"
Username="@Note.User.Username"
Host="@Note.User.Host"
Indented="Indented"
/>
<NoteMetadata
Indented="Indented"/>
<NoteMetadata
Visibility="@Note.Visibility"
InstanceName="@Note.User.InstanceName"
CreatedAt="DateTime.Parse(Note.CreatedAt)"></NoteMetadata>
CreatedAt="DateTime.Parse(Note.CreatedAt)">
</NoteMetadata>
</div>
<NoteBody NoteBase="Note" OverLength="@CheckLen()" Indented="Indented"/>
@if (Quote != null)
@ -28,20 +28,21 @@
@if (!AsQuote)
{
@* FIXME: Allow renotes when the post is from the current user *@
<NoteFooter
Reactions="Note.Reactions"
Likes="Note.Likes"
IsLiked="Note.Liked"
Renotes="Note.Renotes"
RenotePossible="@(Note.Visibility == NoteVisibility.Public || Note.Visibility == NoteVisibility.Home)"
/>
<NoteFooter
Reactions="Note.Reactions"
Likes="Note.Likes"
IsLiked="Note.Liked"
Renotes="Note.Renotes"
RenotePossible="@(Note.Visibility == NoteVisibility.Public || Note.Visibility == NoteVisibility.Home)"/>
}
</CascadingValue>
@code {
[Parameter][EditorRequired] public required NoteBase Note { get; set; }
[Parameter] public bool Indented { get; set; }
[Parameter] public NoteBase? Quote { get; set; }
[Parameter] public bool AsQuote { get; set; }
[Parameter] [EditorRequired] public required NoteBase Note { get; set; }
[Parameter] public bool Indented { get; set; }
[Parameter] public NoteBase? Quote { get; set; }
[Parameter] public bool AsQuote { get; set; }
private bool CheckLen()
{
return Note.Text?.Length > 500;
@ -52,14 +53,36 @@
NavigationManager.NavigateTo($"/notes/{Quote!.Id}");
}
public void React(string name, bool target)
//FIXME: This needs to be rewritten.
public void React(string name, bool target, string? url = null)
{
var index = Note.Reactions.FindIndex(x => x.Name == name);
switch (target)
{
case true:
ApiService.Notes.ReactToNote(Note.Id, name);
Note.Reactions[index].Count++;
if (index == -1 && url != null)
{
Note.Reactions.Add(new NoteReactionSchema
{
NoteId = Note.Id,
Name = name,
Count = 1,
Reacted = true,
Url = url
});
}
else
{
if (Note.Reactions[index].Reacted != true)
{
Note.Reactions[index].Count++;
}
break;
}
StateHasChanged();
break;
case false:
@ -72,6 +95,7 @@
{
Note.Reactions[index].Count--;
}
StateHasChanged();
break;
}
@ -111,4 +135,5 @@
{
ComposeService.ComposeDialog?.OpenDialog(null, Note);
}
}

15
Iceshrimp.Frontend/Components/Note/NoteFooter.razor
View file

@ -1,4 +1,5 @@
@using Iceshrimp.Assets.PhosphorIcons
@using Iceshrimp.Frontend.Core.Services
@using Iceshrimp.Shared.Schemas
<div class="note-footer">
@if (Reactions.Count > 0)
@ -41,8 +42,9 @@
<span class="like-count">@Likes</span>
}
</button>
<button class="btn" @onclick:stopPropagation="true">
<button class="btn positioned" @onclick="ToggleEmojiPicker" @onclick:stopPropagation="true">
<Icon Name="Icons.Smiley" Size="1.3em"/>
<EmojiPicker @ref="EmojiPicker" OnEmojiSelect="React" />
</button>
<button class="btn" @onclick="Quote" @onclick:stopPropagation="true">
<Icon Name="Icons.Quotes" Size="1.3em"/>
@ -58,6 +60,7 @@
[Parameter] [EditorRequired] public required bool IsLiked { get; set; }
[Parameter] [EditorRequired] public required int Renotes { get; set; }
[Parameter] public bool RenotePossible { get; set; }
private EmojiPicker EmojiPicker { get; set; }
[CascadingParameter] NoteComponent NoteComponent { get; set; } = null!;
@ -81,4 +84,14 @@
NoteComponent.DoQuote();
}
private void ToggleEmojiPicker()
{
EmojiPicker.Toggle();
}
private void React(EmojiResponse emoji)
{
NoteComponent.React(emoji.Name, true, url: emoji.PublicUrl);
}
}

5
Iceshrimp.Frontend/Components/Note/NoteFooter.razor.css
View file

@ -17,3 +17,8 @@
.renote-count {
margin-left: 0.3em;
}
.positioned {
position: relative;
top: 0;
}