Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TreeView: Fix indentation, fix size of expand-icon's hitbox, add option to choose spacing of item content #515

Merged
merged 1 commit into from
Sep 12, 2022

Conversation

robkri
Copy link
Contributor

@robkri robkri commented Sep 6, 2022

This PR contains some changes to TreeView that seemed usefull to me when I was using the widget.

  • All items of the same depth level now have the same indentation. Before, only items with the same parent were aligned and there was an 8-pixel-offset between children of different parents when one of them contained expandable items and the other did not.
  • The hitbox for the expand icon of each item now uses the item's full height and is three times wider than the actual icon. Before it was restricted to the icon's size (8px by 8px) which was not very comfortable to use. Now it corresponds to the implementation in the explorer of Windows 10/11.
  • Now TreeView offers the option to choose whether the items of a TreeView use more or less spacing. The examples shown in the Microsoft documentation use a wider spacing than the actual implementation uses for the explorer in Windows 10/11. Both options are available now, as shown in the attached image.
  • The build method of TreeViewItem now contains some short comments to make it easier to find individual parts of each item like the selection checkbox or the expand icon.

Pre-launch Checklist

  • [ x] I have updated CHANGELOG.md with my changes
  • [x ] I have run "dart format ." on the project
  • [x ] I have added/updated relevant documentation
    TreeView_spacing_examples

CHANGELOG.md Outdated Show resolved Hide resolved
lib/src/controls/navigation/tree_view.dart Outdated Show resolved Hide resolved
lib/src/controls/navigation/tree_view.dart Show resolved Hide resolved
lib/src/controls/navigation/tree_view.dart Outdated Show resolved Hide resolved
lib/src/controls/navigation/tree_view.dart Outdated Show resolved Hide resolved
lib/src/controls/navigation/tree_view.dart Show resolved Hide resolved
…ption, add comments

Fix:
- All items of the same depth level now have the same indentation. Before, only items with the same parent were aligned.
- The hitbox for the expand icon now uses the item's full height and is three times wider than the actual icon. This corresponds to the implementation in the explorer of Windows 10/11.
- Loading indicator doesn't offset TreeViewItem's content anymore.

Add:
- You can now choose whether the items of a TreeView should use narrow or wide spacing. The examples shown in the Microsoft documentation use a wider spacing than the implementation used in the explorer of Windows 10/11.
- The build method of TreeViewItem now contains some short comments to make it easier to find individual parts of each item like the selection checkbox or the expand icon.
@bdlukaa bdlukaa merged commit 95b9b06 into bdlukaa:master Sep 12, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 Loading indicator offsets TreeViewItem's content
2 participants