diff --git a/Iceshrimp.Frontend/Components/ConfirmDialog.razor b/Iceshrimp.Frontend/Components/ConfirmDialog.razor new file mode 100644 index 00000000..4d071404 --- /dev/null +++ b/Iceshrimp.Frontend/Components/ConfirmDialog.razor @@ -0,0 +1,63 @@ +@using Iceshrimp.Assets.PhosphorIcons +@using Iceshrimp.Frontend.Core.Services +@using Iceshrimp.Frontend.Localization +@using Microsoft.Extensions.Localization +@inject GlobalComponentSvc GlobalComponentSvc; +@inject IJSRuntime Js; +@inject IStringLocalizer Loc; + + +
+ + @Question +
+ + +
+
+
+ +@code { + private ElementReference Dialog { get; set; } + private IJSObjectReference _module = null!; + private EventCallback Action { get; set; } + private string Question { get; set; } = ""; + private IconName? ConfirmIcon { get; set; } + private string? ButtonText { get; set; } + + private async Task CloseDialog() + { + await _module.InvokeVoidAsync("closeDialog", Dialog); + } + + public async Task Confirm(EventCallback action, string question, IconName? icon = null, string? buttonText = null) + { + Action = action; + Question = question; + ConfirmIcon = icon; + ButtonText = buttonText; + + StateHasChanged(); + + await _module.InvokeVoidAsync("openDialog", Dialog); + } + + private async Task ConfirmAction() + { + await Action.InvokeAsync(true); + await CloseDialog(); + } + + private async Task CancelAction() + { + await Action.InvokeAsync(false); + await CloseDialog(); + } + + protected override async Task OnInitializedAsync() + { + _module = await Js.InvokeAsync("import", + "./Components/ConfirmDialog.razor.js"); + GlobalComponentSvc.ConfirmDialog = this; + } +} \ No newline at end of file diff --git a/Iceshrimp.Frontend/Components/ConfirmDialog.razor.css b/Iceshrimp.Frontend/Components/ConfirmDialog.razor.css new file mode 100644 index 00000000..dfe63603 --- /dev/null +++ b/Iceshrimp.Frontend/Components/ConfirmDialog.razor.css @@ -0,0 +1,39 @@ +.dialog { + margin: auto; +} + +.dialog::backdrop { + opacity: 50%; + background-color: black; +} + +.confirm { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + background-color: var(--background-color); + border-radius: 1rem; + margin: auto; + padding: 1rem; + width: max-content; + max-width: 45rem; + color: var(--font-color); + text-align: center; + text-wrap: wrap; + word-break: break-word; +} + +.buttons { + display: flex; + gap: 0.5rem; +} + +.confirm-icon { + color: var(--notice-color); +} + +.confirm-btn { + background: var(--accent-color); + color: var(--font-color); +} \ No newline at end of file diff --git a/Iceshrimp.Frontend/Components/ConfirmDialog.razor.js b/Iceshrimp.Frontend/Components/ConfirmDialog.razor.js new file mode 100644 index 00000000..1a098dcb --- /dev/null +++ b/Iceshrimp.Frontend/Components/ConfirmDialog.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/Components/GlobalComponents.razor b/Iceshrimp.Frontend/Components/GlobalComponents.razor index c704a60c..b86daa24 100644 --- a/Iceshrimp.Frontend/Components/GlobalComponents.razor +++ b/Iceshrimp.Frontend/Components/GlobalComponents.razor @@ -1,5 +1,6 @@ + @code { -} \ No newline at end of file +} diff --git a/Iceshrimp.Frontend/Core/Services/GlobalComponentSvc.cs b/Iceshrimp.Frontend/Core/Services/GlobalComponentSvc.cs index d414cde3..3184049b 100644 --- a/Iceshrimp.Frontend/Core/Services/GlobalComponentSvc.cs +++ b/Iceshrimp.Frontend/Core/Services/GlobalComponentSvc.cs @@ -4,6 +4,7 @@ namespace Iceshrimp.Frontend.Core.Services; public class GlobalComponentSvc { - public EmojiPicker? EmojiPicker { get; set; } - public BannerContainer? BannerComponent { get; set; } -} \ No newline at end of file + public EmojiPicker? EmojiPicker { get; set; } + public BannerContainer? BannerComponent { get; set; } + public ConfirmDialog? ConfirmDialog { get; set; } +}