feat(unified-mobile-desktop-ui): Complete US-517 - Lista Bonuri Desktop - Dialog Ștergere Material Design
Implemented by Ralph autonomous loop. Iteration: 19 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -355,8 +355,8 @@
|
||||
"npm run build passes",
|
||||
"Verify in browser: dialogul arată modern"
|
||||
],
|
||||
"passes": false,
|
||||
"notes": ""
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 19"
|
||||
},
|
||||
{
|
||||
"id": "US-518",
|
||||
|
||||
@@ -176,3 +176,9 @@ Design Reference: src/modules/reports/views/InvoicesView.vue
|
||||
[2026-01-12 23:28:27] Working on story: US-516
|
||||
[2026-01-12 23:28:27] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_18_US-516.log)
|
||||
[2026-01-12 23:33:04] SUCCESS: Story US-516 passed!
|
||||
[2026-01-12 23:33:04] Changes committed
|
||||
[2026-01-12 23:33:04] Progress: 16/19 stories completed
|
||||
[2026-01-12 23:33:06] === Iteration 19/100 ===
|
||||
[2026-01-12 23:33:06] Working on story: US-517
|
||||
[2026-01-12 23:33:06] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_19_US-517.log)
|
||||
[2026-01-12 23:35:59] SUCCESS: Story US-517 passed!
|
||||
|
||||
159
src/assets/css/vendor/primevue-overrides.css
vendored
159
src/assets/css/vendor/primevue-overrides.css
vendored
@@ -433,3 +433,162 @@
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
/* ============ US-517: Material Design 3 ConfirmDialog ============ */
|
||||
|
||||
/**
|
||||
* MD3-styled ConfirmDialog for delete confirmations and other modals.
|
||||
* Features: elevated surface, proper spacing, clear button hierarchy.
|
||||
*/
|
||||
|
||||
/* Dialog container - MD3 elevated surface */
|
||||
.p-confirm-dialog {
|
||||
border-radius: var(--radius-lg) !important;
|
||||
box-shadow: var(--shadow-xl) !important;
|
||||
background: var(--surface-card) !important;
|
||||
border: none !important;
|
||||
min-width: 320px !important;
|
||||
max-width: 400px !important;
|
||||
}
|
||||
|
||||
/* Dialog header - MD3 style with proper spacing */
|
||||
.p-confirm-dialog .p-dialog-header {
|
||||
padding: var(--space-lg) var(--space-lg) var(--space-sm) var(--space-lg) !important;
|
||||
background: var(--surface-card) !important;
|
||||
border-bottom: none !important;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
|
||||
}
|
||||
|
||||
/* Dialog title - MD3 headline style */
|
||||
.p-confirm-dialog .p-dialog-title {
|
||||
font-size: var(--text-xl) !important;
|
||||
font-weight: var(--font-semibold) !important;
|
||||
color: var(--text-color) !important;
|
||||
line-height: var(--leading-tight) !important;
|
||||
}
|
||||
|
||||
/* Hide default icon in header (we'll use it in content) */
|
||||
.p-confirm-dialog .p-dialog-header-icons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Dialog content - MD3 body text */
|
||||
.p-confirm-dialog .p-dialog-content {
|
||||
padding: var(--space-sm) var(--space-lg) var(--space-lg) var(--space-lg) !important;
|
||||
background: var(--surface-card) !important;
|
||||
color: var(--text-color-secondary) !important;
|
||||
font-size: var(--text-base) !important;
|
||||
line-height: var(--leading-normal) !important;
|
||||
}
|
||||
|
||||
/* Icon in content area */
|
||||
.p-confirm-dialog .p-confirm-dialog-icon {
|
||||
font-size: 1.5rem !important;
|
||||
margin-right: var(--space-md) !important;
|
||||
color: var(--color-error) !important;
|
||||
}
|
||||
|
||||
/* Message text */
|
||||
.p-confirm-dialog .p-confirm-dialog-message {
|
||||
margin-left: 0 !important;
|
||||
color: var(--text-color-secondary) !important;
|
||||
}
|
||||
|
||||
/* Dialog footer - MD3 actions area */
|
||||
.p-confirm-dialog .p-dialog-footer {
|
||||
padding: var(--space-sm) var(--space-lg) var(--space-lg) var(--space-lg) !important;
|
||||
background: var(--surface-card) !important;
|
||||
border-top: none !important;
|
||||
border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
gap: var(--space-sm) !important;
|
||||
}
|
||||
|
||||
/* Footer buttons - MD3 text button style */
|
||||
.p-confirm-dialog .p-dialog-footer .p-button {
|
||||
min-width: 80px !important;
|
||||
padding: var(--space-sm) var(--space-md) !important;
|
||||
font-weight: var(--font-medium) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
}
|
||||
|
||||
/* Secondary/Cancel button - MD3 text button */
|
||||
.p-confirm-dialog .p-dialog-footer .p-button.p-button-text,
|
||||
.p-confirm-dialog .p-dialog-footer .p-button:not(.p-button-danger):not(.p-button-success) {
|
||||
background: transparent !important;
|
||||
color: var(--color-primary) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.p-confirm-dialog .p-dialog-footer .p-button.p-button-text:hover,
|
||||
.p-confirm-dialog .p-dialog-footer .p-button:not(.p-button-danger):not(.p-button-success):hover {
|
||||
background: var(--primary-50, rgba(37, 99, 235, 0.08)) !important;
|
||||
}
|
||||
|
||||
/* Danger button - MD3 filled tonal */
|
||||
.p-confirm-dialog .p-dialog-footer .p-button.p-button-danger {
|
||||
background: var(--color-error) !important;
|
||||
color: var(--color-text-inverse) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.p-confirm-dialog .p-dialog-footer .p-button.p-button-danger:hover {
|
||||
background: var(--red-700, #b91c1c) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
[data-theme="dark"] .p-confirm-dialog {
|
||||
background: var(--surface-card) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .p-confirm-dialog .p-dialog-header,
|
||||
[data-theme="dark"] .p-confirm-dialog .p-dialog-content,
|
||||
[data-theme="dark"] .p-confirm-dialog .p-dialog-footer {
|
||||
background: var(--surface-card) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .p-confirm-dialog .p-dialog-footer .p-button.p-button-text:hover,
|
||||
[data-theme="dark"] .p-confirm-dialog .p-dialog-footer .p-button:not(.p-button-danger):not(.p-button-success):hover {
|
||||
background: rgba(96, 165, 250, 0.15) !important;
|
||||
}
|
||||
|
||||
/* System preference dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) .p-confirm-dialog {
|
||||
background: var(--surface-card) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .p-confirm-dialog .p-dialog-header,
|
||||
:root:not([data-theme]) .p-confirm-dialog .p-dialog-content,
|
||||
:root:not([data-theme]) .p-confirm-dialog .p-dialog-footer {
|
||||
background: var(--surface-card) !important;
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .p-confirm-dialog .p-dialog-footer .p-button.p-button-text:hover,
|
||||
:root:not([data-theme]) .p-confirm-dialog .p-dialog-footer .p-button:not(.p-button-danger):not(.p-button-success):hover {
|
||||
background: rgba(96, 165, 250, 0.15) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.p-confirm-dialog {
|
||||
min-width: unset !important;
|
||||
max-width: 90vw !important;
|
||||
width: 90vw !important;
|
||||
margin: var(--space-md) !important;
|
||||
}
|
||||
|
||||
.p-confirm-dialog .p-dialog-footer {
|
||||
flex-direction: row !important;
|
||||
gap: var(--space-sm) !important;
|
||||
}
|
||||
|
||||
.p-confirm-dialog .p-dialog-footer .p-button {
|
||||
flex: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2297,11 +2297,20 @@ const editReceipt = (id) => {
|
||||
}
|
||||
|
||||
const confirmDelete = (receipt) => {
|
||||
// US-517: MD3 styled delete dialog with receipt details
|
||||
const storeName = receipt.store_name || 'Magazin necunoscut'
|
||||
const amount = receipt.total
|
||||
? new Intl.NumberFormat('ro-RO', { style: 'currency', currency: 'RON' }).format(receipt.total)
|
||||
: 'sumă necunoscută'
|
||||
|
||||
confirm.require({
|
||||
message: `Sigur doriți să ștergeți acest bon?`,
|
||||
header: 'Confirmare ștergere',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
message: `Ești sigur că vrei să ștergi bonul de la "${storeName}" în valoare de ${amount}?`,
|
||||
header: 'Șterge bonul?',
|
||||
icon: 'pi pi-trash',
|
||||
acceptClass: 'p-button-danger',
|
||||
rejectClass: 'p-button-text',
|
||||
acceptLabel: 'Șterge',
|
||||
rejectLabel: 'Anulează',
|
||||
accept: async () => {
|
||||
try {
|
||||
await store.deleteReceipt(receipt.id)
|
||||
|
||||
Reference in New Issue
Block a user