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",
"Verify in browser: FAB shows SpeedDial menu with 3 options on tap"
],
"passes": false,
"notes": "Bug în ReceiptsListView.vue - SpeedDial probabil are probleme CSS sau z-index"
"passes": true,
"notes": "Completed in iteration 9"
},
{
"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] 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] 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 Divider from 'primevue/divider'
import Message from 'primevue/message'
import SpeedDial from 'primevue/speeddial'
// PrimeVue CSS (saga-blue theme)
import 'primevue/resources/themes/saga-blue/theme.css'
@@ -91,5 +92,6 @@ app.component('RadioButton', RadioButton)
app.component('Toolbar', Toolbar)
app.component('Divider', Divider)
app.component('Message', Message)
app.component('SpeedDial', SpeedDial)
app.mount('#app')

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

@@ -661,28 +661,26 @@
/>
</div>
<!-- US-303: Mobile FAB (Floating Action Button) with Popup Menu -->
<Transition name="fab-slide">
<button
<!-- US-608: Mobile FAB SpeedDial with animated options -->
<SpeedDial
v-if="isMobile && !mobileSelectionMode && fabVisible"
class="mobile-fab"
:class="{ 'fab-active': fabMenuOpen }"
@click="toggleFabMenu"
aria-label="Meniu acțiuni"
aria-haspopup="true"
:aria-expanded="fabMenuOpen"
>
<i class="pi pi-plus" :class="{ 'fab-icon-rotate': fabMenuOpen }"></i>
</button>
</Transition>
<!-- US-303: FAB Popup Menu -->
<Menu
ref="fabMenuRef"
:model="fabMenuItems"
:popup="true"
class="fab-popup-menu"
@hide="fabMenuOpen = false"
:model="speedDialItems"
:radius="80"
direction="up"
type="linear"
showIcon="pi pi-plus"
hideIcon="pi pi-times"
:mask="true"
class="mobile-speed-dial"
:transitionDelay="40"
:pt="{
root: { class: 'mobile-speed-dial-root' },
button: { class: 'mobile-speed-dial-button' },
menu: { class: 'mobile-speed-dial-menu' },
menuitem: { class: 'mobile-speed-dial-item' },
action: { class: 'mobile-speed-dial-action' },
mask: { class: 'mobile-speed-dial-mask' }
}"
/>
<!-- 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
const exportMenuRef = ref(null)
// US-303: FAB Menu State
const fabMenuRef = ref(null)
const fabMenuOpen = ref(false)
// US-608: FAB scroll hide/show state
let lastScrollY = 0
let scrollTimeout = null
@@ -1230,30 +1226,31 @@ const exportMenuItems = computed(() => [
}
])
// US-303/US-515: FAB Menu Items (Bon Nou | Upload Bulk) - Material Design 3
const fabMenuItems = [
// US-608: SpeedDial Items - Bon Nou Manual, Scanare Bon OCR, Upload în Masă
const speedDialItems = [
{
label: 'Bon Nou',
icon: 'pi pi-plus',
command: () => {
fabMenuOpen.value = false
goToCreate()
}
label: 'Bon Nou Manual',
icon: 'pi pi-pencil',
command: () => goToCreate()
},
{
label: 'Upload Bulk',
label: 'Scanare Bon OCR',
icon: 'pi pi-camera',
command: () => goToOCRScan()
},
{
label: 'Upload în Masă',
icon: 'pi pi-upload',
command: () => {
fabMenuOpen.value = false
openBulkFileInput()
}
command: () => openBulkFileInput()
}
]
// US-303: Toggle FAB Menu
const toggleFabMenu = (event) => {
fabMenuOpen.value = !fabMenuOpen.value
fabMenuRef.value?.toggle(event)
// US-608: Navigate to OCR scan page
const goToOCRScan = () => {
console.log('[ReceiptsList] Navigating to OCR scan...')
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
@@ -4800,61 +4797,89 @@ const cleanupCompletedBatches = (storedBatchIds) => {
/* US-103: Mobile Bottom Navigation styles now in MobileBottomNav.vue */
/* Mobile FAB - Floating Action Button */
.mobile-fab {
position: fixed;
/* US-608: Mobile SpeedDial - Floating Action Button with animated options */
.mobile-speed-dial {
position: fixed !important;
bottom: 72px; /* 56px bottom nav + 16px spacing */
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;
transition: all var(--transition-fast);
}
.mobile-fab:active {
transform: scale(0.95);
box-shadow: var(--shadow-md);
/* SpeedDial main button styling */
.mobile-speed-dial .p-speeddial-button {
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 {
font-size: var(--text-2xl);
transition: transform var(--transition-fast);
.mobile-speed-dial .p-speeddial-button:hover,
.mobile-speed-dial .p-speeddial-button:focus {
background: var(--color-primary-dark) !important;
box-shadow: var(--shadow-xl) !important;
}
/* US-303: FAB active state when menu is open */
.mobile-fab.fab-active {
background: var(--color-primary-dark);
.mobile-speed-dial .p-speeddial-button:active {
transform: scale(0.95) !important;
}
.mobile-fab .fab-icon-rotate {
transform: rotate(45deg);
.mobile-speed-dial .p-speeddial-button .p-button-icon {
font-size: var(--text-2xl) !important;
color: var(--color-text-inverse) !important;
}
/* FAB slide animation */
.fab-slide-enter-active,
.fab-slide-leave-active {
transition: transform var(--transition-normal), opacity var(--transition-normal);
/* SpeedDial action buttons styling */
.mobile-speed-dial .p-speeddial-action {
width: 48px !important;
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,
.fab-slide-leave-to {
transform: translateY(100px);
.mobile-speed-dial .p-speeddial-action:hover,
.mobile-speed-dial .p-speeddial-action:focus {
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;
transform: translateX(10px);
transition: all var(--transition-fast);
pointer-events: none;
}
.fab-slide-enter-to,
.fab-slide-leave-from {
transform: translateY(0);
.mobile-speed-dial.p-speeddial-opened .p-speeddial-action::before {
opacity: 1;
transform: translateX(0);
}
/* Mobile Sidebar (Hamburger Menu) */
@@ -4957,22 +4982,35 @@ const cleanupCompletedBatches = (storedBatchIds) => {
/* US-103: Dark mode for MobileBottomNav now in component */
[data-theme="dark"] .mobile-fab {
background: var(--blue-600);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
/* US-608: Dark mode for SpeedDial */
[data-theme="dark"] .mobile-speed-dial .p-speeddial-button {
background: var(--blue-600) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .mobile-fab.fab-active {
background: var(--blue-700);
[data-theme="dark"] .mobile-speed-dial .p-speeddial-button:hover,
[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);
border: 1px solid var(--surface-border);
}
[data-theme="dark"] .fab-popup-menu .p-menuitem-icon {
color: var(--blue-400);
color: var(--text-color);
border-color: var(--surface-border);
}
[data-theme="dark"] .sidebar-item.active,
@@ -5015,22 +5053,35 @@ const cleanupCompletedBatches = (storedBatchIds) => {
/* US-103: Auto dark mode for MobileBottomNav now in component */
:root:not([data-theme]) .mobile-fab {
background: var(--blue-600);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
/* US-608: Auto dark mode for SpeedDial */
:root:not([data-theme]) .mobile-speed-dial .p-speeddial-button {
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 {
background: var(--blue-700);
:root:not([data-theme]) .mobile-speed-dial .p-speeddial-button:hover,
: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);
border: 1px solid var(--surface-border);
}
:root:not([data-theme]) .fab-popup-menu .p-menuitem-icon {
color: var(--blue-400);
color: var(--text-color);
border-color: var(--surface-border);
}
:root:not([data-theme]) .sidebar-item.active,
@@ -5073,123 +5124,34 @@ const cleanupCompletedBatches = (storedBatchIds) => {
}
</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>
/* US-515: FAB Popup Menu - Material Design 3 Styling */
/* Non-scoped because PrimeVue Menu is teleported to document body */
.fab-popup-menu.p-menu.p-menu-overlay {
/* Position above FAB - override PrimeVue inline styles */
/* US-608: SpeedDial mask overlay - appears when SpeedDial is open */
.p-speeddial-mask.mobile-speed-dial-mask {
position: fixed !important;
bottom: 140px !important;
right: 16px !important;
left: auto !important;
top: auto !important;
min-width: 200px !important;
z-index: 1002 !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;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.5) !important;
z-index: 998 !important;
animation: fadeIn 200ms ease-out !important;
}
/* MD3 Menu Animation */
@keyframes fabMenuSlideIn {
from {
opacity: 0;
transform: scale(0.85) translateY(8px);
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 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>