Save
This commit is contained in:
Eugenio Chiodo
@ -1,5 +1,106 @@
|
||||
<h3>ActionBar</h3>
|
||||
<section class="flex flex-col space-y-4">
|
||||
|
||||
@if (isPosting)
|
||||
{
|
||||
<div class="block p-3 md:p-4 neomorph rounded-xl is-nxsmall">
|
||||
<MessageUpsertForm OnMessageSubmit="OnMessageSubmit" />
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="flex justify-between space-x-3">
|
||||
|
||||
<EditForm Model="Filters">
|
||||
<div class="field flex flex-row space-x-3">
|
||||
@if (OnTimelineChanged.HasDelegate)
|
||||
{
|
||||
<div class="control has-icons-left">
|
||||
<span class="icon is-left">
|
||||
<i class="@Filters.TimelineType.GetTimelineTypeIcon()"></i>
|
||||
</span>
|
||||
<span class="select is-rounded neoSelect">
|
||||
<InputSelect TValue="TimelineType" Value="Filters.TimelineType"
|
||||
ValueChanged="async v => await OnTimelineChange(v)" ValueExpression="() => Filters.TimelineType">
|
||||
@foreach (var timelineType in Enum.GetValues<TimelineType>())
|
||||
{
|
||||
<option value="@timelineType">@CascadingState.Localizer[timelineType.ToString()]</option>
|
||||
}
|
||||
</InputSelect>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
@if (OnTimeSortingChanged.HasDelegate)
|
||||
{
|
||||
<div class="control has-icons-left">
|
||||
<span class="icon is-left">
|
||||
<i class="ion-md-funnel"></i>
|
||||
</span>
|
||||
<span class="select is-rounded neoSelect">
|
||||
<InputSelect TValue="TimeSortingType" Value="Filters.TimeSortingType"
|
||||
ValueChanged="async v => await OnTimeSortChange(v)" ValueExpression="() => Filters.TimeSortingType">
|
||||
@foreach (var timeSortingType in Enum.GetValues<TimeSortingType>())
|
||||
{
|
||||
<option value="@timeSortingType">@CascadingState.Localizer[timeSortingType.ToString()]</option>
|
||||
}
|
||||
</InputSelect>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</EditForm>
|
||||
|
||||
@if (OnMessageSubmit.HasDelegate)
|
||||
{
|
||||
<div>
|
||||
<button class="button is-rounded @SUtility.IfTrueThen(isPosting, "neoBtnInsetPlain", "neoBtn")"
|
||||
@onclick="OpenCloseMessageForm">
|
||||
<span class="icon is-left">
|
||||
<i class="ion-md-create"></i>
|
||||
</span>
|
||||
<span>@CascadingState.Localizer["Post"]</span>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div></div>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@code {
|
||||
|
||||
[CascadingParameter] CascadingState CascadingState { get; set; }
|
||||
[Parameter] public EventCallback<MessageForm> OnMessageSubmit { get; set; }
|
||||
[Parameter] public EventCallback<TimelineType> OnTimelineChanged { get; set; }
|
||||
[Parameter] public EventCallback<TimeSortingType> OnTimeSortingChanged { get; set; }
|
||||
[Inject] ILocalStorageService LocalStorage { get; set; }
|
||||
bool isPosting { get; set; } = false;
|
||||
ActionBarFilter Filters { get; set; } = new();
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var filters = await LocalStorage.GetItemAsync<ActionBarFilter>(nameof(ActionBarFilter));
|
||||
if (filters == default)
|
||||
await LocalStorage.SetItemAsync(nameof(ActionBarFilter), Filters);
|
||||
else
|
||||
Filters = filters;
|
||||
}
|
||||
|
||||
void OpenCloseMessageForm()
|
||||
{
|
||||
isPosting = !isPosting;
|
||||
}
|
||||
async Task OnTimelineChange(TimelineType timelineType)
|
||||
{
|
||||
Filters.TimelineType = timelineType;
|
||||
await LocalStorage.SetItemAsync(nameof(ActionBarFilter), Filters);
|
||||
await OnTimelineChanged.InvokeAsync(Filters.TimelineType);
|
||||
}
|
||||
async Task OnTimeSortChange(TimeSortingType timeSorting)
|
||||
{
|
||||
Filters.TimeSortingType = timeSorting;
|
||||
await LocalStorage.SetItemAsync(nameof(ActionBarFilter), Filters);
|
||||
await OnTimeSortingChanged.InvokeAsync(Filters.TimeSortingType);
|
||||
}
|
||||
}
|
||||
248
Components/Content.razor
Normal file
248
Components/Content.razor
Normal file
@ -0,0 +1,248 @@
|
||||
<div class="flex space-x-3 w-full neomorph is-nxxsmall rounded-xl @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)');">
|
||||
|
||||
<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")" />
|
||||
</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 space-y-1 flex-1 min-w-0">
|
||||
<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">
|
||||
<b class="shrink truncate max-w-[80%]" title="@Message.User.DisplayName">
|
||||
@Message.User.DisplayName
|
||||
</b>
|
||||
<a class="underline flex-1 min-w-6 opacity-50 truncate self-center text-xs" href="@Message.User.ProfileUrl" title="@Message.User.UserName">
|
||||
@Message.User.UserName
|
||||
</a>
|
||||
</span>
|
||||
<span class="flex-none inline-flex space-x-1 items-center">
|
||||
<span title="@Message.CreatedAt.ToLocalTime().ToString("📅dd/MM/yy 🕒HH:mm")">
|
||||
@Message.CreatedAt.GetPassedTime(CascadingState.Localizer)
|
||||
</span>
|
||||
<i aria-hidden="true" class="@Message.MessageType.GetMessageTypeIcon() text-md"
|
||||
title="@CascadingState.Localizer[Message.MessageType.ToString()]">
|
||||
</i>
|
||||
</span>
|
||||
</p>
|
||||
@if (Message.Title is { Length: > 0 })
|
||||
{
|
||||
<p class="text-sm md:text-base font-bold break-all">@Message.Title</p>
|
||||
}
|
||||
|
||||
@if (Message.Content is { Length: > 0 })
|
||||
{
|
||||
<div class="text-sm md:text-base break-all">
|
||||
@((MarkupString)Message.Content)
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (Message.Medias.Count != 0)
|
||||
{
|
||||
<div class="grid gap-4 auto-cols-auto grid-rows-1 grid-flow-col-dense">
|
||||
@foreach (var media in Message.Medias)
|
||||
{
|
||||
if (media.ContentType.StartsWith("image"))
|
||||
{
|
||||
<a class="w-auto" href="@media.Url">
|
||||
<img alt="@media.AltText" class="w-full rounded-lg @SUtility.IfTrueThen(Message.Medias.Count > 1, "max-h-[30vh]")" src="@media.Url" title="@media.AltText">
|
||||
</a>
|
||||
}
|
||||
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">
|
||||
<source src="@media.Url" type="@media.ContentType" />
|
||||
</video>
|
||||
}
|
||||
else if (media.ContentType.StartsWith("audio"))
|
||||
{
|
||||
<audio class="w-full max-h-8" controls="controls" preload="metadata" title="@media.FileName">
|
||||
<source src="@media.Url" type="@media.ContentType" />
|
||||
</audio>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="flex items-center space-x-3 align-center rounded-lg p-3 md:p-4 neomorph is-nxxsmall">
|
||||
<span>
|
||||
<i class="text-2xl ion-md-document"></i>
|
||||
</span>
|
||||
<div class="flex flex-col w-full space-y-1">
|
||||
<p class="text-xs md:text-sm break-all">
|
||||
<b>@media.FileName</b>
|
||||
</p>
|
||||
<p class="text-xs break-all">
|
||||
<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>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3 mt-3 justify-between">
|
||||
<div class="flex space-x-3">
|
||||
@if (OnMessageReply.HasDelegate)
|
||||
{
|
||||
<button class="button is-small is-rounded @(isAnswering ? "neoBtnSmallInsetPlain" : "neoBtnSmall")" @onclick="Reply"
|
||||
title="@CascadingState.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>
|
||||
}
|
||||
@if (OnMessageBoost.HasDelegate)
|
||||
{
|
||||
<button class="button is-small is-rounded @(Message.IsBoosted ? "neoBtnSmallInsetPlain" : "neoBtnSmall")" @onclick="() => OnMessageBoost.InvokeAsync(Message)"
|
||||
title="@CascadingState.Localizer["Boost"]">
|
||||
<span class="icon">
|
||||
<i aria-hidden="true" class="ion-md-repeat text-lg has-text-info"></i>
|
||||
</span>
|
||||
</button>
|
||||
}
|
||||
@if (OnMessageFavourite.HasDelegate)
|
||||
{
|
||||
<button class="button is-small is-rounded @SUtility.IfTrueThen(Message.IsFavourite, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => OnMessageFavourite.InvokeAsync(Message)"
|
||||
title="@CascadingState.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>
|
||||
}
|
||||
</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="@CascadingState.Localizer["Other"]">
|
||||
<span class="icon">
|
||||
<i aria-hidden="true" class="ion-md-more text-lg"></i>
|
||||
</span>
|
||||
</button>
|
||||
</DropdownTrigger>
|
||||
<DropdownContent>
|
||||
@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>@CascadingState.Localizer["Direct message"]</span>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
@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>@CascadingState.Localizer["Mute"]</span>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
@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>@CascadingState.Localizer["Block"]</span>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
@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="@CascadingState.Localizer["Delete"]">
|
||||
<span class="icon is-left">
|
||||
<i aria-hidden="true" class="ion-md-trash text-lg has-text-danger"></i>
|
||||
</span>
|
||||
<span>@CascadingState.Localizer["Delete"]</span>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</DropdownContent>
|
||||
</DropdownButton>
|
||||
@if (IncludeExpand)
|
||||
{
|
||||
<NavLink class="button is-small is-rounded neoBtnSmall" href="@($"expand/{Message.MessageId}")"
|
||||
title="@CascadingState.Localizer["Expand"]">
|
||||
<span class="icon">
|
||||
<i aria-hidden="true" class="ion-md-expand text-lg"></i>
|
||||
</span>
|
||||
</NavLink>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (isAnswering)
|
||||
{
|
||||
<MessageUpsertForm AnsweringMessage="Message" OnMessageSubmit="SubmitReply"></MessageUpsertForm>
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[CascadingParameter] Task<AuthenticationState> AuthState { get; set; }
|
||||
[CascadingParameter] CascadingState CascadingState { get; set; }
|
||||
[Parameter] public Message Message { get; set; } = new();
|
||||
[Parameter] public EventCallback<MessageForm> OnMessageReply { get; set; }
|
||||
[Parameter] public EventCallback<Message> OnMessageBoost { get; set; }
|
||||
[Parameter] public EventCallback<Message> OnMessageFavourite { get; set; }
|
||||
[Parameter] public EventCallback<Message> OnMessageDelete { get; set; }
|
||||
[Parameter] public EventCallback<Message> OnUserDirectMessage { get; set; }
|
||||
[Parameter] public EventCallback<Media> OnMessageMediaDownload { get; set; }
|
||||
[Parameter] public EventCallback<MessageUser> OnUserBlock { get; set; }
|
||||
[Parameter] public EventCallback<MessageUser> OnUserSilence { get; set; }
|
||||
[Parameter] public string CssContainer { get; set; }
|
||||
[Parameter] public bool IncludeExpand { get; set; } = true;
|
||||
|
||||
bool isAnswering { get; set; } = false;
|
||||
|
||||
string CurrentUserName
|
||||
{
|
||||
get
|
||||
{
|
||||
return AuthState.Result.User.Identity?.Name;
|
||||
}
|
||||
}
|
||||
|
||||
async Task DeleteMessage()
|
||||
{
|
||||
isAnswering = false;
|
||||
await OnMessageDelete.InvokeAsync(Message);
|
||||
}
|
||||
|
||||
async Task SubmitReply(MessageForm messageForm)
|
||||
{
|
||||
isAnswering = false;
|
||||
await OnMessageReply.InvokeAsync(messageForm);
|
||||
}
|
||||
|
||||
async Task Reply()
|
||||
{
|
||||
await Task.Run(() =>
|
||||
{
|
||||
});
|
||||
isAnswering = !isAnswering;
|
||||
}
|
||||
}
|
||||
13
Components/LoadingData.razor
Normal file
13
Components/LoadingData.razor
Normal file
@ -0,0 +1,13 @@
|
||||
<p class="w-full loadAnimation text-center">
|
||||
<span>.</span>
|
||||
<span>.</span>
|
||||
<span>.</span>
|
||||
@CascadingState.Localizer["loading"]
|
||||
<span>.</span>
|
||||
<span>.</span>
|
||||
<span>.</span>
|
||||
</p>
|
||||
|
||||
@code {
|
||||
[CascadingParameter] CascadingState CascadingState { get; set; }
|
||||
}
|
||||
@ -1,7 +1,430 @@
|
||||
<EditForm Model="">
|
||||
|
||||
<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="@CascadingState.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="@CascadingState.Localizer["oh shit... here we go again"]" rows="3"></textarea>
|
||||
<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">
|
||||
@switch (MessageForm.ContentType)
|
||||
{
|
||||
case ContentType.Markdown:
|
||||
@((MarkupString)Markdown.ToHtml(MessageForm.Content))
|
||||
break;
|
||||
case ContentType.HTML:
|
||||
<p>@((MarkupString)MessageForm.Content)</p>
|
||||
break;
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="help is-danger">
|
||||
<ValidationMessage For="() => MessageForm.Content" />
|
||||
@contentError
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col space-y-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-1">
|
||||
<p class="text-xs md:text-sm break-all">
|
||||
<i class="ion-md-image"></i> <b>@media.FileName</b>
|
||||
</p>
|
||||
<p class="text-xs break-all">
|
||||
<i class="ion-md-code"></i> @media.ContentType <i class="ion-md-fitness"></i> @media.Size.GetFileSize(CascadingState.Localizer)
|
||||
</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="@CascadingState.Localizer["Alternative text"]" rows="1" />
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<span>
|
||||
<i class="text-2xl @MessageForm.MediaType.GetMediaTypeIcon()"></i>
|
||||
</span>
|
||||
<div class="flex flex-col w-full space-y-1">
|
||||
<p class="text-xs md:text-sm break-all">
|
||||
<b>@media.FileName</b>
|
||||
</p>
|
||||
<p class="text-xs break-all">
|
||||
<i class="ion-md-code"></i> @media.ContentType <i class="ion-md-fitness"></i> @media.Size.GetFileSize(CascadingState.Localizer)
|
||||
</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>
|
||||
</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">
|
||||
<span>
|
||||
<i class="text-2xl @MessageForm.MediaType.GetMediaTypeIcon()"></i>
|
||||
</span>
|
||||
<div class="flex flex-col w-full space-y-1">
|
||||
<p class="text-xs md:text-sm break-all">
|
||||
<b>@media.FileName</b>
|
||||
</p>
|
||||
<p class="text-xs break-all">
|
||||
<i class="ion-md-code"></i> @media.ContentType <i class="ion-md-fitness"></i> @media.Size.GetFileSize(CascadingState.Localizer)
|
||||
</p>
|
||||
<audio controls="controls" class="w-full max-h-8">
|
||||
<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>
|
||||
</div>
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
@if (fileInputErrorMessage is { Length: > 0 })
|
||||
{
|
||||
<div class="help is-danger p-1 md:p-2 mb-3 rounded-xl neomorphInset is-nxxsmall">
|
||||
@((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(CascadingState.Localizer["Message scope type: {0}"], CascadingState.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="@CascadingState.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="@CascadingState.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="@CascadingState.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="@CascadingState.Localizer[MessageType.Public.ToString()]" type="button">
|
||||
<span class="icon">
|
||||
<i class="ion-md-globe text-base"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</DropdownContent>
|
||||
</DropdownButton>
|
||||
|
||||
<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>
|
||||
|
||||
<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">@CascadingState.Localizer[mediaType.ToString()]</option>
|
||||
}
|
||||
</InputSelect>
|
||||
</div>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="@MessageForm.MediaType.GetMediaTypeIcon()"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">@CascadingState.Localizer[contentType.ToString()]</option>
|
||||
}
|
||||
</InputSelect>
|
||||
</div>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="@MessageForm.ContentType.GetContentTypeIcon()"></i>
|
||||
</span>
|
||||
<div class="help is-danger">
|
||||
<ValidationMessage For="() => MessageForm.ContentType" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (showPreviewButton)
|
||||
{
|
||||
<button class="button is-small is-rounded @SUtility.IfTrueThen(isPreviewOpen, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="OnOpenClosePreview"
|
||||
title="@CascadingState.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>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3">
|
||||
|
||||
<button class="button is-small is-rounded has-icons-right neoBtnSmall" type="submit">
|
||||
<span>@CascadingState.Localizer["Post"]</span>
|
||||
<span class="icon is-right">
|
||||
<i class="ion-md-send"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</EditForm>
|
||||
|
||||
@code {
|
||||
|
||||
[CascadingParameter] CascadingState CascadingState { get; set; }
|
||||
[Parameter] public Message AnsweringMessage { get; set; }
|
||||
[Parameter] public EventCallback<MessageForm> OnMessageSubmit { get; set; }
|
||||
MessageForm MessageForm { get; set; } = new();
|
||||
int totalCharacters { get; set; } = 0;
|
||||
string fileInputErrorMessage { get; set; }
|
||||
string contentError { get; set; }
|
||||
string acceptedFilesTypes { get; set; } = ".jpg,.jpeg,.png,.gif";
|
||||
bool showPreviewButton { get; set; } = false;
|
||||
bool isPreviewOpen { get; set; } = false;
|
||||
|
||||
void OpenCloseMessageType()
|
||||
{
|
||||
MessageForm.IsScopeOptionsOpen = !MessageForm.IsScopeOptionsOpen;
|
||||
}
|
||||
|
||||
void UpdateMessageType(MessageType messageType)
|
||||
{
|
||||
MessageForm.MessageType = messageType;
|
||||
MessageForm.IsScopeOptionsOpen = false;
|
||||
}
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
if (AnsweringMessage != default)
|
||||
{
|
||||
MessageForm.Title = AnsweringMessage.Title;
|
||||
MessageForm.RootMessageId = AnsweringMessage.RootMessageId ?? AnsweringMessage.MessageId;
|
||||
}
|
||||
}
|
||||
|
||||
bool ShouldDisableUpload()
|
||||
{
|
||||
switch (MessageForm.MediaType)
|
||||
{
|
||||
case MediaType.Images:
|
||||
return MessageForm.Media.Count == 5;
|
||||
case MediaType.Video:
|
||||
case MediaType.Audio:
|
||||
return MessageForm.Media.Count == 1;
|
||||
case MediaType.Documents:
|
||||
return MessageForm.Media.Count == 3;
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
bool ShouldHaveMultipleUpload()
|
||||
{
|
||||
return MessageForm.MediaType is MediaType.Images or MediaType.Documents;
|
||||
}
|
||||
|
||||
async Task OnFileChange(InputFileChangeEventArgs eventArgs)
|
||||
{
|
||||
try
|
||||
{
|
||||
fileInputErrorMessage = string.Empty;
|
||||
var maximumFileCount = MessageForm.MediaType switch
|
||||
{
|
||||
MediaType.Images => 5,
|
||||
MediaType.Audio => 1,
|
||||
MediaType.Video => 1,
|
||||
MediaType.Documents => 3
|
||||
};
|
||||
if (eventArgs.FileCount > maximumFileCount)
|
||||
{
|
||||
fileInputErrorMessage = string.Format(CascadingState.Localizer["The maximum number of files accepted is {0}, but {1} were supplied."], maximumFileCount, eventArgs.FileCount);
|
||||
return;
|
||||
}
|
||||
if (eventArgs.FileCount + MessageForm.Media.Count > maximumFileCount)
|
||||
{
|
||||
fileInputErrorMessage = string.Format(CascadingState.Localizer["The maximum number of files accepted is {0}, but {1} were supplied."], maximumFileCount, $"{MessageForm.Media.Count}+{eventArgs.FileCount}");
|
||||
return;
|
||||
}
|
||||
var maxAllowedSize = MessageForm.MediaType switch
|
||||
{
|
||||
MediaType.Images => 3_145_728,
|
||||
MediaType.Audio => 5_242_880,
|
||||
MediaType.Video => 20_971_520,
|
||||
MediaType.Documents => 3_145_728
|
||||
};
|
||||
var uploadMedia = default(UploadMedia);
|
||||
using (var memStream = new MemoryStream())
|
||||
foreach (var file in eventArgs.GetMultipleFiles(maximumFileCount))
|
||||
{
|
||||
if (file.Name == default || file.ContentType == default) continue;
|
||||
if (MessageForm.Media.Any(m => m.FileName == file.Name)) continue;
|
||||
if (file.Size > maxAllowedSize)
|
||||
{
|
||||
fileInputErrorMessage += string.Format(CascadingState.Localizer["Supplied file \"{0}\" with size {1:N0}MBs exceeds the maximum of {2:N0}MBs."], file.Name, file.Size / 1_048_576, maxAllowedSize / 1_048_576) + "<br/>";
|
||||
continue;
|
||||
}
|
||||
|
||||
uploadMedia = new()
|
||||
{
|
||||
FileName = file.Name,
|
||||
ContentType = file.ContentType,
|
||||
Size = file.Size
|
||||
};
|
||||
try
|
||||
{
|
||||
using (var imgStream = file.OpenReadStream(maxAllowedSize))
|
||||
{
|
||||
await imgStream.CopyToAsync(memStream);
|
||||
memStream.Position = 0;
|
||||
uploadMedia.Blob = memStream.ToArray();
|
||||
await memStream.FlushAsync();
|
||||
}
|
||||
}
|
||||
catch (IOException e)
|
||||
{
|
||||
fileInputErrorMessage = e.Message;
|
||||
continue;
|
||||
}
|
||||
catch (Exception e)
|
||||
{
|
||||
fileInputErrorMessage = e.Message;
|
||||
continue;
|
||||
}
|
||||
if (MessageForm.MediaType is MediaType.Images or MediaType.Audio)
|
||||
uploadMedia.Base64Preview = $"data:{uploadMedia.ContentType};base64,{Convert.ToBase64String(uploadMedia.Blob)}";
|
||||
|
||||
MessageForm.Media.Add(uploadMedia);
|
||||
}
|
||||
}
|
||||
catch (Exception e)
|
||||
{
|
||||
fileInputErrorMessage = e.Message;
|
||||
}
|
||||
}
|
||||
|
||||
void RemoveFile(UploadMedia media)
|
||||
{
|
||||
MessageForm.Media.Remove(media);
|
||||
}
|
||||
|
||||
void OnTitleChanged(string value)
|
||||
{
|
||||
MessageForm.Title = value;
|
||||
}
|
||||
|
||||
void ContentLengthChanged()
|
||||
{
|
||||
totalCharacters = MessageForm.Content?.Length ?? 0;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
void OnContentTypeChanged(ContentType contentType)
|
||||
{
|
||||
MessageForm.ContentType = contentType;
|
||||
showPreviewButton = contentType is ContentType.Markdown or ContentType.HTML;
|
||||
}
|
||||
|
||||
void OnMediaTypeChanged(MediaType mediaType)
|
||||
{
|
||||
MessageForm.MediaType = mediaType;
|
||||
acceptedFilesTypes = mediaType switch
|
||||
{
|
||||
MediaType.Images => ".jpg,.jpeg,.png,.gif",
|
||||
MediaType.Video => ".webm,.mp4,.m4v",
|
||||
MediaType.Audio => ".mp3,.wav,.flac,.m4a",
|
||||
MediaType.Documents => ".xlsx,.csv,.ppt,.odt",
|
||||
_ => default
|
||||
};
|
||||
}
|
||||
|
||||
void OnOpenClosePreview()
|
||||
{
|
||||
isPreviewOpen = !isPreviewOpen;
|
||||
}
|
||||
|
||||
async Task OnValidSubmit()
|
||||
{
|
||||
contentError = default;
|
||||
if ((MessageForm.Content is { Length: 0 } && MessageForm.Media.Count == 0))
|
||||
{
|
||||
contentError = CascadingState.Localizer["Missing content, either message or media"];
|
||||
return;
|
||||
}
|
||||
|
||||
await OnMessageSubmit.InvokeAsync(MessageForm);
|
||||
}
|
||||
}
|
||||
36
Components/OpenDownContainer.razor
Normal file
36
Components/OpenDownContainer.razor
Normal file
@ -0,0 +1,36 @@
|
||||
<div class="flex flex-col w-full space-y-4">
|
||||
|
||||
<div class="flex w-full justify-between items-center py-2 md:py-3 px-3 md:px-4 space-x-2 rounded-lg neomorph is-nxsmall">
|
||||
@TitleChildren
|
||||
<button class="button is-rounded is-small @ButtonCss"
|
||||
@onclick:preventDefault @onclick="OpenCloseInnerContent" disabled="@(!HasInnerContent)">
|
||||
<span class="icon">
|
||||
<i aria-hidden="true" class="@LeftIconCss"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="@InnerContentContainerCss @Hidden">
|
||||
@InnerContent
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public RenderFragment TitleChildren { get; set; }
|
||||
[Parameter] public RenderFragment InnerContent { get; set; }
|
||||
[Parameter] public bool HasInnerContent { get; set; } = true;
|
||||
[Parameter] public string InnerContentContainerCss { get; set; } = "block w-auto ml-5 md:ml-10 rounded-lg neomorph is-nxsmall";
|
||||
|
||||
[Parameter]
|
||||
public bool IsOpen { get; set; } = false;
|
||||
string Hidden { get; set; } = VConstants.HideClass;
|
||||
string ButtonCss => $"{(HasInnerContent ? default : "cursor-not-allowed")} neoBtnSmall";
|
||||
string LeftIconCss => IsOpen ? "ion-md-arrow-dropup" : "ion-md-arrow-dropdown";
|
||||
|
||||
void OpenCloseInnerContent()
|
||||
{
|
||||
IsOpen = !IsOpen;
|
||||
Hidden = IsOpen ? default : VConstants.HideClass;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user