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

Refactor receiver input and improve UI/UX

Browse Source 
Replaced receiver list with a tag-based `DxTagBox` for better flexibility and dynamic updates. Updated receiver management logic to synchronize `_receivers` and `_receiverTags`. Enhanced accessibility with ARIA attributes for the suggestion list.

Redesigned the "Add Receiver" button with custom styles, hover effects, and an inline SVG icon. Improved the suggestion list with horizontal scrolling and nowrap styling. Styled tags and added a remove button for each tag.

Increased recent receiver suggestions fetch limit to 20. Added validation to ensure default envelope type selection. Refactored empty state handling and cleaned up redundant code for better maintainability.
This commit is contained in:
tekh
2026-10-05 21:58:51 +02:00
parent ece676fbcf
commit e89d471c6f
3 changed files with 151 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
View File

@@ -1271,10 +1271,31 @@
justify-content: flex-end;
}
.sender-create-wizard__add-receiver-btn.dxbl-btn {
min-width: 210px;
.sender-create-wizard__add-receiver-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 36px;
min-width: 220px;
font-weight: 700;
box-shadow: 0 8px 18px rgba(14, 116, 144, 0.22);
font-size: 0.84rem;
border: 1px solid rgba(14, 116, 144, 0.28);
border-radius: 8px;
background: rgba(236, 254, 255, 0.95);
color: #0f766e;
box-shadow: 0 6px 14px rgba(14, 116, 144, 0.15);
padding: 0.45rem 0.9rem;
}
.sender-create-wizard__add-receiver-btn:hover:not(:disabled) {
background: rgba(207, 250, 254, 1);
color: #0f766e;
}
.sender-create-wizard__add-receiver-btn:disabled {
opacity: 0.58;
cursor: not-allowed;
}
.sender-create-wizard__suggestions {
@@ -1291,12 +1312,17 @@
.sender-create-wizard__suggestion-list {
display: flex;
flex-wrap: wrap;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
gap: 0.45rem;
padding-bottom: 0.25rem;
}
.sender-create-wizard__suggestion-item {
display: inline-flex;
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: flex-start;
gap: 0.12rem;
@@ -1308,6 +1334,54 @@
min-width: 0;
}
.sender-create-wizard__receiver-tagbox-wrap {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sender-create-wizard__receiver-tagbox {
width: 100%;
}
.sender-create-wizard__receiver-tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.18rem 0.45rem;
border-radius: 999px;
background: rgba(236, 254, 255, 0.95);
border: 1px solid rgba(14, 116, 144, 0.25);
}
.sender-create-wizard__receiver-tag-name {
font-weight: 700;
}
.sender-create-wizard__receiver-tag-email {
color: #64748b;
font-size: 0.78rem;
}
.sender-create-wizard__receiver-tag-remove {
border: 0;
background: transparent;
color: #0f766e;
font-size: 0.76rem;
font-weight: 700;
line-height: 1;
padding: 0;
width: 1rem;
height: 1rem;
cursor: pointer;
}
.sender-create-wizard__tagbox-empty {
height: 0;
padding: 0;
margin: 0;
}
.sender-create-wizard__suggestion-item:disabled {
opacity: 0.58;
}