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
+103
-151
@@ -3,24 +3,21 @@
|
||||
<EditForm Model="MessageForm" OnValidSubmit="OnValidSubmit">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
<div class="field mb-3">
|
||||
<div class="control">
|
||||
<InputText class="input rounded-t-[1.4rem] rounded-b-lg neoInput" maxlength="64"
|
||||
placeholder="@Localizer["Title (optional)"]" Value="@MessageForm.Title"
|
||||
ValueChanged="(v) => OnTitleChanged(v)"
|
||||
ValueExpression="() => MessageForm.Title" />
|
||||
</div>
|
||||
<div class="control relative mt-1">
|
||||
<textarea @bind="@MessageForm.Content" @bind:event="oninput"
|
||||
class="textarea rounded-b-[1.4rem] rounded-t-lg neoInput"
|
||||
maxlength="5000"
|
||||
placeholder="@Localizer["oh shit... here we go again"]" rows="3"></textarea>
|
||||
<div class="flex flex-col mb-3">
|
||||
<DInput TValue="string" class="w-full rounded-t-[1.4rem] rounded-b-lg" maxlength="64"
|
||||
placeholder="@Localizer["Title (optional)"]" Value="@MessageForm.Title"
|
||||
ValueChanged="(v) => OnTitleChanged(v)"
|
||||
ValueExpression="() => MessageForm.Title" />
|
||||
<div class="relative mt-1">
|
||||
<DTextarea TValue="string" @bind-Value="MessageForm.Content" Immediate="true"
|
||||
class="w-full rounded-b-[1.4rem] rounded-t-lg" maxlength="5000"
|
||||
placeholder="@Localizer["oh shit... here we go again"]" rows="3" />
|
||||
<span class="absolute text-xs opacity-50 right-2 bottom-1">@(MessageForm.Content?.Length ?? 0)/5000</span>
|
||||
</div>
|
||||
@if (showPreviewButton && isPreviewOpen && MessageForm.Content is { Length: > 0 })
|
||||
{
|
||||
<div class="control relative mt-1 px-8">
|
||||
<div class="neomorphInset rounded-t-lg rounded-b-[1.4rem] px-2 py-1 md:px-3 md:py-2 text-xs md:text-sm">
|
||||
<div class="relative mt-1 px-8">
|
||||
<div class="neo-inset neo-xs rounded-t-lg rounded-b-[1.4rem] px-2 py-1 md:px-3 md:py-2 text-xs md:text-sm">
|
||||
@switch (MessageForm.ContentType)
|
||||
{
|
||||
case ContentType.Markdown:
|
||||
@@ -33,22 +30,22 @@
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="help is-danger">
|
||||
<div class="text-error text-sm">
|
||||
<ValidationMessage For="() => MessageForm.Content" />
|
||||
@contentError
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col space-y-3 mb-3 @SUtility.IfTrueThen(MessageForm.Media.Count == 0, "hidden")">
|
||||
<div class="flex flex-col gap-3 mb-3 @SUtility.IfTrueThen(MessageForm.Media.Count == 0, "hidden")">
|
||||
@foreach (var media in MessageForm.Media)
|
||||
{
|
||||
switch (MessageForm.MediaType)
|
||||
{
|
||||
case MediaType.Images:
|
||||
<div class="flex w-full items-center space-x-3 rounded-xl p-3 md:p-4 neomorph is-nxxsmall">
|
||||
<img alt="@media.AltText" class="object-cover rounded-lg neomorph is-nxxsmall max-h-24 md:max-h-40 max-w-[6rem] md:max-w-[12rem]" src="@media.Base64Preview" />
|
||||
<div class="flex w-full self-start flex-col justify-between space-y-2">
|
||||
<div class="flex w-full space-x-3">
|
||||
<div class="flex w-full items-center gap-3 rounded-xl p-3 md:p-4 neo-raised neo-2xs">
|
||||
<img alt="@media.AltText" class="object-cover rounded-lg neo-raised neo-2xs max-h-24 md:max-h-40 max-w-[6rem] md:max-w-[12rem]" src="@media.Base64Preview" />
|
||||
<div class="flex w-full self-start flex-col justify-between gap-2">
|
||||
<div class="flex w-full gap-3">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs md:text-sm break-all">
|
||||
<i class="ion-md-image"></i> <b>@media.FileName</b>
|
||||
@@ -57,28 +54,22 @@
|
||||
<i class="ion-md-code"></i> @media.ContentType <i class="ion-md-fitness"></i> @media.Size.GetFileSize(Localizer._pLocalizer)
|
||||
</p>
|
||||
</div>
|
||||
<button class="button is-small is-rounded self-start neoBtnSmall" @onclick="() => RemoveFile(media)" type="button">
|
||||
<span class="icon">
|
||||
<i class="ion-md-trash text-base text-red-400"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="field w-full">
|
||||
<div class="control w-full">
|
||||
<InputTextArea @bind-Value="media.AltText" class="textarea w-full is-small !rounded-lg neoInput"
|
||||
placeholder="@Localizer["Alternative text"]" rows="1" />
|
||||
</div>
|
||||
<DButton Size="DSize.Sm" class="self-start" OnClick="() => RemoveFile(media)">
|
||||
<i class="ion-md-trash text-base text-red-400"></i>
|
||||
</DButton>
|
||||
</div>
|
||||
<DTextarea TValue="string" @bind-Value="media.AltText" Size="DSize.Sm" class="w-full rounded-lg!"
|
||||
placeholder="@Localizer["Alternative text"]" rows="1" />
|
||||
</div>
|
||||
</div>
|
||||
break;
|
||||
case MediaType.Video:
|
||||
case MediaType.Documents:
|
||||
<div class="flex items-center space-x-3 align-center rounded-xl p-3 md:p-4 neomorph is-nxxsmall">
|
||||
<div class="flex items-center gap-3 rounded-xl p-3 md:p-4 neo-raised neo-2xs">
|
||||
<span>
|
||||
<i class="text-2xl @MessageForm.MediaType.GetMediaTypeIcon()"></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>
|
||||
@@ -86,19 +77,17 @@
|
||||
<i class="ion-md-code"></i> @media.ContentType <i class="ion-md-fitness"></i> @media.Size.GetFileSize(Localizer._pLocalizer)
|
||||
</p>
|
||||
</div>
|
||||
<button class="button is-small is-rounded neoBtnSmall" @onclick="() => RemoveFile(media)" type="button">
|
||||
<span class="icon">
|
||||
<i class="ion-md-trash text-base text-red-400"></i>
|
||||
</span>
|
||||
</button>
|
||||
<DButton Size="DSize.Sm" OnClick="() => RemoveFile(media)">
|
||||
<i class="ion-md-trash text-base text-red-400"></i>
|
||||
</DButton>
|
||||
</div>
|
||||
break;
|
||||
case MediaType.Audio:
|
||||
<div class="flex items-center space-x-3 align-center rounded-xl p-3 md:p-4 neomorph is-nxxsmall">
|
||||
<div class="flex items-center gap-3 rounded-xl p-3 md:p-4 neo-raised neo-2xs">
|
||||
<span>
|
||||
<i class="text-2xl @MessageForm.MediaType.GetMediaTypeIcon()"></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>
|
||||
@@ -109,11 +98,9 @@
|
||||
<source src="@media.Base64Preview" type="@media.ContentType">
|
||||
</audio>
|
||||
</div>
|
||||
<button class="button is-small is-rounded neoBtnSmall" @onclick="() => RemoveFile(media)" type="button">
|
||||
<span class="icon">
|
||||
<i class="ion-md-trash text-base text-red-400"></i>
|
||||
</span>
|
||||
</button>
|
||||
<DButton Size="DSize.Sm" OnClick="() => RemoveFile(media)">
|
||||
<i class="ion-md-trash text-base text-red-400"></i>
|
||||
</DButton>
|
||||
</div>
|
||||
break;
|
||||
}
|
||||
@@ -123,124 +110,94 @@
|
||||
|
||||
@if (fileInputErrorMessage is { Length: > 0 })
|
||||
{
|
||||
<div class="help is-danger p-1 md:p-2 mb-3 rounded-xl neomorphInset is-nxxsmall">
|
||||
<div class="text-error text-sm p-1 md:p-2 mb-3 rounded-xl neo-inset neo-2xs">
|
||||
@((MarkupString)fileInputErrorMessage)
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="flex justify-between space-x-3 h-[30px]">
|
||||
<div class="flex space-x-3">
|
||||
<DropdownButton CssDirection="is-left" IsOpen="MessageForm.IsScopeOptionsOpen">
|
||||
<DropdownTrigger>
|
||||
<button class="button is-small is-rounded @SUtility.IfTrueThen(MessageForm.IsScopeOptionsOpen, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="OpenCloseMessageType"
|
||||
title="@string.Format(Localizer["Message scope type: {0}"], Localizer[MessageType.Direct.ToString()])" type="button">
|
||||
<span class="icon">
|
||||
<i class="@MessageForm.MessageType.GetMessageTypeIcon() text-base"></i>
|
||||
</span>
|
||||
</button>
|
||||
</DropdownTrigger>
|
||||
<DropdownContent>
|
||||
<div class="flex space-x-3 px-2">
|
||||
<button class="button is-small is-rounded @SUtility.IfTrueThen(MessageForm.MessageType is MessageType.Direct, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => UpdateMessageType(MessageType.Direct)"
|
||||
title="@Localizer[MessageType.Direct.ToString()]" type="button">
|
||||
<span class="icon">
|
||||
<i class="ion-md-paper-plane text-base"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-rounded @SUtility.IfTrueThen(MessageForm.MessageType is MessageType.FollowersOnly, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => UpdateMessageType(MessageType.FollowersOnly)"
|
||||
title="@Localizer[MessageType.FollowersOnly.ToString()]" type="button">
|
||||
<span class="icon">
|
||||
<i class="ion-md-lock text-base"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-rounded @SUtility.IfTrueThen(MessageForm.MessageType is MessageType.Unlisted, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => UpdateMessageType(MessageType.Unlisted)"
|
||||
title="@Localizer[MessageType.Unlisted.ToString()]" type="button">
|
||||
<span class="icon">
|
||||
<i class="ion-md-unlock text-base"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-rounded @SUtility.IfTrueThen(MessageForm.MessageType is MessageType.Public, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => UpdateMessageType(MessageType.Public)"
|
||||
title="@Localizer[MessageType.Public.ToString()]" type="button">
|
||||
<span class="icon">
|
||||
<i class="ion-md-globe text-base"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</DropdownContent>
|
||||
</DropdownButton>
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div class="flex flex-wrap items-start gap-3">
|
||||
<DDropdown @bind-IsOpen="MessageForm.IsScopeOptionsOpen"
|
||||
TriggerClass="@(MessageForm.IsScopeOptionsOpen ? "btn btn-sm btn-active" : "btn btn-sm")"
|
||||
ContentClass="mt-2 flex gap-2 p-2 rounded-box"
|
||||
title="@string.Format(Localizer["Message scope type: {0}"], Localizer[MessageForm.MessageType.ToString()])">
|
||||
<Trigger>
|
||||
<i class="@MessageForm.MessageType.GetMessageTypeIcon() text-base"></i>
|
||||
</Trigger>
|
||||
<ChildContent>
|
||||
<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.Direct" OnClick="() => UpdateMessageType(MessageType.Direct)"
|
||||
title="@Localizer[MessageType.Direct.ToString()]">
|
||||
<i class="ion-md-paper-plane text-base"></i>
|
||||
</DButton>
|
||||
<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.FollowersOnly" OnClick="() => UpdateMessageType(MessageType.FollowersOnly)"
|
||||
title="@Localizer[MessageType.FollowersOnly.ToString()]">
|
||||
<i class="ion-md-lock text-base"></i>
|
||||
</DButton>
|
||||
<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.Unlisted" OnClick="() => UpdateMessageType(MessageType.Unlisted)"
|
||||
title="@Localizer[MessageType.Unlisted.ToString()]">
|
||||
<i class="ion-md-unlock text-base"></i>
|
||||
</DButton>
|
||||
<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.Public" OnClick="() => UpdateMessageType(MessageType.Public)"
|
||||
title="@Localizer[MessageType.Public.ToString()]">
|
||||
<i class="ion-md-globe text-base"></i>
|
||||
</DButton>
|
||||
</ChildContent>
|
||||
</DDropdown>
|
||||
|
||||
<div class="file is-small">
|
||||
<label class="file-label overflow-visible rounded-full neoBtnSmall h-[30px]">
|
||||
<InputFile accept="@acceptedFilesTypes" class="file-input" multiple="@ShouldHaveMultipleUpload()" OnChange="OnFileChange" disabled="@ShouldDisableUpload()" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon @SUtility.IfTrueThen(MessageForm.Media.Count == 0, "mr-0")">
|
||||
<i class="ion-md-attach text-base"></i>
|
||||
</span>
|
||||
@if (MessageForm.Media.Count != 0)
|
||||
{
|
||||
<span class="file-label">+@MessageForm.Media.Count</span>
|
||||
}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
@* A label styled as a button opens the hidden file input. *@
|
||||
<label class="btn btn-sm @SUtility.IfTrueThen(ShouldDisableUpload(), "btn-disabled")">
|
||||
<InputFile accept="@acceptedFilesTypes" class="hidden" multiple="@ShouldHaveMultipleUpload()" OnChange="OnFileChange" disabled="@ShouldDisableUpload()" />
|
||||
<i class="ion-md-attach text-base"></i>
|
||||
@if (MessageForm.Media.Count != 0)
|
||||
{
|
||||
<span>+@MessageForm.Media.Count</span>
|
||||
}
|
||||
</label>
|
||||
|
||||
<div class="field">
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-small is-rounded neoSelect">
|
||||
<InputSelect TValue="MediaType" Value="MessageForm.MediaType" ValueChanged="v => OnMediaTypeChanged(v)" ValueExpression="() => MessageForm.MediaType" disabled="@(MessageForm.Media.Count > 0)">
|
||||
@foreach (var mediaType in Enum.GetValues<MediaType>())
|
||||
{
|
||||
<option value="@mediaType">@Localizer[mediaType.ToString()]</option>
|
||||
}
|
||||
</InputSelect>
|
||||
</div>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="@MessageForm.MediaType.GetMediaTypeIcon()"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<DSelect TValue="MediaType" Size="DSize.Sm" class="w-auto" Value="MessageForm.MediaType" ValueChanged="v => OnMediaTypeChanged(v)"
|
||||
ValueExpression="() => MessageForm.MediaType" disabled="@(MessageForm.Media.Count > 0)">
|
||||
<Prefix>
|
||||
<i class="@MessageForm.MediaType.GetMediaTypeIcon()"></i>
|
||||
</Prefix>
|
||||
<ChildContent>
|
||||
@foreach (var mediaType in Enum.GetValues<MediaType>())
|
||||
{
|
||||
<option value="@mediaType">@Localizer[mediaType.ToString()]</option>
|
||||
}
|
||||
</ChildContent>
|
||||
</DSelect>
|
||||
|
||||
<div class="field">
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-small is-rounded neoSelect">
|
||||
<InputSelect TValue="ContentType" Value="MessageForm.ContentType" ValueChanged="v => OnContentTypeChanged(v)" ValueExpression="() => MessageForm.ContentType">
|
||||
@foreach (var contentType in Enum.GetValues<ContentType>())
|
||||
{
|
||||
<option value="@contentType">@Localizer[contentType.ToString()]</option>
|
||||
}
|
||||
</InputSelect>
|
||||
</div>
|
||||
<span class="icon is-small is-left">
|
||||
<div class="flex flex-col">
|
||||
<DSelect TValue="ContentType" Size="DSize.Sm" class="w-auto" Value="MessageForm.ContentType" ValueChanged="v => OnContentTypeChanged(v)"
|
||||
ValueExpression="() => MessageForm.ContentType">
|
||||
<Prefix>
|
||||
<i class="@MessageForm.ContentType.GetContentTypeIcon()"></i>
|
||||
</span>
|
||||
<div class="help is-danger">
|
||||
<ValidationMessage For="() => MessageForm.ContentType" />
|
||||
</div>
|
||||
</Prefix>
|
||||
<ChildContent>
|
||||
@foreach (var contentType in Enum.GetValues<ContentType>())
|
||||
{
|
||||
<option value="@contentType">@Localizer[contentType.ToString()]</option>
|
||||
}
|
||||
</ChildContent>
|
||||
</DSelect>
|
||||
<div class="text-error text-sm">
|
||||
<ValidationMessage For="() => MessageForm.ContentType" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (showPreviewButton)
|
||||
{
|
||||
<button class="button is-small is-rounded @SUtility.IfTrueThen(isPreviewOpen, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="OnOpenClosePreview"
|
||||
title="@Localizer["Show preview"]" type="button">
|
||||
<span class="icon">
|
||||
<i class="@SUtility.IfTrueThen(isPreviewOpen, "ion-md-eye-off", "ion-md-eye") text-base"></i>
|
||||
</span>
|
||||
</button>
|
||||
<DButton Size="DSize.Sm" Active="isPreviewOpen" OnClick="OnOpenClosePreview" title="@Localizer["Show preview"]">
|
||||
<i class="@SUtility.IfTrueThen(isPreviewOpen, "ion-md-eye-off", "ion-md-eye") text-base"></i>
|
||||
</DButton>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3">
|
||||
|
||||
<button class="button is-small is-rounded has-icons-right neoBtnSmall" type="submit">
|
||||
<span>@Localizer["Post"]</span>
|
||||
<span class="icon is-right">
|
||||
<i class="ion-md-send"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<DButton Size="DSize.Sm" Type="submit">
|
||||
<span>@Localizer["Post"]</span>
|
||||
<i class="ion-md-send"></i>
|
||||
</DButton>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -258,11 +215,6 @@
|
||||
bool showPreviewButton { get; set; } = false;
|
||||
bool isPreviewOpen { get; set; } = false;
|
||||
|
||||
void OpenCloseMessageType()
|
||||
{
|
||||
MessageForm.IsScopeOptionsOpen = !MessageForm.IsScopeOptionsOpen;
|
||||
}
|
||||
|
||||
void UpdateMessageType(MessageType messageType)
|
||||
{
|
||||
MessageForm.MessageType = messageType;
|
||||
|
||||
Reference in new issue
Block a user