AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Replace DxButton with HTML buttons and update styles

Browse Source 
Replaced DevExpress DxButton components with standard HTML
<button> elements in EnvelopeSenderEditorPage.razor for
"Add Receiver" and "Add Signature" actions. The new buttons
include SVG icons and text for improved customization and
styling.

Updated envelope-viewer.css to add new styles for the
buttons, including `.sender-toolbar-action-btn` and
`.sender-toolbar-action-btn--compact` classes. Removed
unused styles related to DxButton components and adjusted
`.sender-receiver-chip__action` for proper width handling.

These changes improve design flexibility and maintainability.
This commit is contained in:
tekh
2026-07-01 17:02:19 +02:00
parent ca24a96084
commit 2af8815cf6
2 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderEditorPage.razor
View File

@@ -49,11 +49,14 @@
<span class="sender-receivers-panel__count">@_receivers.Count</span> <span class="sender-receivers-panel__count">@_receivers.Count</span>
</div> </div>
<DxButton CssClass="sender-receivers-panel__add-btn pdf-toolbar-like-btn pdf-toolbar-like-btn--add" <button class="pdf-toolbar__btn pdf-toolbar__btn--signature-change sender-toolbar-action-btn"
Text="Empfänger hinzufügen" @onclick="OpenAddReceiverPopup"
RenderStyle="ButtonRenderStyle.Secondary" title="Empfänger hinzufügen">
SizeMode="SizeMode.Small" <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
Click="OpenAddReceiverPopup" /> <path d="M8 1a.5.5 0 0 1 .5.5v6h6a.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>
<span class="pdf-toolbar__btn-text">Empfänger hinzufügen</span>
</button>
</div> </div>
@if (_receivers.Count == 0) @if (_receivers.Count == 0)
@@ -73,11 +76,14 @@
<div class="sender-receiver-chip__email">@receiver.Email</div> <div class="sender-receiver-chip__email">@receiver.Email</div>
</div> </div>
<DxButton CssClass="sender-receiver-chip__action pdf-toolbar-like-btn pdf-toolbar-like-btn--signature" <button class="pdf-toolbar__btn pdf-toolbar__btn--signature-change sender-toolbar-action-btn sender-toolbar-action-btn--compact"
Text="Signatur hinzufügen" @onclick="() => AddSignatureForReceiver(receiver)"
RenderStyle="ButtonRenderStyle.Secondary" title="Signatur hinzufügen">
SizeMode="SizeMode.Small" <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
Click="@(() => AddSignatureForReceiver(receiver))" /> <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10z" />
</svg>
<span class="pdf-toolbar__btn-text">Signatur hinzufügen</span>
</button>
</div> </div>
} }
</div> </div>

17
EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
View File

@@ -573,6 +573,15 @@ body.resizing {
white-space: nowrap; white-space: nowrap;
} }
.sender-toolbar-action-btn {
min-width: auto;
padding: 0.5rem 0.75rem;
}
.sender-toolbar-action-btn--compact {
padding: 0.45rem 0.7rem;
}
.sender-receivers-panel { .sender-receivers-panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -726,12 +735,6 @@ body.resizing {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.sender-receiver-chip__action .dxbl-btn {
border-radius: 8px;
font-weight: 600;
white-space: nowrap;
}
.sender-receiver-popup .dxbl-modal { .sender-receiver-popup .dxbl-modal {
border-radius: 18px; border-radius: 18px;
} }
@@ -1056,7 +1059,7 @@ body.resizing {
width: 100%; width: 100%;
} }
.sender-receiver-chip__action .dxbl-btn { .sender-receiver-chip__action {
width: 100%; width: 100%;
} }