Ryan Kegel
91a52c1973
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Failing after 1m5s
- Updated TimeSelector.vue styles for smaller dimensions and font sizes. - Added new API proxy for '/events' in vite.config.ts. - Created bug specifications for various UI issues and fixes in bugs-1.0.5-001.md and bugs-1.0.5-002.md. - Introduced TimePickerPopover.vue for a new time selection interface in the chore scheduler. - Refactored ScheduleModal.vue to replace checkbox rows with a chip-based design for selecting specific days. - Enhanced chore scheduling logic to ensure proper handling of time extensions and UI updates.
163 lines
7.3 KiB
Markdown
163 lines
7.3 KiB
Markdown
# Bug List
|
|
|
|
**Feature Bugs:** .github/specs/feat-calendar-chore/feat-calendar-chore.md
|
|
|
|
## Bugs
|
|
|
|
### Kabab menu icon should only appear when the item is 'selected'
|
|
|
|
When a chore is 'selected' (clicked on for the first time) the kebab menu should show. The kebab menu on the chore should hide again if anywhere else is clicked except the item or it's kebab menu
|
|
This is similar to how the 'edit' icon appears on penalties and rewards.
|
|
|
|
**Fix — `ParentView.vue`:**
|
|
|
|
- Add `selectedChoreId = ref<string | null>(null)` alongside `activeMenuFor`
|
|
- In the chore card-click handler, set `selectedChoreId.value = item.id`; clicking the same card again deselects it
|
|
- In `onDocClick` (the capture-phase outside-click handler), also clear `selectedChoreId.value = null` when clicking outside both the card and the kebab wrap
|
|
- Change the `.kebab-btn` from always-rendered to `v-show="selectedChoreId === item.id"`
|
|
|
|
#### Additional Test Cases With This Fix
|
|
|
|
- [x] Kebab button is not visible before a chore card is clicked
|
|
- [x] Kebab button becomes visible after a chore card is clicked
|
|
- [ ] Kebab button hides when clicking outside the card and kebab area _(integration only — covered by onDocClick logic, not unit-testable)_
|
|
- [x] Kebab button hides when a different card is clicked
|
|
|
|
### User Test Findings:
|
|
|
|
- chore-inactive::before applies an inset and background that is too dark. It should more like a gray disabled state.
|
|
- an inactive chore shows a dark kebab menu icon, so it is very hard to see since it is too dark.
|
|
|
|
**Fix applied:**
|
|
|
|
- `::before` overlay changed from `rgba(0,0,0,0.45)` → `rgba(160,160,160,0.45)` and grayscale `60%` → `80%` for a lighter, more neutral gray disabled appearance
|
|
- Added `:deep(.chore-inactive) .kebab-btn { color: rgba(255,255,255,0.85) }` so the kebab icon remains visible against the gray overlay
|
|
|
|
---
|
|
|
|
### In the scheduler, the cancel button should look like others
|
|
|
|
The cancel button doesn't follow current css design rules. It should look like other cancel buttons
|
|
Incorrect cancel button: https://git.ryankegel.com/ryan/chore/attachments/a4a3a0eb-0acc-481d-8794-4d666f214e0a
|
|
Correct cancel button: https://git.ryankegel.com/ryan/chore/attachments/63033ee6-35e8-4dd3-8be4-bce4a8c576fc
|
|
|
|
**Fix — `ScheduleModal.vue`:**
|
|
|
|
- Change `<button class="btn-secondary"` → `<button class="btn btn-secondary"` to use the global `styles.css` button classes
|
|
- Remove the local `.btn-secondary` and `.btn-secondary:disabled` CSS blocks from `<style scoped>`
|
|
|
|
#### Additional Test Cases With This Fix
|
|
|
|
- []
|
|
|
|
### User Test Findings:
|
|
|
|
Fix confirmed
|
|
|
|
---
|
|
|
|
### Chore scheduler needs to be modal so that it cannot be clicked out of
|
|
|
|
The chore scheduler model should not disappear when clicked outside of. It should only disappear with either Save or Cancel clicked.
|
|
|
|
**Fix — `ScheduleModal.vue`:**
|
|
|
|
- Remove `@backdrop-click="$emit('cancelled')"` from the `<ModalDialog>` opening tag
|
|
- The modal will then only close via the Save or Cancel buttons
|
|
|
|
#### Additional Test Cases With This Fix
|
|
|
|
- [x] Clicking outside the ScheduleModal backdrop does not dismiss it
|
|
- [x] Clicking Cancel dismisses the modal
|
|
- [x] Clicking Save dismisses the modal
|
|
|
|
### User Test Findings:
|
|
|
|
Fix confirmed
|
|
|
|
---
|
|
|
|
### In parent view, a chore that is not on the current day has it's kebab menu 'grayed out', it should not be
|
|
|
|
The dropdown menu from the chore kebab menu should not inherit the disabled color of the item card. It gives the impression that the menu is disabled.
|
|
Reference of grayed out menu: https://git.ryankegel.com/ryan/chore/attachments/0ac50dae-9b60-4cf7-a9f4-c980525d72f8
|
|
|
|
**Fix — `ParentView.vue` and `ChildView.vue`:**
|
|
CSS `opacity` on a parent is always inherited and cannot be overridden by children. Replace the direct `opacity + filter` on `.chore-inactive` with a pseudo-element overlay instead, so the `.chore-stamp` and `.chore-kebab-wrap` can sit above it at full opacity:
|
|
|
|
- Change `:deep(.chore-inactive)` from `opacity: 0.45; filter: grayscale(60%)` to use `position: relative` only
|
|
- Add `:deep(.chore-inactive::before)` pseudo-element: `position: absolute; inset: 0; background: rgba(0,0,0,0.45); filter: grayscale(60%); z-index: 1; pointer-events: none; border-radius: inherit`
|
|
- Give `.chore-stamp` `z-index: 3` (above the overlay)
|
|
- Give `.chore-kebab-wrap` `z-index: 2` (above the overlay, below the stamp)
|
|
|
|
#### Additional Test Cases With This Fix
|
|
|
|
- []
|
|
|
|
### User Test Findings:
|
|
|
|
Fix confirmed
|
|
|
|
---
|
|
|
|
### Change the due by to be bigger
|
|
|
|
In both parent and child view, when a chore is scheduled and has a due time, I see the text 'Due by' in parent mode, and just the time in child mode.
|
|
In both parent and child view, the text needs to be bigger: the due-label should be 0.85 rem font size.
|
|
In child mode, the time a chore is due has a dark color that is hard to see. It should be the same color that is in parent view.
|
|
|
|
**Fix — `ParentView.vue`:**
|
|
|
|
- Change `.due-label { font-size: 0.72rem }` → `font-size: 0.85rem`
|
|
|
|
**Fix — `ChildView.vue`:**
|
|
|
|
- Change `.due-label { font-size: 0.72rem }` → `font-size: 0.85rem`
|
|
- Change `.due-label` color from `var(--due-label-color, #aaa)` → `var(--item-points-color, #ffd166)` to match parent view
|
|
- Change `choreDueLabel()` to return `"Due by " + formatDueTimeLabel(...)` instead of just the time string
|
|
|
|
#### Additional Test Cases With This Fix
|
|
|
|
- [x] `choreDueLabel()` in ChildView returns `"Due by 3:00 PM"` format (not just `"3:00 PM"`)
|
|
|
|
### User Test Findings:
|
|
|
|
The text size is good, but I want to change the text color to red. Create a new color in colors.css called --text-bad-color, it should be #ef4444
|
|
|
|
**Fix applied:**
|
|
|
|
- Added `--text-bad-color: #ef4444` to `colors.css`
|
|
- Updated `.due-label` color in both `ParentView.vue` and `ChildView.vue` to use `var(--text-bad-color, #ef4444)`
|
|
|
|
---
|
|
|
|
### In parent mode, when a chore is too late. The banner shouldn't be 'grayed' out. Same in child mode - color should also be red in the banner
|
|
|
|
When a chore is too late, the 'TOO LATE' banner is also grayed out but it should not be. Also the font color for 'TOO LATE' needs to be consistent. Make both colors red according to colors.css
|
|
|
|
**Fix — `ChildView.vue`:**
|
|
|
|
- The TOO LATE `<span class="pending">` uses the `.pending` class which is styled green (`--pending-block-color`). Change it to `<span class="chore-stamp">` to match ParentView's class
|
|
- Add `.chore-stamp` CSS to ChildView matching ParentView's definition: `color: var(--btn-danger, #ef4444)`
|
|
- The grayout issue is resolved by the pseudo-element overlay fix in Bug 4 above — `.chore-stamp` at `z-index: 3` sits above the overlay at full opacity
|
|
|
|
**Fix — `ParentView.vue`:**
|
|
|
|
- No color change needed (already `color: var(--btn-danger, #ef4444)`)
|
|
- The grayout issue is resolved by the pseudo-element overlay fix in Bug 4 above
|
|
|
|
#### Additional Test Cases With This Fix
|
|
|
|
- []
|
|
|
|
### User Test Findings:
|
|
|
|
chore-stamp background seems too dark, change it to rgba(34,34,34,0.65). Also give it text-shadow: var(--item-points-shadow)
|
|
the TOO LATE text should not be using color --btn-danger. It should use the newly created color --text-bad-color
|
|
|
|
**Fix applied:**
|
|
|
|
- `.chore-stamp` background changed from `rgba(34,34,43,0.85)` → `rgba(34,34,34,0.65)` in both `ParentView.vue` and `ChildView.vue`
|
|
- Added `text-shadow: var(--item-points-shadow)` to `.chore-stamp` in both files
|
|
- Color changed from `var(--btn-danger, #ef4444)` → `var(--text-bad-color, #ef4444)` in both files
|