Implemented pop-up functionality for help modal.#124
Conversation
|
can you resolve the issue with the failed lint check so it passes our workflow setup |
templates/js/sidebar.js
Outdated
| const closeHelpModal = document.getElementById('close-help-modal'); | ||
| if (helpButton && helpModal && closeHelpModal) { | ||
| helpButton.addEventListener('click', () => { | ||
| helpModal.style.display = 'flex'; |
There was a problem hiding this comment.
I would recommend toggling a class or the hidden attribute rather than manipulating style.display—it’s easier to animate and keeps the presentation in CSS.
Taktar
left a comment
Taktar
left a comment
There was a problem hiding this comment.
Fix remaining lint failures
CI shows “Strings must use doublequote” for some JS files. Even if they weren’t changed here, our checks run across the workspace. Running npm run lint -- --fix locally and committing the quote fixes would unblock the workflow.
|
review the changes requested, add unit test for your code in test suite and ensure workflow error is corrected |
UcheWendy
left a comment
UcheWendy
left a comment
There was a problem hiding this comment.
Thanks for submitting this PR. The modal is functionally working, which is a great start. I've gone through the files and have some feedback focused on improving the code's structure, maintainability, and robustness which i have added as inline comments.
Also, To ensure this feature remains stable as we add more code, we need to add automated tests.
Request: Please add a new test suite to templates/test.js for the "Help Modal". The tests should verify that:
The modal is hidden by default when the page loads.
The modal becomes visible after the "Help" link is clicked.
The modal becomes hidden again after the "Close" button is clicked.
This will help us catch any regressions in the future.
3 participants
Description
Fixes #121
1. What was Changed
A user-friendly help modal was added to the application. When users click the "Help" button on the sidebar, a pop-up modal appears with instructions on how to use the bone set viewer. The modal includes a title, a brief description, and a close button.
2. Why it was Changed
The goal was to get a basic help button design down before making any complex changes. This change was needed to improve the application's usability and accessibility. Previously, the "Help" link was non-functional, which is not beneficial for end-users. By providing clear instructions in a modal, users can quickly understand how to interact with the interface.
3. How it was Changed
There was no operating help modal before this pull request. The basic modal is hidden by default and is displayed using a flex overlay when the "Help" link is clicked. The close button hides the modal.