Refactor receiver management UI in wizard
Simplify and restructure the UI for managing receivers in the sender creation wizard. Replace separate fields for adding new receivers with an inline approach, allowing users to add receivers directly within the receiver list. Introduce a new inline receiver item with fields for name and email, along with an "Add" button. Update the receiver list layout to accommodate the new design. Add styles for the inline receiver item and "Add Receiver" button in `sender-page.css`, including hover effects, disabled states, and alignment adjustments. Ensure the new design integrates seamlessly with the existing layout.
This commit is contained in:
@@ -282,105 +282,85 @@
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="sender-create-wizard__form-grid">
|
||||
<div class="sender-create-wizard__field">
|
||||
<label class="sender-create-wizard__label sender-create-wizard__label-row">
|
||||
<span>@L("FullName", "Vor- und Nachname") <span class="sender-create-wizard__required">*</span></span>
|
||||
<MudTooltip Text='@L("SenderWizard_Help_FullName", "Name des Empfaengers wie er in E-Mails und Signaturansicht angezeigt wird.")'>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_FullName", "Hilfe zum Feld Vor- und Nachname")' />
|
||||
</MudTooltip>
|
||||
</label>
|
||||
<DxTextBox Text="@_receiverName"
|
||||
TextChanged="OnReceiverNameChanged"
|
||||
BindValueMode="BindValueMode.OnInput"
|
||||
NullText="Max Mustermann"
|
||||
CssClass="w-100" />
|
||||
</div>
|
||||
<div class="sender-create-wizard__receiver-tagbox-wrap">
|
||||
<label class="sender-create-wizard__label sender-create-wizard__label-row">
|
||||
<span>@L("Receiver", "Empfänger")</span>
|
||||
<MudTooltip Text='@L("SenderWizard_Help_ReceiverList", "Hier sehen und verwalten Sie alle aktuell hinzugefuegten Empfaenger.")'>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_ReceiverList", "Hilfe zur Empfaengerliste")' />
|
||||
</MudTooltip>
|
||||
</label>
|
||||
|
||||
<div class="sender-create-wizard__field">
|
||||
<label class="sender-create-wizard__label sender-create-wizard__label-row">
|
||||
<span>@L("EmailAddress", "E-Mail-Adresse") <span class="sender-create-wizard__required">*</span></span>
|
||||
<MudTooltip Text='@L("SenderWizard_Help_EmailAddress", "An diese Adresse wird die Signaturanfrage gesendet.")'>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_EmailAddress", "Hilfe zum Feld E-Mail-Adresse")' />
|
||||
</MudTooltip>
|
||||
</label>
|
||||
<DxTextBox Text="@_receiverEmail"
|
||||
TextChanged="OnReceiverEmailChanged"
|
||||
BindValueMode="BindValueMode.OnInput"
|
||||
NullText="name@beispiel.de"
|
||||
CssClass="w-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sender-create-wizard__receiver-list" role="table" aria-label="Added receivers">
|
||||
@for (var i = 0; i < _receivers.Count; i++)
|
||||
{
|
||||
var rowIndex = i;
|
||||
var receiver = _receivers[rowIndex];
|
||||
|
||||
<div class="sender-create-wizard__receiver-actions">
|
||||
<button type="button"
|
||||
class="sender-create-wizard__add-receiver-btn"
|
||||
@onclick="AddReceiver"
|
||||
disabled="@IsActionLocked">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5V7.5H11.5a.5.5 0 0 1 0 1H8.5v3a.5.5 0 0 1-1 0v-3H4.5a.5.5 0 0 1 0-1H7.5v-3A.5.5 0 0 1 8 4z" />
|
||||
</svg>
|
||||
<span>@L("AddReceiver", "Empfänger hinzufügen")</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (_receivers.Count == 0)
|
||||
{
|
||||
<div class="sender-create-wizard__empty-list">
|
||||
@L("SenderEditor_NoReceiversAdded", "Noch keine Empfänger hinzugefügt.")
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="sender-create-wizard__receiver-tagbox-wrap">
|
||||
<label class="sender-create-wizard__label sender-create-wizard__label-row">
|
||||
<span>@L("Receiver", "Empfänger")</span>
|
||||
<MudTooltip Text='@L("SenderWizard_Help_ReceiverList", "Hier sehen und verwalten Sie alle aktuell hinzugefuegten Empfaenger.")'>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_ReceiverList", "Hilfe zur Empfaengerliste")' />
|
||||
</MudTooltip>
|
||||
</label>
|
||||
|
||||
<div class="sender-create-wizard__receiver-list" role="table" aria-label="Added receivers">
|
||||
@for (var i = 0; i < _receivers.Count; i++)
|
||||
{
|
||||
var rowIndex = i;
|
||||
var receiver = _receivers[rowIndex];
|
||||
|
||||
<div class="sender-create-wizard__receiver-item" role="row">
|
||||
<div class="sender-create-wizard__form-grid sender-create-wizard__field--full sender-create-wizard__receiver-item-fields">
|
||||
<div class="sender-create-wizard__field">
|
||||
<DxTextBox Text="@receiver.FullName"
|
||||
TextChanged="@(value => OnReceiverListNameChanged(rowIndex, value))"
|
||||
BindValueMode="BindValueMode.OnInput"
|
||||
NullText='@L("FullName", "Vor- und Nachname")'
|
||||
CssClass="w-100"
|
||||
Enabled="@(!IsActionLocked)" />
|
||||
</div>
|
||||
<div class="sender-create-wizard__field">
|
||||
<DxTextBox Text="@receiver.EmailAddress"
|
||||
TextChanged="@(value => OnReceiverListEmailChanged(rowIndex, value))"
|
||||
BindValueMode="BindValueMode.OnInput"
|
||||
NullText='@L("EmailAddress", "E-Mail-Adresse")'
|
||||
CssClass="w-100"
|
||||
Enabled="@(!IsActionLocked)" />
|
||||
</div>
|
||||
<div class="sender-create-wizard__receiver-item" role="row">
|
||||
<div class="sender-create-wizard__form-grid sender-create-wizard__field--full sender-create-wizard__receiver-item-fields">
|
||||
<div class="sender-create-wizard__field">
|
||||
<DxTextBox Text="@receiver.FullName"
|
||||
TextChanged="@(value => OnReceiverListNameChanged(rowIndex, value))"
|
||||
BindValueMode="BindValueMode.OnInput"
|
||||
NullText='@L("FullName", "Vor- und Nachname")'
|
||||
CssClass="w-100"
|
||||
Enabled="@(!IsActionLocked)" />
|
||||
</div>
|
||||
<div class="sender-create-wizard__field">
|
||||
<DxTextBox Text="@receiver.EmailAddress"
|
||||
TextChanged="@(value => OnReceiverListEmailChanged(rowIndex, value))"
|
||||
BindValueMode="BindValueMode.OnInput"
|
||||
NullText='@L("EmailAddress", "E-Mail-Adresse")'
|
||||
CssClass="w-100"
|
||||
Enabled="@(!IsActionLocked)" />
|
||||
</div>
|
||||
<button type="button"
|
||||
class="sender-create-wizard__receiver-remove-btn"
|
||||
@onclick="() => RemoveReceiver(receiver)"
|
||||
disabled="@IsActionLocked"
|
||||
title='@L("Remove", "Entfernen")'
|
||||
aria-label='@L("Remove", "Entfernen")'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
|
||||
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
<button type="button"
|
||||
class="sender-create-wizard__receiver-remove-btn"
|
||||
@onclick="() => RemoveReceiver(receiver)"
|
||||
disabled="@IsActionLocked"
|
||||
title='@L("Remove", "Entfernen")'
|
||||
aria-label='@L("Remove", "Entfernen")'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
|
||||
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="sender-create-wizard__receiver-item sender-create-wizard__receiver-item--new" role="row">
|
||||
<div class="sender-create-wizard__form-grid sender-create-wizard__field--full sender-create-wizard__receiver-item-fields">
|
||||
<div class="sender-create-wizard__field">
|
||||
<DxTextBox Text="@_receiverName"
|
||||
TextChanged="OnReceiverNameChanged"
|
||||
BindValueMode="BindValueMode.OnInput"
|
||||
NullText="Max Mustermann"
|
||||
CssClass="w-100"
|
||||
Enabled="@(!IsActionLocked)" />
|
||||
</div>
|
||||
<div class="sender-create-wizard__field">
|
||||
<DxTextBox Text="@_receiverEmail"
|
||||
TextChanged="OnReceiverEmailChanged"
|
||||
BindValueMode="BindValueMode.OnInput"
|
||||
NullText="name@beispiel.de"
|
||||
CssClass="w-100"
|
||||
Enabled="@(!IsActionLocked)" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="sender-create-wizard__receiver-add-inline-btn"
|
||||
@onclick="AddReceiver"
|
||||
disabled="@IsActionLocked"
|
||||
title='@L("AddReceiver", "Empfänger hinzufügen")'
|
||||
aria-label='@L("AddReceiver", "Empfänger hinzufügen")'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M8 1a.5.5 0 0 1 .5.5V7.5h6a.5.5 0 0 1 0 1h-6v6a.5.5 0 0 1-1 0v-6h-6a.5.5 0 0 1 0-1h6v-6A.5.5 0 0 1 8 1z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user