Toggle additional code info in projects/codebook and cod…#193
Toggle additional code info in projects/codebook and cod…#193jankapunkt merged 2 commits intomainfrom
Conversation
jankapunkt
requested review from
alessandrobelli,
Copilot,
hohse and
kadewe
There was a problem hiding this comment.
Pull Request Overview
This PR adds the ability to toggle the display of additional code information (descriptions) on the projects/codebooks page and coding page. Users can now show/hide code descriptions for better readability and reduced visual clutter.
- Adds a reactive state system to track which codebooks have details shown/hidden
- Introduces a toggle button with information icon to control visibility of code descriptions
- Implements hierarchical display of code structure with indentation in the preview
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| useCodes.js | Adds reactive state management for tracking detail visibility per codebook |
| CodebookRenderer.vue | Adds information icon toggle button to control code details display |
| CodeTreeItemRenderer.vue | Conditionally displays code descriptions based on toggle state |
| CodeTreeItem.vue | Passes showDetails prop through component hierarchy |
| CodeTree.vue | Connects showDetails state to the tree component |
| useCodebookPreview.js | Adds code sorting functionality with depth calculation for hierarchical display |
| ProjectCodebooks.vue | Implements toggle for code details in the preview with improved layout |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Co-authored-by: Copilot <[email protected]>
kadewe
left a comment
kadewe
left a comment
There was a problem hiding this comment.
We can push this into deployment. For the next software iteration i may suggest:
The information circle icon is informative (it is understandable), but in the next iteration we need a "tooltip" and also the i in the button is just barely visible. Also it is debatable, if the "i" (which stands for "information") is a good shortcut for "notice".
Also the notice text should be put into a lighter background area - see the following sketch to make it better discernible from the codes
2 participants
…ing pages
This allows users to toggle additional code info on the projects/code page and coding page.