diff --git a/Iceshrimp.Frontend/Components/GlobalComponents.razor b/Iceshrimp.Frontend/Components/GlobalComponents.razor index fb9d75a1..b0a0c5c1 100644 --- a/Iceshrimp.Frontend/Components/GlobalComponents.razor +++ b/Iceshrimp.Frontend/Components/GlobalComponents.razor @@ -2,6 +2,7 @@ + @code { } diff --git a/Iceshrimp.Frontend/Components/PromptDialog.razor b/Iceshrimp.Frontend/Components/PromptDialog.razor new file mode 100644 index 00000000..6cc9bc06 --- /dev/null +++ b/Iceshrimp.Frontend/Components/PromptDialog.razor @@ -0,0 +1,74 @@ +@using Iceshrimp.Frontend.Core.Services +@using Iceshrimp.Frontend.Localization +@using Microsoft.Extensions.Localization +@inject GlobalComponentSvc GlobalComponentSvc; +@inject IJSRuntime Js; +@inject IStringLocalizer Loc; + + + + @Text + @if (MultiLine) + { + + } + else + { + + } + + @(ButtonText ?? Loc["Submit"]) + @Loc["Cancel"] + + + + +@code { + private ElementReference Dialog { get; set; } + private IJSObjectReference _module = null!; + private EventCallback Action { get; set; } + private string Text { get; set; } = ""; + private string Placeholder { get; set; } = ""; + private bool MultiLine { get; set; } + private string? ButtonText { get; set; } + private string Input { get; set; } = ""; + + private async Task CloseDialog() + { + await _module.InvokeVoidAsync("closeDialog", Dialog); + } + + public async Task Prompt(EventCallback action, string text, string placeholder, bool multiLine = false, string? buttonText = null) + { + Action = action; + Text = text; + Placeholder = placeholder; + MultiLine = multiLine; + ButtonText = buttonText; + Input = ""; + + StateHasChanged(); + + await _module.InvokeVoidAsync("openDialog", Dialog); + } + + private async Task ConfirmAction() + { + await Action.InvokeAsync(MultiLine ? Input.ReplaceLineEndings("\n").Trim() : Input.ReplaceLineEndings(" ").Trim()); + await CloseDialog(); + } + + private async Task CancelAction() + { + await Action.InvokeAsync(null); + await CloseDialog(); + } + + protected override async Task OnInitializedAsync() + { + _module = await Js.InvokeAsync("import", + "./Components/PromptDialog.razor.js"); + GlobalComponentSvc.PromptDialog = this; + } +} \ No newline at end of file diff --git a/Iceshrimp.Frontend/Components/PromptDialog.razor.css b/Iceshrimp.Frontend/Components/PromptDialog.razor.css new file mode 100644 index 00000000..a874cec7 --- /dev/null +++ b/Iceshrimp.Frontend/Components/PromptDialog.razor.css @@ -0,0 +1,45 @@ +.dialog { + margin: auto; +} + +.dialog::backdrop { + opacity: 50%; + background-color: black; +} + +.prompt { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + background-color: var(--background-color); + border-radius: 1rem; + margin: auto; + padding: 1rem; + min-width: 12rem; + width: max-content; + max-width: 45rem; + color: var(--font-color); + text-align: center; + text-wrap: wrap; + word-break: break-word; +} + +.prompt textarea { + width: 100%; +} + +.buttons { + display: flex; + gap: 0.5rem; +} + +.submit-btn { + background: var(--accent-color); + color: var(--font-color); +} + +.submit-btn[disabled] { + opacity: 0.4; + cursor: not-allowed; +} \ No newline at end of file diff --git a/Iceshrimp.Frontend/Components/PromptDialog.razor.js b/Iceshrimp.Frontend/Components/PromptDialog.razor.js new file mode 100644 index 00000000..1a098dcb --- /dev/null +++ b/Iceshrimp.Frontend/Components/PromptDialog.razor.js @@ -0,0 +1,7 @@ +export function openDialog(element) { + element.showModal() +} + +export function closeDialog(element) { + element.close() +} \ No newline at end of file diff --git a/Iceshrimp.Frontend/Core/Services/GlobalComponentSvc.cs b/Iceshrimp.Frontend/Core/Services/GlobalComponentSvc.cs index ba6b2172..e8b647a3 100644 --- a/Iceshrimp.Frontend/Core/Services/GlobalComponentSvc.cs +++ b/Iceshrimp.Frontend/Core/Services/GlobalComponentSvc.cs @@ -8,4 +8,5 @@ public class GlobalComponentSvc public BannerContainer? BannerComponent { get; set; } public ConfirmDialog? ConfirmDialog { get; set; } public NoticeDialog? NoticeDialog { get; set; } + public PromptDialog? PromptDialog { get; set; } }