feat: Add thumbnails support for files in grid view #2337
Conversation
Introduces a new grid view mode for the files page, allowing users to switch between list and grid views. Includes: - New FilesGrid component - View mode toggle buttons - Shared props between list and grid views - Updated rendering logic to support both view modes
Adds multi-select functionality and improved keyboard navigation to the files page grid view: - Implement file selection with checkboxes - Add keyboard navigation between files - Create a new SelectedActions component for bulk operations - Update styling to support selection and focus states
- Adjust GridFile thumbnail opacity for better visual appearance
- Add select all checkbox for grid view - Move selected state management to parent component - Refactor file selection logic to support bulk and individual selection - Minor UI layout adjustments
- Implement text preview for text-based files in Grid File - Add support for reading file contents with doRead action - Enhance FileThumbnail to display text previews - Add localized "Select all entries" text across language files, this was done using google translate
|
Thank you for submitting this PR!
Getting other community members to do a review would be great help too on complex PRs (you can ask in the chats/forums). If you are unsure about something, just leave us a comment.
We currently aim to provide initial feedback/triaging within two business days. Please keep an eye on any labelling actions, as these will indicate priorities and status of your contribution. |
|
Hey @lidel, could you take a look at my PR when you get a chance? Would really appreciate your review! |
- Move view mode buttons to Header component - Truncate file hash in grid view for better readability - Adjust Header layout and styling
- Add translation for view mode - Apply consistent height to view mode buttons in FilesPage - Adjust Header component margins and layout - Add responsive margin for breadcrumbs header
- Implement keyboard shortcut modal with comprehensive keyboard navigation - Add drop zone and drag-and-drop functionality for files in grid view - Enhance list file navigation and selection with improved keyboard controls - Add visual indicators for drag and drop interactions in grid view
|
hey @lidel, i've been able to resolve all feedbacks/asks |
moving 2px and changing border weight does not render well and makes ui jiggle. switching to static sizing + reusing dotted border convention from the old Files screen
we dont want to cause unnecessary work for people at https://app.transifex.com/ipfs/ipfs-webui/dashboard/
we do not use shadows in UI anywhere else, let's keep grid view UI simple and follow similar visual indicators as list view
There was a problem hiding this comment.
Looking good, thank you.
I've pushed small cosmetics to unify UI conventions in both views.
(the bold border which I requested caused UI to jiggle – I've reverted it and simplified UI to not move 2px around. This should work better on systems with unstable font rendering – removing surface for jiggling on some Linux boxes)
@SgtPooki mind taking a look with fresh set of eyes and merging if no concerns?
The thumbnails grid view can be enabled by clicking on this icon:
|
Oh great!, Thanks for the changes too @lidel |
Closes #2301
This PR adds thumbnail support for files in the IPFS WebUI grid view, improving the visual browsing experience.
Changes:
The thumbnails are implemented with:
Testing: