romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui-fixes-phase6): Complete US-608 - Fix Buton FAB SpeedDial în Lista Bonuri

Browse Source 
Implemented by Ralph autonomous loop.
Iteration: 9

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-01-13 16:38:01 +00:00
parent ec678b4b04
commit 109ef50fb2
4 changed files with 184 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/ralph/prd.json
View File

@@ -162,8 +162,8 @@
"npm run typecheck passes", "npm run typecheck passes",
"Verify in browser: FAB shows SpeedDial menu with 3 options on tap" "Verify in browser: FAB shows SpeedDial menu with 3 options on tap"
], ],
"passes": false, "passes": true,
"notes": "Bug în ReceiptsListView.vue - SpeedDial probabil are probleme CSS sau z-index" "notes": "Completed in iteration 9"
}, },
{ {
"id": "US-609", "id": "US-609",

6
scripts/ralph/progress.txt
View File

@@ -290,3 +290,9 @@ PRD: tasks/prd-ui-fixes-phase6.md
[2026-01-13 16:29:50] Working on story: US-607 [2026-01-13 16:29:50] Working on story: US-607
[2026-01-13 16:29:50] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_8_US-607.log) [2026-01-13 16:29:50] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_8_US-607.log)
[2026-01-13 16:33:08] SUCCESS: Story US-607 passed! [2026-01-13 16:33:08] SUCCESS: Story US-607 passed!
[2026-01-13 16:33:08] Changes committed
[2026-01-13 16:33:08] Progress: 7/10 stories completed
[2026-01-13 16:33:10] === Iteration 9/30 ===
[2026-01-13 16:33:10] Working on story: US-608
[2026-01-13 16:33:10] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_9_US-608.log)
[2026-01-13 16:38:01] SUCCESS: Story US-608 passed!

2
src/main.js
View File

@@ -37,6 +37,7 @@ import RadioButton from 'primevue/radiobutton'
import Toolbar from 'primevue/toolbar' import Toolbar from 'primevue/toolbar'
import Divider from 'primevue/divider' import Divider from 'primevue/divider'
import Message from 'primevue/message' import Message from 'primevue/message'
import SpeedDial from 'primevue/speeddial'
// PrimeVue CSS (saga-blue theme) // PrimeVue CSS (saga-blue theme)
import 'primevue/resources/themes/saga-blue/theme.css' import 'primevue/resources/themes/saga-blue/theme.css'
@@ -91,5 +92,6 @@ app.component('RadioButton', RadioButton)
app.component('Toolbar', Toolbar) app.component('Toolbar', Toolbar)
app.component('Divider', Divider) app.component('Divider', Divider)
app.component('Message', Message) app.component('Message', Message)
app.component('SpeedDial', SpeedDial)
app.mount('#app') app.mount('#app')

386
src/modules/data-entry/views/receipts/ReceiptsListView.vue
View File

@@ -661,28 +661,26 @@
/> />
</div> </div>
<!-- US-303: Mobile FAB (Floating Action Button) with Popup Menu --> <!-- US-608: Mobile FAB SpeedDial with animated options -->
<Transition name="fab-slide"> <SpeedDial
<button v-if="isMobile && !mobileSelectionMode && fabVisible"
v-if="isMobile && !mobileSelectionMode && fabVisible" :model="speedDialItems"
class="mobile-fab" :radius="80"
:class="{ 'fab-active': fabMenuOpen }" direction="up"
@click="toggleFabMenu" type="linear"
aria-label="Meniu acțiuni" showIcon="pi pi-plus"
aria-haspopup="true" hideIcon="pi pi-times"
:aria-expanded="fabMenuOpen" :mask="true"
> class="mobile-speed-dial"
<i class="pi pi-plus" :class="{ 'fab-icon-rotate': fabMenuOpen }"></i> :transitionDelay="40"
</button> :pt="{
</Transition> root: { class: 'mobile-speed-dial-root' },
button: { class: 'mobile-speed-dial-button' },
<!-- US-303: FAB Popup Menu --> menu: { class: 'mobile-speed-dial-menu' },
<Menu menuitem: { class: 'mobile-speed-dial-item' },
ref="fabMenuRef" action: { class: 'mobile-speed-dial-action' },
:model="fabMenuItems" mask: { class: 'mobile-speed-dial-mask' }
:popup="true" }"
class="fab-popup-menu"
@hide="fabMenuOpen = false"
/> />
<!-- US-103: Mobile Bottom Navigation (using shared component) --> <!-- US-103: Mobile Bottom Navigation (using shared component) -->
@@ -1171,9 +1169,7 @@ const fabVisible = ref(true)
// US-502: Export Menu ref and items for desktop header actions // US-502: Export Menu ref and items for desktop header actions
const exportMenuRef = ref(null) const exportMenuRef = ref(null)
// US-303: FAB Menu State // US-608: FAB scroll hide/show state
const fabMenuRef = ref(null)
const fabMenuOpen = ref(false)
let lastScrollY = 0 let lastScrollY = 0
let scrollTimeout = null let scrollTimeout = null
@@ -1230,30 +1226,31 @@ const exportMenuItems = computed(() => [
} }
]) ])
// US-303/US-515: FAB Menu Items (Bon Nou | Upload Bulk) - Material Design 3 // US-608: SpeedDial Items - Bon Nou Manual, Scanare Bon OCR, Upload în Masă
const fabMenuItems = [ const speedDialItems = [
{ {
label: 'Bon Nou', label: 'Bon Nou Manual',
icon: 'pi pi-plus', icon: 'pi pi-pencil',
command: () => { command: () => goToCreate()
fabMenuOpen.value = false
goToCreate()
}
}, },
{ {
label: 'Upload Bulk', label: 'Scanare Bon OCR',
icon: 'pi pi-camera',
command: () => goToOCRScan()
},
{
label: 'Upload în Masă',
icon: 'pi pi-upload', icon: 'pi pi-upload',
command: () => { command: () => openBulkFileInput()
fabMenuOpen.value = false
openBulkFileInput()
}
} }
] ]
// US-303: Toggle FAB Menu // US-608: Navigate to OCR scan page
const toggleFabMenu = (event) => { const goToOCRScan = () => {
fabMenuOpen.value = !fabMenuOpen.value console.log('[ReceiptsList] Navigating to OCR scan...')
fabMenuRef.value?.toggle(event) router.push({ path: '/data-entry/create', query: { mode: 'scan' } }).catch(err => {
console.error('[ReceiptsList] Navigation error:', err)
})
} }
// US-103/US-306: Top bar actions for MobileTopBar component // US-103/US-306: Top bar actions for MobileTopBar component
@@ -4800,61 +4797,89 @@ const cleanupCompletedBatches = (storedBatchIds) => {
/* US-103: Mobile Bottom Navigation styles now in MobileBottomNav.vue */ /* US-103: Mobile Bottom Navigation styles now in MobileBottomNav.vue */
/* Mobile FAB - Floating Action Button */ /* US-608: Mobile SpeedDial - Floating Action Button with animated options */
.mobile-fab { .mobile-speed-dial {
position: fixed; position: fixed !important;
bottom: 72px; /* 56px bottom nav + 16px spacing */ bottom: 72px; /* 56px bottom nav + 16px spacing */
right: var(--space-md); right: var(--space-md);
width: 56px;
height: 56px;
border-radius: var(--radius-xl);
background: var(--color-primary);
color: var(--color-text-inverse);
border: none;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 999; z-index: 999;
transition: all var(--transition-fast);
} }
.mobile-fab:active { /* SpeedDial main button styling */
transform: scale(0.95); .mobile-speed-dial .p-speeddial-button {
box-shadow: var(--shadow-md); width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
background: var(--color-primary) !important;
border: none !important;
box-shadow: var(--shadow-lg) !important;
transition: all var(--transition-fast) !important;
} }
.mobile-fab i { .mobile-speed-dial .p-speeddial-button:hover,
font-size: var(--text-2xl); .mobile-speed-dial .p-speeddial-button:focus {
transition: transform var(--transition-fast); background: var(--color-primary-dark) !important;
box-shadow: var(--shadow-xl) !important;
} }
/* US-303: FAB active state when menu is open */ .mobile-speed-dial .p-speeddial-button:active {
.mobile-fab.fab-active { transform: scale(0.95) !important;
background: var(--color-primary-dark);
} }
.mobile-fab .fab-icon-rotate { .mobile-speed-dial .p-speeddial-button .p-button-icon {
transform: rotate(45deg); font-size: var(--text-2xl) !important;
color: var(--color-text-inverse) !important;
} }
/* FAB slide animation */ /* SpeedDial action buttons styling */
.fab-slide-enter-active, .mobile-speed-dial .p-speeddial-action {
.fab-slide-leave-active { width: 48px !important;
transition: transform var(--transition-normal), opacity var(--transition-normal); height: 48px !important;
background: var(--surface-card) !important;
border: 1px solid var(--surface-border) !important;
box-shadow: var(--shadow-md) !important;
transition: all var(--transition-fast) !important;
} }
.fab-slide-enter-from, .mobile-speed-dial .p-speeddial-action:hover,
.fab-slide-leave-to { .mobile-speed-dial .p-speeddial-action:focus {
transform: translateY(100px); background: var(--surface-hover) !important;
transform: scale(1.1) !important;
}
.mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
color: var(--color-primary) !important;
font-size: var(--text-lg) !important;
}
/* SpeedDial mask overlay (background when open) */
.mobile-speed-dial .p-speeddial-mask {
background: rgba(0, 0, 0, 0.4) !important;
}
/* SpeedDial tooltip labels */
.mobile-speed-dial .p-speeddial-action::before {
content: attr(aria-label);
position: absolute;
right: 60px;
white-space: nowrap;
background: var(--surface-card);
color: var(--text-color);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--font-medium);
box-shadow: var(--shadow-sm);
border: 1px solid var(--surface-border);
opacity: 0; opacity: 0;
transform: translateX(10px);
transition: all var(--transition-fast);
pointer-events: none;
} }
.fab-slide-enter-to, .mobile-speed-dial.p-speeddial-opened .p-speeddial-action::before {
.fab-slide-leave-from {
transform: translateY(0);
opacity: 1; opacity: 1;
transform: translateX(0);
} }
/* Mobile Sidebar (Hamburger Menu) */ /* Mobile Sidebar (Hamburger Menu) */
@@ -4957,22 +4982,35 @@ const cleanupCompletedBatches = (storedBatchIds) => {
/* US-103: Dark mode for MobileBottomNav now in component */ /* US-103: Dark mode for MobileBottomNav now in component */
[data-theme="dark"] .mobile-fab { /* US-608: Dark mode for SpeedDial */
background: var(--blue-600); [data-theme="dark"] .mobile-speed-dial .p-speeddial-button {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); background: var(--blue-600) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
} }
[data-theme="dark"] .mobile-fab.fab-active { [data-theme="dark"] .mobile-speed-dial .p-speeddial-button:hover,
background: var(--blue-700); [data-theme="dark"] .mobile-speed-dial .p-speeddial-button:focus {
background: var(--blue-700) !important;
} }
[data-theme="dark"] .fab-popup-menu { [data-theme="dark"] .mobile-speed-dial .p-speeddial-action {
background: var(--surface-card) !important;
border-color: var(--surface-border) !important;
}
[data-theme="dark"] .mobile-speed-dial .p-speeddial-action:hover,
[data-theme="dark"] .mobile-speed-dial .p-speeddial-action:focus {
background: var(--surface-hover) !important;
}
[data-theme="dark"] .mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
color: var(--blue-400) !important;
}
[data-theme="dark"] .mobile-speed-dial .p-speeddial-action::before {
background: var(--surface-card); background: var(--surface-card);
border: 1px solid var(--surface-border); color: var(--text-color);
} border-color: var(--surface-border);
[data-theme="dark"] .fab-popup-menu .p-menuitem-icon {
color: var(--blue-400);
} }
[data-theme="dark"] .sidebar-item.active, [data-theme="dark"] .sidebar-item.active,
@@ -5015,22 +5053,35 @@ const cleanupCompletedBatches = (storedBatchIds) => {
/* US-103: Auto dark mode for MobileBottomNav now in component */ /* US-103: Auto dark mode for MobileBottomNav now in component */
:root:not([data-theme]) .mobile-fab { /* US-608: Auto dark mode for SpeedDial */
background: var(--blue-600); :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); background: var(--blue-600) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
} }
:root:not([data-theme]) .mobile-fab.fab-active { :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button:hover,
background: var(--blue-700); :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button:focus {
background: var(--blue-700) !important;
} }
:root:not([data-theme]) .fab-popup-menu { :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action {
background: var(--surface-card) !important;
border-color: var(--surface-border) !important;
}
:root:not([data-theme]) .mobile-speed-dial .p-speeddial-action:hover,
:root:not([data-theme]) .mobile-speed-dial .p-speeddial-action:focus {
background: var(--surface-hover) !important;
}
:root:not([data-theme]) .mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
color: var(--blue-400) !important;
}
:root:not([data-theme]) .mobile-speed-dial .p-speeddial-action::before {
background: var(--surface-card); background: var(--surface-card);
border: 1px solid var(--surface-border); color: var(--text-color);
} border-color: var(--surface-border);
:root:not([data-theme]) .fab-popup-menu .p-menuitem-icon {
color: var(--blue-400);
} }
:root:not([data-theme]) .sidebar-item.active, :root:not([data-theme]) .sidebar-item.active,
@@ -5073,123 +5124,34 @@ const cleanupCompletedBatches = (storedBatchIds) => {
} }
</style> </style>
<!-- US-515: Non-scoped styles for FAB Popup Menu (teleported to body) --> <!-- US-608: Non-scoped styles for SpeedDial mask (appended to body) -->
<style> <style>
/* US-515: FAB Popup Menu - Material Design 3 Styling */ /* US-608: SpeedDial mask overlay - appears when SpeedDial is open */
/* Non-scoped because PrimeVue Menu is teleported to document body */ .p-speeddial-mask.mobile-speed-dial-mask {
.fab-popup-menu.p-menu.p-menu-overlay {
/* Position above FAB - override PrimeVue inline styles */
position: fixed !important; position: fixed !important;
bottom: 140px !important; top: 0 !important;
right: 16px !important; left: 0 !important;
left: auto !important; width: 100% !important;
top: auto !important; height: 100% !important;
min-width: 200px !important; background: rgba(0, 0, 0, 0.5) !important;
z-index: 1002 !important; z-index: 998 !important;
animation: fadeIn 200ms ease-out !important;
/* MD3 Surface: Use tonal surface for elevation */
background: var(--md-sys-color-surface-container-high, var(--surface-card)) !important;
border: 1px solid var(--md-sys-color-outline-variant, var(--surface-border)) !important;
border-radius: 12px !important;
/* MD3 Elevation: Softer shadow for modern look */
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.1),
0 4px 6px -1px rgba(0, 0, 0, 0.06),
0 8px 16px -2px rgba(0, 0, 0, 0.1) !important;
/* Smooth entry animation */
transform-origin: bottom right !important;
animation: fabMenuSlideIn 250ms ease-out !important;
overflow: hidden !important;
} }
/* MD3 Menu Animation */ @keyframes fadeIn {
@keyframes fabMenuSlideIn { from { opacity: 0; }
from { to { opacity: 1; }
opacity: 0; }
transform: scale(0.85) translateY(8px);
/* Dark mode mask */
[data-theme="dark"] .p-speeddial-mask.mobile-speed-dial-mask {
background: rgba(0, 0, 0, 0.7) !important;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .p-speeddial-mask.mobile-speed-dial-mask {
background: rgba(0, 0, 0, 0.7) !important;
} }
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Menu container padding for visual breathing room */
.fab-popup-menu.p-menu .p-menu-list {
padding: 8px 0 !important;
}
.fab-popup-menu.p-menu .p-menuitem {
padding: 0 !important;
margin: 0 4px !important;
}
/* PrimeVue 4 uses .p-menuitem-content instead of .p-menuitem-link */
.fab-popup-menu.p-menu .p-menuitem-content {
display: flex !important;
align-items: center !important;
gap: 16px !important;
padding: 8px 16px !important;
min-height: 48px !important; /* MD3: 48px touch target */
font-size: 1rem !important;
color: var(--md-sys-color-on-surface, var(--text-color)) !important;
background: transparent !important;
border-radius: 8px !important;
text-decoration: none !important;
cursor: pointer !important;
transition: background-color 150ms ease, transform 150ms ease !important;
position: relative !important;
overflow: hidden !important;
}
/* MD3 State Layer: Hover effect */
.fab-popup-menu.p-menu .p-menuitem-content:hover {
background: var(--md-sys-color-surface-variant, var(--surface-hover)) !important;
}
/* MD3 State Layer: Active/Press effect */
.fab-popup-menu.p-menu .p-menuitem-content:active {
background: var(--md-sys-color-primary-container, var(--primary-100)) !important;
transform: scale(0.98) !important;
}
/* MD3 Focus visible state */
.fab-popup-menu.p-menu .p-menuitem:focus-visible .p-menuitem-content {
outline: 2px solid var(--md-sys-color-primary, var(--color-primary)) !important;
outline-offset: -2px !important;
}
/* Icon styling - MD3 leading icon */
.fab-popup-menu.p-menu .p-menuitem-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
font-size: 1.25rem !important;
color: var(--md-sys-color-on-surface-variant, var(--color-text-secondary)) !important;
flex-shrink: 0 !important;
transition: color 150ms ease !important;
}
/* Icon color on hover */
.fab-popup-menu.p-menu .p-menuitem-content:hover .p-menuitem-icon {
color: var(--md-sys-color-primary, var(--color-primary)) !important;
}
/* Text styling - MD3 label */
.fab-popup-menu.p-menu .p-menuitem-text {
font-weight: 500 !important;
font-size: 1rem !important;
line-height: 1.5 !important;
color: var(--md-sys-color-on-surface, var(--text-color)) !important;
}
/* Spacing between menu items */
.fab-popup-menu.p-menu .p-menuitem + .p-menuitem {
margin-top: 4px !important;
} }
</style> </style>