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) @if (Url == null)
{ {
<span class="unicode-reaction">@Name</span> <span class="unicode-reaction" style="font-size: @Size">@Name</span>
} }
else 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 { @code {
[Parameter, EditorRequired] public required string Name { get; set; } [Parameter, EditorRequired] public required string Name { get; set; }
[Parameter, EditorRequired] public required string? Url { 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; height: 1em;
object-fit: contain; object-fit: contain;
vertical-align: middle; 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 { .unicode-reaction {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
font-size: 1.5em;
line-height: 1; line-height: 1;
} }