Ryan Kegel
ef9cb01d92
All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 2m39s
- Introduced a toggle button to enable or disable chores in the scheduler. - The toggle will be available in both types of schedulers. - Added UI design proposal and considerations for mobile dimensions. - Included E2E tests to ensure toggle state persistence and correct behavior in child view.
1.2 KiB
1.2 KiB
UI Design Proposal
I want the chore scheduler to have a feature to enable and disable a chore. If the user wants to stop a chore from being scheduled on certain days, the chore will be disabled. Otherwise it will be enabled
Source
frontend\vue-app\src\components\shared\ScheduleModal.vue
Ideas
I propose a toggle button that looks like the following:
This slider could go into the red rectangles in the dialogs below.
Since there are 2 types of schedulers, we will have this toggle on both.
For mobile the toggles should be 44px in dimension.
Questions
Does near the top of the dialog work well for UI/UX, or should the toggle be somewhere else? Or should the dialogs be reworked somehow?
If we go with toggle, instead of green, should we use a color that works with our current palette? (blue)
Every X Days
Specific Days
E2E Tests — frontend/vue-app/tests/
- toggle persists across modal reopen: Open schedule modal, toggle to paused, save; reopen the same modal, verify toggle is still in paused state
- paused schedule does not show chore for child: Pause a schedule, switch to child view, verify the chore does not appear as active