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

[frontend/pages] Move emoji entry into a component

Browse source
This commit is contained in:
pancakes 2025-01-28 00:01:54 +10:00 • committed by Laura Hausmann
parent fdca264241
commit a9378fbdae
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
4 changed files with 84 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
Iceshrimp.Frontend/Components/EmojiManagementEntry.razor Normal file
View file

@ -0,0 +1,37 @@
@using Iceshrimp.Frontend.Localization
@using Iceshrimp.Shared.Schemas.Web
@using Microsoft.Extensions.Localization
@using Iceshrimp.Assets.PhosphorIcons
@inject IStringLocalizer<Localization> Loc;
<div class="emoji-entry">
<InlineEmoji Name="@Emoji.Name" Url="@Emoji.PublicUrl" Size="3rem"/>
<div class="emoji-details">
<span class="emoji-name">@Emoji.Name</span>
<span>
@foreach (var alias in Emoji.Aliases)
{
<span class="emoji-alias">@alias</span>
}
</span>
<span class="labels">
@if (Source == "remote")
{
<Icon Name="Icons.ArrowSquareOut" title="@Loc["Remote"]"/>
}
@if (Emoji.Sensitive)
{
<Icon Name="Icons.EyeSlash" title="@Loc["Sensitive"]"/>
}
@if (!string.IsNullOrWhiteSpace(Emoji.License))
{
<Icon Name="Icons.Article" title="@Emoji.License"/>
}
</span>
</div>
</div>
@code {
[Parameter, EditorRequired] public required EmojiResponse Emoji { get; set; }
[Parameter, EditorRequired] public required string Source { get; set; }
}

46
Iceshrimp.Frontend/Components/EmojiManagementEntry.razor.css Normal file
View file

@ -0,0 +1,46 @@
.emoji-entry {
display: flex;
gap: 0.5rem;
padding: 0.5rem;
background-color: var(--foreground-color);
border-radius: 0.5rem;
cursor: pointer;
}
.emoji-entry:hover {
background-color: var(--hover-color);
}
.emoji-details {
display: flex;
flex-direction: column;
text-wrap: wrap;
word-break: break-all;
word-wrap: break-word;
}
.emoji-name::before,
.emoji-name::after {
display: inline;
content: ":";
opacity: 0.7;
}
.emoji-alias {
opacity: 0.7;
font-size: 0.8em;
}
.emoji-alias::before,
.emoji-alias::after {
display: inline;
content: ":";
}
::deep {
.labels .ph {
display: inline-block;
line-height: 1;
color: var(--notice-color);
}
}

27
Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor
View file

@ -38,32 +38,7 @@
<div class="emoji-list"> <div class="emoji-list">
@foreach (var emoji in category.Value) @foreach (var emoji in category.Value)
{ {
<div class="emoji-entry"> <EmojiManagementEntry Emoji="@emoji" Source="@Source"/>
<InlineEmoji Name="@emoji.Name" Url="@emoji.PublicUrl" Size="3rem"/>
<div class="emoji-details">
<span class="emoji-name">@emoji.Name</span>
<span>
@foreach (var alias in emoji.Aliases)
{
<span class="emoji-alias">@alias</span>
}
</span>
<span class="labels">
@if (Source == "remote")
{
<Icon Name="Icons.ArrowSquareOut" title="@Loc["Remote"]"/>
}
@if (emoji.Sensitive)
{
<Icon Name="Icons.EyeSlash" title="@Loc["Sensitive"]"/>
}
@if (!string.IsNullOrWhiteSpace(emoji.License))
{
<Icon Name="Icons.Article" title="@emoji.License"/>
}
</span>
</div>
</div>
} }
</div> </div>
} }

42
Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor.css
View file

@ -25,48 +25,6 @@
width: 100%; width: 100%;
} }
.emoji-entry {
display: flex;
gap: 0.5rem;
padding: 0.5rem;
background-color: var(--foreground-color);
border-radius: 0.5rem;
}
.emoji-details {
display: flex;
flex-direction: column;
text-wrap: wrap;
word-break: break-all;
word-wrap: break-word;
}
.emoji-name::before,
.emoji-name::after {
display: inline;
content: ":";
opacity: 0.7;
}
.emoji-alias {
opacity: 0.7;
font-size: 0.8em;
}
.emoji-alias::before,
.emoji-alias::after {
display: inline;
content: ":";
}
::deep {
.labels .ph {
display: inline-block;
line-height: 1;
color: var(--notice-color);
}
}
@media (max-width: 1000px) { @media (max-width: 1000px) {
.emoji-list { .emoji-list {
grid-template-columns: 1fr; grid-template-columns: 1fr;