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
+40
-83
@@ -1,19 +1,19 @@
|
||||
@inherits LocalizableComponentBase
|
||||
|
||||
<nav class="flex justify-between align-center pt-3 px-3 md:p-0">
|
||||
<nav class="flex justify-between items-center md:items-start pt-3 px-3 md:p-0">
|
||||
|
||||
<div class="relative md:w-52">
|
||||
<button class="button is-rounded inline-flex is-small neoBtnSmall relative md:hidden" @onclick="ToggleNavMenu">
|
||||
<DButton Size="DSize.Sm" class="md:hidden" OnClick="ToggleNavMenu">
|
||||
<i class="ion-md-menu text-lg"></i>
|
||||
</button>
|
||||
<div class="absolute background md:relative top-full md:top-auto mt-2 w-52 md:w-full overflow-y-auto rounded-lg neomorph is-nsmall md:shadow-none z-50 @menuToggle md:block">
|
||||
<div class="flex flex-col space-y-3 p-3 md:p-4">
|
||||
</DButton>
|
||||
<div class="absolute bg-base-100 md:relative top-full md:top-auto mt-2 w-52 md:w-full overflow-y-auto rounded-lg neo-raised neo-sm md:shadow-none! z-50 @menuToggle md:block">
|
||||
<div class="flex flex-col gap-3 p-3 md:p-4">
|
||||
|
||||
<div class="flex space-x-3 p-3 md:p-4 neomorph is-nxsmall rounded-xl bg-cover bg-no-repeat bg-right" style="background-image:linear-gradient(to left, var(--background) 55%, transparent), url('@(CascadingState.User?.BackgroundUrl)');">
|
||||
<div class="flex gap-3 p-3 md:p-4 neo-raised neo-xs rounded-xl bg-cover bg-no-repeat bg-right" style="background-image:linear-gradient(to left, var(--color-base-100) 55%, transparent), url('@(CascadingState.User?.BackgroundUrl)');">
|
||||
<a class="block h-8 w-8 md:h-12 md:w-12 flex-none" href="@CascadingState.User?.ProfileUrl" title="@CascadingState.User?.UserName">
|
||||
<img alt="@CascadingState.User?.UserName" class="h-8 w-8 md:h-12 md:w-12 object-cover rounded-full neomorph is-nxxsmall" src="@(CascadingState.User?.PictureUrl ?? "/imgs/icon-192.png")" />
|
||||
<img alt="@CascadingState.User?.UserName" class="h-8 w-8 md:h-12 md:w-12 object-cover rounded-full neo-raised neo-2xs" src="@(CascadingState.User?.PictureUrl ?? "/imgs/icon-192.png")" />
|
||||
</a>
|
||||
<div class="flex flex-col w-full min-w-0 space-y-2">
|
||||
<div class="flex flex-col w-full min-w-0 gap-2">
|
||||
<p class="shrink truncate">
|
||||
<b title="@CascadingState.User?.DisplayName">
|
||||
@CascadingState.User?.DisplayName
|
||||
@@ -27,87 +27,62 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="/" Match="NavLinkMatch.All">
|
||||
<span class="icon is-left">
|
||||
<i class="ion-md-home"></i>
|
||||
</span>
|
||||
<NavLink ActiveClass="btn-active" class="btn justify-start" href="/" Match="NavLinkMatch.All">
|
||||
<i class="ion-md-home"></i>
|
||||
<span>@Localizer["Home"]</span>
|
||||
</NavLink>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="settings">
|
||||
<span class="icon is-left">
|
||||
<i class="ion-md-settings"></i>
|
||||
</span>
|
||||
<NavLink ActiveClass="btn-active" class="btn justify-start" href="settings">
|
||||
<i class="ion-md-settings"></i>
|
||||
<span>@Localizer["Settings"]</span>
|
||||
</NavLink>
|
||||
@*<AuthorizeView>
|
||||
<Authorized>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button is-rounded neoBtnSmallPlain" href="administration">
|
||||
<NavLink ActiveClass="btn-active" class="btn justify-start" href="administration">
|
||||
@Localizer["Administration"]
|
||||
</NavLink>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button is-rounded neoBtnSmallPlain" href="logout">
|
||||
<NavLink ActiveClass="btn-active" class="btn justify-start" href="logout">
|
||||
@Localizer["Logout"]
|
||||
</NavLink>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button is-rounded neoBtnSmallPlain" href="login">
|
||||
<NavLink ActiveClass="btn-active" class="btn justify-start" href="login">
|
||||
@Localizer["Login"]
|
||||
</NavLink>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>*@
|
||||
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="administration">
|
||||
<span class="icon is-left has-text-danger">
|
||||
<i class="ion-md-switch"></i>
|
||||
</span>
|
||||
<NavLink ActiveClass="btn-active" class="btn justify-start" href="administration">
|
||||
<i class="ion-md-switch text-error"></i>
|
||||
<span>@Localizer["Administration"]</span>
|
||||
</NavLink>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="login">
|
||||
<span class="icon is-left has-text-success">
|
||||
<i class="ion-md-log-in"></i>
|
||||
</span>
|
||||
<NavLink ActiveClass="btn-active" class="btn justify-start" href="login">
|
||||
<i class="ion-md-log-in text-success"></i>
|
||||
<span>@Localizer["Login"]</span>
|
||||
</NavLink>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="logout">
|
||||
<span class="icon is-left has-text-danger">
|
||||
<i class="ion-md-log-out"></i>
|
||||
</span>
|
||||
<NavLink ActiveClass="btn-active" class="btn justify-start" href="logout">
|
||||
<i class="ion-md-log-out text-error"></i>
|
||||
<span>@Localizer["Logout"]</span>
|
||||
</NavLink>
|
||||
|
||||
<div class="field is-grouped is-align-items-center">
|
||||
<div class="control">
|
||||
<button @onclick:stopPropagation @onclick:preventDefault @onclick="ResetToOriginalColour" class="button is-rounded has-icons-left is-small mb-0 ml-0 neoBtn" style="background:hsl(25,84%,88%) !important"
|
||||
type="button">
|
||||
<span class="icon is-left"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control is-expanded is-flex">
|
||||
<input class="neoRange fullwidth" id="ColourIndex_@(RandomId)"
|
||||
max="359" min="0" @onchange="UpdateThemeColour" step="1" type="range" value="@ThemeIndexColour">
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<DButton Size="DSize.Sm" Shape="DButtonShape.Circle" class="flex-none" OnClick="ResetToOriginalColour"
|
||||
title="@Localizer["Reset"]">
|
||||
<i class="ion-md-refresh"></i>
|
||||
</DButton>
|
||||
<DRange TValue="short" class="neo-hue-track w-full" Size="DSize.Xs" Min="0" Max="359" Step="1"
|
||||
Value="ThemeIndexColour" ValueChanged="UpdateThemeColour" ValueExpression="() => ThemeIndexColour" />
|
||||
</div>
|
||||
|
||||
<EditForm class="field is-grouped is-grouped-right" Context="DarkModeForm" Model="ThemeIsDarkMode">
|
||||
<div class="control">
|
||||
<label>
|
||||
<InputCheckbox class="toggle-checkbox"
|
||||
Value="ThemeIsDarkMode" ValueChanged="async v => await UpdateThemeDarkMode(v)" ValueExpression="() => ThemeIsDarkMode" />
|
||||
<div class="toggle-slot neomorph is-nxxsmall cursor-pointer">
|
||||
<div class="sun-icon-wrapper">
|
||||
<div class="sun-icon">
|
||||
<i class="ion-md-sunny text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-button"></div>
|
||||
<div class="moon-icon-wrapper">
|
||||
<div class="moon-icon">
|
||||
<i class="ion-md-moon text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</EditForm>
|
||||
<div class="flex justify-end">
|
||||
<DToggle Value="ThemeIsDarkMode" ValueChanged="async v => await UpdateThemeDarkMode(v)" ValueExpression="() => ThemeIsDarkMode">
|
||||
<UncheckedIcon>
|
||||
<i class="ion-md-sunny"></i>
|
||||
</UncheckedIcon>
|
||||
<CheckedIcon>
|
||||
<i class="ion-md-moon"></i>
|
||||
</CheckedIcon>
|
||||
</DToggle>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,25 +93,10 @@
|
||||
</div>
|
||||
|
||||
<div class="md:hidden">
|
||||
<a class="neomorph is-nxxsmall" href="settings">
|
||||
<a class="block rounded-full neo-raised neo-2xs" href="settings">
|
||||
<img alt="@CascadingState.User?.UserName" class="object-cover w-[30px] h-[30px] rounded-full"
|
||||
src="@CascadingState.User?.PictureUrl">
|
||||
</a>
|
||||
|
||||
@* <button class="button is-rounded is-small has-icons-left neoBtnSmall "> *@
|
||||
@* $1$ <AuthorizeView> #1# *@
|
||||
@* $1$ <Authorized> #1# *@
|
||||
@* $1$ <span class="icon is-left"> #1# *@
|
||||
@* $1$ <img alt="@CascadingState.User.UserName" class="object-cover" src="@CascadingState.User.PictureUrl"> #1# *@
|
||||
@* $1$ </span> #1# *@
|
||||
@* $1$ </Authorized> #1# *@
|
||||
@* $1$ <NotAuthorized> #1# *@
|
||||
@* $1$ <span class="icon is-left"> #1# *@
|
||||
@* $1$ <i class="ion-md-person"></i> #1# *@
|
||||
@* $1$ </span> #1# *@
|
||||
@* $1$ </NotAuthorized> #1# *@
|
||||
@* $1$ </AuthorizeView> #1# *@
|
||||
@* </button> *@
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
@@ -147,14 +107,12 @@
|
||||
bool IsThemeChanging { get; set; } = false;
|
||||
bool ThemeIsDarkMode { get; set; } = false;
|
||||
short ThemeIndexColour { get; set; } = 25;
|
||||
int RandomId { get; set; }
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await Task.Run(() =>
|
||||
{
|
||||
});
|
||||
RandomId = Random.Shared.Next(0, int.MaxValue);
|
||||
if (!CascadingState.Status.IsMobileMedia())
|
||||
menuToggle = default;
|
||||
|
||||
@@ -186,10 +144,9 @@
|
||||
IsThemeChanging = false;
|
||||
}
|
||||
|
||||
protected async Task UpdateThemeColour(ChangeEventArgs eventArgs)
|
||||
protected async Task UpdateThemeColour(short indexColour)
|
||||
{
|
||||
IsThemeChanging = true;
|
||||
var indexColour = short.Parse(eventArgs.Value?.ToString());
|
||||
CascadingState.PublicCacheData.PageSettings.LightThemeIndexColour =
|
||||
ThemeIndexColour =
|
||||
indexColour;
|
||||
|
||||
Reference in new issue
Block a user