Move the app's markup to the D components and Tailwind 4
The pages and components now use the daisyUI wrappers and the neo-* utilities instead of Bulma and the neomorph classes: - buttons are DButton, with pressed states as Active; - nav links are btn / btn-active; - the filter and composer selects are DSelect with a prefix icon; - the composer's fields are DInput and DTextarea; - the message options and scope pickers are DDropdown, which now close on an outside click and on Escape; - the settings and admin sections are DCollapse; - the dark-mode switch is a DToggle with sun and moon icons; - the hue slider is a DRange on the rainbow track. DropdownButton, OpenDownContainer and LoadingData are gone. The loader is DLoading, whose animation runs; the old one's keyframes were never defined. Icons coloured with Bulma's has-text-* now get daisyUI's text-info, success, warning and error, which had no rules before. Tailwind 3 to 4 fixes: - space-x/y become gap, which also handles the flex-col-reverse feeds; - !rounded-lg becomes rounded-lg!; - drop-shadow becomes drop-shadow-sm; - text-md becomes text-base. The thread page marks its message with Content's new Highlighted parameter rather than a second shadow size. neo.css: a select's prefix icon gets the room daisyUI leaves for a span.label, and the inner select lets the well show through. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
This commit is contained in:
thepraandClaude Opus 5.5 committed
1 parent
90e4b9200c
commit
3ad4f55b11
17 files changed
+383
-562
No files matched your search
+60
-90
@@ -1,29 +1,29 @@
|
||||
@inherits LocalizableComponentBase
|
||||
|
||||
<div class="flex space-x-3 w-full neomorph is-nxxsmall rounded-xl @CssContainer">
|
||||
<div class="flex gap-3 w-full rounded-xl neo-raised @(Highlighted ? "neo-sm" : "neo-2xs") @CssContainer">
|
||||
|
||||
<div class="flex flex-col py-3 pl-3 md:py-4 md:pl-4 flex-none rounded-l-xl bg-cover bg-no-repeat bg-center"
|
||||
style="background-image:linear-gradient(to left, var(--background), transparent), url('@(Message.User?.BackgroundUrl)');">
|
||||
style="background-image:linear-gradient(to left, var(--color-base-100), transparent), url('@(Message.User?.BackgroundUrl)');">
|
||||
|
||||
<a class="block h-12 w-12 md:h-16 md:w-16" href="@Message.User.ProfileUrl" title="@Message.User.UserName">
|
||||
<img alt="@Message.User.UserName" class="h-12 w-12 md:h-16 md:w-16 object-cover rounded-full neomorph is-nxxsmall" src="@(Message.User.PictureUrl ?? "/imgs/icon-192.png")" />
|
||||
<img alt="@Message.User.UserName" class="h-12 w-12 md:h-16 md:w-16 object-cover rounded-full neo-raised neo-2xs" src="@(Message.User.PictureUrl ?? "/imgs/icon-192.png")" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col space-y-3 flex-1 py-3 pr-3 md:py-4 md:pr-4 min-w-0">
|
||||
<div class="flex flex-col gap-3 flex-1 py-3 pr-3 md:py-4 md:pr-4 min-w-0">
|
||||
|
||||
<div class="flex flex-col space-y-1 flex-1 min-w-0">
|
||||
<div class="flex flex-col gap-1 flex-1 min-w-0">
|
||||
@if (Message.BoostingUser != null)
|
||||
{
|
||||
<p class="inline-flex flex-1 space-x-2 min-w-0 text-xs text-xs">
|
||||
<p class="inline-flex flex-1 gap-2 min-w-0 text-xs">
|
||||
<a class="font-bold" href="@Message.BoostingUser.ProfileUrl" title="@Message.BoostingUser.UserName">@Message.BoostingUser.DisplayName</a>
|
||||
<i class="ion-md-repeat has-text-info" aria-hidden="true"></i>
|
||||
<i class="ion-md-repeat text-info" aria-hidden="true"></i>
|
||||
<span>@Localizer["boosted"]</span>
|
||||
</p>
|
||||
}
|
||||
<p class="inline-flex flex-1 space-x-2 min-w-0 justify-between text-xs md:text-sm">
|
||||
<span class="inline-flex space-x-2 min-w-0">
|
||||
<p class="inline-flex flex-1 gap-2 min-w-0 justify-between text-xs md:text-sm">
|
||||
<span class="inline-flex gap-2 min-w-0">
|
||||
<b class="shrink truncate max-w-[80%]" title="@Message.User.DisplayName">
|
||||
@Message.User.DisplayName
|
||||
</b>
|
||||
@@ -31,11 +31,11 @@
|
||||
@Message.User.UserName
|
||||
</a>
|
||||
</span>
|
||||
<span class="flex-none inline-flex space-x-1 items-center">
|
||||
<span class="flex-none inline-flex gap-1 items-center">
|
||||
<span title="@Message.CreatedAt.ToLocalTime().ToString("📅dd/MM/yy 🕒HH:mm")">
|
||||
@Message.CreatedAt.GetPassedTime(Localizer._pLocalizer)
|
||||
</span>
|
||||
<i aria-hidden="true" class="@Message.MessageType.GetMessageTypeIcon() text-md"
|
||||
<i aria-hidden="true" class="@Message.MessageType.GetMessageTypeIcon() text-base"
|
||||
title="@Localizer[Message.MessageType.ToString()]">
|
||||
</i>
|
||||
</span>
|
||||
@@ -65,7 +65,7 @@
|
||||
}
|
||||
else if (media.ContentType.StartsWith("video"))
|
||||
{
|
||||
<video class="w-full max-h-[50vh] aspect-video rounded-lg mx-auto neomorphInset is-nxxsmall" controls="controls" playsinline="playsinline" preload="metadata" title="@media.FileName">
|
||||
<video class="w-full max-h-[50vh] aspect-video rounded-lg mx-auto neo-inset neo-2xs" controls="controls" playsinline="playsinline" preload="metadata" title="@media.FileName">
|
||||
<source src="@media.Url" type="@media.ContentType" />
|
||||
</video>
|
||||
}
|
||||
@@ -77,11 +77,11 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="flex items-center space-x-3 align-center rounded-lg p-3 md:p-4 neomorph is-nxxsmall">
|
||||
<div class="flex items-center gap-3 rounded-lg p-3 md:p-4 neo-raised neo-2xs">
|
||||
<span>
|
||||
<i class="text-2xl ion-md-document"></i>
|
||||
</span>
|
||||
<div class="flex flex-col w-full space-y-1">
|
||||
<div class="flex flex-col w-full gap-1">
|
||||
<p class="text-xs md:text-sm break-all">
|
||||
<b>@media.FileName</b>
|
||||
</p>
|
||||
@@ -89,11 +89,9 @@
|
||||
<i class="ion-md-code"></i> @media.ContentType
|
||||
</p>
|
||||
</div>
|
||||
<button class="button is-small is-rounded neoBtnSmall" @onclick="async () => await OnMessageMediaDownload.InvokeAsync(media)" type="button">
|
||||
<span class="icon">
|
||||
<i class="ion-md-download text-base"></i>
|
||||
</span>
|
||||
</button>
|
||||
<DButton Size="DSize.Sm" OnClick="async () => await OnMessageMediaDownload.InvokeAsync(media)">
|
||||
<i class="ion-md-download text-base"></i>
|
||||
</DButton>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -102,106 +100,76 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3 mt-3 justify-between">
|
||||
<div class="flex space-x-3">
|
||||
<div class="flex gap-3 mt-3 justify-between">
|
||||
<div class="flex gap-3">
|
||||
@if (OnMessageReply.HasDelegate)
|
||||
{
|
||||
<button class="button is-small is-rounded @(isAnswering ? "neoBtnSmallInsetPlain" : "neoBtnSmall")" @onclick="Reply"
|
||||
title="@Localizer[isAnswering ? "Close" : "Reply"]">
|
||||
<span class="icon">
|
||||
<i aria-hidden="true" class="@SUtility.IfTrueThen(isAnswering, "ion-md-close-circle", "ion-md-text") text-lg has-text-success"></i>
|
||||
</span>
|
||||
</button>
|
||||
<DButton Size="DSize.Sm" Active="isAnswering" OnClick="Reply" title="@Localizer[isAnswering ? "Close" : "Reply"]">
|
||||
<i aria-hidden="true" class="@SUtility.IfTrueThen(isAnswering, "ion-md-close-circle", "ion-md-text") text-lg text-success"></i>
|
||||
</DButton>
|
||||
}
|
||||
@if (OnMessageBoost.HasDelegate)
|
||||
{
|
||||
<button class="button is-small is-rounded @SUtility.IfTrueThen(Message.IsBoostedByCurrentUser,"neoBtnSmallInsetPlain","neoBtnSmall") @SUtility.IfTrueThen(Message.BoostsCounter != 0, "has-icons-left")" @onclick="() => OnMessageBoost.InvokeAsync(Message)"
|
||||
title="@Localizer["Boost"]">
|
||||
<span class="icon is-left">
|
||||
<i aria-hidden="true" class="ion-md-repeat @SUtility.IfTrueThen(Message.BoostsCounter != 0,null,"text-lg") has-text-info"></i>
|
||||
</span>
|
||||
<DButton Size="DSize.Sm" Active="Message.IsBoostedByCurrentUser" OnClick="() => OnMessageBoost.InvokeAsync(Message)"
|
||||
title="@Localizer["Boost"]">
|
||||
<i aria-hidden="true" class="ion-md-repeat @SUtility.IfTrueThen(Message.BoostsCounter != 0, null, "text-lg") text-info"></i>
|
||||
@if (Message.BoostsCounter != 0)
|
||||
{
|
||||
<span>@Message.BoostsCounter</span>
|
||||
}
|
||||
</button>
|
||||
</DButton>
|
||||
}
|
||||
@if (OnMessageFavourite.HasDelegate)
|
||||
{
|
||||
<button class="button is-small is-rounded @SUtility.IfTrueThen(Message.IsFavourite, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => OnMessageFavourite.InvokeAsync(Message)"
|
||||
title="@Localizer["Favourite"]">
|
||||
<span class="icon">
|
||||
<i aria-hidden="true" class="@SUtility.IfTrueThen(Message.IsFavourite, "ion-md-heart-dislike", "ion-md-heart") text-lg text-pink-300"></i>
|
||||
</span>
|
||||
</button>
|
||||
<DButton Size="DSize.Sm" Active="Message.IsFavourite" OnClick="() => OnMessageFavourite.InvokeAsync(Message)"
|
||||
title="@Localizer["Favourite"]">
|
||||
<i aria-hidden="true" class="@SUtility.IfTrueThen(Message.IsFavourite, "ion-md-heart-dislike", "ion-md-heart") text-lg text-pink-300"></i>
|
||||
</DButton>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3">
|
||||
<DropdownButton IsOpen="Message.IsOptionsOpen">
|
||||
<DropdownTrigger>
|
||||
<button class="button is-small is-rounded neoBtnSmall" @onclick="() => Message.IsOptionsOpen = !Message.IsOptionsOpen"
|
||||
title="@Localizer["Other"]">
|
||||
<span class="icon">
|
||||
<i aria-hidden="true" class="ion-md-more text-lg"></i>
|
||||
</span>
|
||||
</button>
|
||||
</DropdownTrigger>
|
||||
<DropdownContent>
|
||||
<div class="flex gap-3">
|
||||
<DDropdown @bind-IsOpen="Message.IsOptionsOpen" Align="DDropdownAlign.End" CloseOnContentClick="true"
|
||||
TriggerClass="@(Message.IsOptionsOpen ? "btn btn-sm btn-active" : "btn btn-sm")"
|
||||
ContentClass="mt-2 flex flex-col gap-2 p-2 rounded-box" title="@Localizer["Other"]">
|
||||
<Trigger>
|
||||
<i aria-hidden="true" class="ion-md-more text-lg"></i>
|
||||
</Trigger>
|
||||
<ChildContent>
|
||||
@if (OnUserDirectMessage.HasDelegate)
|
||||
{
|
||||
<div class="dropdown-item">
|
||||
<button class="button is-small is-rounded has-icons-left neoBtnSmall" @onclick="() => OnUserDirectMessage.InvokeAsync(Message)">
|
||||
<span class="icon is-left">
|
||||
<i aria-hidden="true" class="ion-md-paper-plane text-base has-text-success"></i>
|
||||
</span>
|
||||
<span>@Localizer["Direct message"]</span>
|
||||
</button>
|
||||
</div>
|
||||
<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" OnClick="() => OnUserDirectMessage.InvokeAsync(Message)">
|
||||
<i aria-hidden="true" class="ion-md-paper-plane text-base text-success"></i>
|
||||
<span>@Localizer["Direct message"]</span>
|
||||
</DButton>
|
||||
}
|
||||
@if (OnUserSilence.HasDelegate)
|
||||
{
|
||||
<div class="dropdown-item">
|
||||
<button class="button is-small is-rounded has-icons-left neoBtnSmall" @onclick="() => OnUserSilence.InvokeAsync(Message.User)">
|
||||
<span class="icon is-left">
|
||||
<i aria-hidden="true" class="ion-md-eye-off text-base drop-shadow has-text-warning"></i>
|
||||
</span>
|
||||
<span>@Localizer["Mute"]</span>
|
||||
</button>
|
||||
</div>
|
||||
<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" OnClick="() => OnUserSilence.InvokeAsync(Message.User)">
|
||||
<i aria-hidden="true" class="ion-md-eye-off text-base drop-shadow-sm text-warning"></i>
|
||||
<span>@Localizer["Mute"]</span>
|
||||
</DButton>
|
||||
}
|
||||
@if (OnUserBlock.HasDelegate)
|
||||
{
|
||||
<div class="dropdown-item">
|
||||
<button class="button is-small is-rounded has-icons-left neoBtnSmall" @onclick="() => OnUserBlock.InvokeAsync(Message.User)">
|
||||
<span class="icon is-left">
|
||||
<i aria-hidden="true" class="ion-md-remove-circle text-base has-text-danger"></i>
|
||||
</span>
|
||||
<span>@Localizer["Block"]</span>
|
||||
</button>
|
||||
</div>
|
||||
<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" OnClick="() => OnUserBlock.InvokeAsync(Message.User)">
|
||||
<i aria-hidden="true" class="ion-md-remove-circle text-base text-error"></i>
|
||||
<span>@Localizer["Block"]</span>
|
||||
</DButton>
|
||||
}
|
||||
@if (@*Message.User.UserName == CurrentUserName &&*@ OnMessageDelete.HasDelegate)
|
||||
{
|
||||
<div class="dropdown-item">
|
||||
<button class="button is-small has-icons-left is-rounded neoBtnSmall" @onclick="DeleteMessage"
|
||||
title="@Localizer["Delete"]">
|
||||
<span class="icon is-left">
|
||||
<i aria-hidden="true" class="ion-md-trash text-lg has-text-danger"></i>
|
||||
</span>
|
||||
<span>@Localizer["Delete"]</span>
|
||||
</button>
|
||||
</div>
|
||||
<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" OnClick="DeleteMessage" title="@Localizer["Delete"]">
|
||||
<i aria-hidden="true" class="ion-md-trash text-lg text-error"></i>
|
||||
<span>@Localizer["Delete"]</span>
|
||||
</DButton>
|
||||
}
|
||||
</DropdownContent>
|
||||
</DropdownButton>
|
||||
</ChildContent>
|
||||
</DDropdown>
|
||||
@if (IncludeExpand)
|
||||
{
|
||||
<NavLink class="button is-small is-rounded neoBtnSmall" href="@($"expand/{Message.MessageId}")"
|
||||
title="@Localizer["Expand"]">
|
||||
<span class="icon">
|
||||
<i aria-hidden="true" class="ion-md-expand text-lg"></i>
|
||||
</span>
|
||||
<NavLink class="btn btn-sm" href="@($"expand/{Message.MessageId}")" title="@Localizer["Expand"]">
|
||||
<i aria-hidden="true" class="ion-md-expand text-lg"></i>
|
||||
</NavLink>
|
||||
}
|
||||
</div>
|
||||
@@ -228,6 +196,8 @@
|
||||
[Parameter] public EventCallback<MessageUser> OnUserBlock { get; set; }
|
||||
[Parameter] public EventCallback<MessageUser> OnUserSilence { get; set; }
|
||||
[Parameter] public string CssContainer { get; set; }
|
||||
/// <summary>Deeper shadow, for the message a thread page is about.</summary>
|
||||
[Parameter] public bool Highlighted { get; set; }
|
||||
[Parameter] public bool IncludeExpand { get; set; } = true;
|
||||
|
||||
bool isAnswering { get; set; } = false;
|
||||
|
||||
Reference in new issue
Block a user