- Sustituidas las confirmaciones genéricas del navegador por una ventana propia, responsive y accesible.
- Adaptados los avisos al importar, tramitar, rechazar y cambiar la asignación de denuncias de otros usuarios o grupos. - Añadidos textos y botones específicos para cada operación. - Actualizadas las instrucciones, sustituyendo “modal” por “ventana de configuración de la subida”. - Aclarado el funcionamiento del asunto, grupo de destino y tercero.
This commit is contained in:
@@ -0,0 +1,110 @@
|
||||
@implements IDisposable
|
||||
@inject UiDialogService Dialog
|
||||
|
||||
@if (Dialog.IsVisible)
|
||||
{
|
||||
<div class="app-confirmation-backdrop"
|
||||
role="presentation"
|
||||
@onkeydown="HandleKeyDown">
|
||||
<section class="@DialogCss"
|
||||
role="alertdialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="app-confirmation-title"
|
||||
aria-describedby="app-confirmation-message">
|
||||
<div class="app-confirmation__accent" aria-hidden="true"></div>
|
||||
|
||||
<div class="app-confirmation__content">
|
||||
<div class="@IconCss" aria-hidden="true">!</div>
|
||||
|
||||
<div class="app-confirmation__copy">
|
||||
<div class="app-confirmation__eyebrow">@Eyebrow</div>
|
||||
<h2 id="app-confirmation-title" class="app-confirmation__title">
|
||||
@Dialog.Title
|
||||
</h2>
|
||||
<p id="app-confirmation-message" class="app-confirmation__message">
|
||||
@Dialog.Message
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-confirmation__actions">
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary app-confirmation__button"
|
||||
@ref="_cancelButton"
|
||||
@onclick="Dialog.Cancel">
|
||||
@Dialog.CancelText
|
||||
</button>
|
||||
<button type="button"
|
||||
class="@ConfirmButtonCss"
|
||||
@onclick="Dialog.Confirm">
|
||||
@Dialog.ConfirmText
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
private ElementReference _cancelButton;
|
||||
private bool _focusPending;
|
||||
|
||||
private string DialogCss =>
|
||||
$"app-confirmation app-confirmation--{ToneName}";
|
||||
|
||||
private string IconCss =>
|
||||
$"app-confirmation__icon app-confirmation__icon--{ToneName}";
|
||||
|
||||
private string ConfirmButtonCss =>
|
||||
Dialog.Tone == UiDialogTone.Danger
|
||||
? "btn app-confirmation__button app-confirmation__button--danger"
|
||||
: "btn app-confirmation__button app-confirmation__button--primary";
|
||||
|
||||
private string ToneName => Dialog.Tone switch
|
||||
{
|
||||
UiDialogTone.Danger => "danger",
|
||||
UiDialogTone.Information => "information",
|
||||
_ => "warning"
|
||||
};
|
||||
|
||||
private string Eyebrow => Dialog.Tone switch
|
||||
{
|
||||
UiDialogTone.Danger => "Acción irreversible",
|
||||
UiDialogTone.Information => "Confirmación",
|
||||
_ => "Revisa antes de continuar"
|
||||
};
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Dialog.Changed += HandleDialogChanged;
|
||||
}
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (!_focusPending || !Dialog.IsVisible)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
_focusPending = false;
|
||||
await _cancelButton.FocusAsync();
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
Dialog.Changed -= HandleDialogChanged;
|
||||
}
|
||||
|
||||
private void HandleDialogChanged()
|
||||
{
|
||||
_focusPending = Dialog.IsVisible;
|
||||
_ = InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
private void HandleKeyDown(KeyboardEventArgs args)
|
||||
{
|
||||
if (string.Equals(args.Key, "Escape", StringComparison.Ordinal))
|
||||
{
|
||||
Dialog.Cancel();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user