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

[frontend/components] Make InlineEmoji more flexible

Browse source
This commit is contained in:
pancakes 2024-12-02 19:25:25 +10:00 • committed by Laura Hausmann
parent 8484d10e61
commit 87801b8bcf
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
2 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Iceshrimp.Frontend/Components/InlineEmoji.razor
View file

@ -1,15 +1,16 @@
@using Iceshrimp.Shared.Schemas.Web
@if (Url == null)
{
<span class="unicode-reaction">@Name</span>
<span class="unicode-reaction" style="font-size: @Size">@Name</span>
}
else
{
<img class="custom-reaction" src="@Url" alt="@Name"/>
<img class="custom-reaction @(Hover ? "hover" : "") @(Wide ? "wide" : "")" style="font-size: @Size" src="@Url" alt="@Name"/>
}
@code {
[Parameter, EditorRequired] public required string Name { get; set; }
[Parameter, EditorRequired] public required string? Url { get; set; }
[Parameter] public bool Hover { get; set; } = false;
[Parameter] public string Size { get; set; } = "1.5em";
[Parameter] public bool Wide { get; set; } = false;
}

16
Iceshrimp.Frontend/Components/InlineEmoji.razor.css
View file

@ -4,12 +4,24 @@
height: 1em;
object-fit: contain;
vertical-align: middle;
font-size: 1.5em;
}
.custom-reaction.hover {
transition-duration: 250ms;
}
.custom-reaction.hover:hover {
transform: scale(1.5);
z-index: +1;
}
.custom-reaction.wide {
width: auto;
object-fit: unset;
}
.unicode-reaction {
display: inline-block;
vertical-align: middle;
font-size: 1.5em;
line-height: 1;
}