This the main repository for RSpace: rspace-web. Check https://github.com/rspace-os/rspace-web/blob/main/DevDocs/DeveloperNotes/GettingStarted/GettingStarted.md for setup instructions.
This change alters how the breadcrumbs and other buttons and menus at the top of the new gallery page are rendered.
The breadcrumbs, a series of links allowing the users to navigate back up the folder hierarchy, is now rendered within a horizontally scrolling box. When tapped, it transforms into a read-only text field that allows users to select and copy the path, which would not otherwise be possible. Keyboard controls are fully supported, with a roving tab index employed for moving the focus between the links and tab correctly triggering the read-only text field. Being able to drag-and-drop onto the breadcrumbs is retained, with the animated added whilst dragging to make it clear which UI elements are dropzones. Note the blue outline:
The remaining buttons and menus -- actions, sorting, and views -- have been re-arranged to be consistent with the other newly designed pages (e.g. sysadmin users page) where the primary action in placed in the top left whilst the other buttons and menus are placed in the top right corner. Also similar to the sysadmin users page, a label describing what is selected is also added by this change.
Finally, react-router is used to synchronise the URL search parameter of mediaType with the selected gallery section. This means that the new gallery remains backwards compatible with links to the various gallery sections of the old gallery and when /newGallery becomes /gallery all those existing links will continue to work. I attempted to extended this further by capturing the entire breadcrumb in the URL so that users could use the browser back and forwards buttons to navigate around in addition to the breadcrumb links but this would require some backend changes as the current API endpoints require a folder id to get the listing of a folder's contents; the folder's path is not sufficient given that two folders distinct may have the same name, and thus same path.
This change alters how the breadcrumbs and other buttons and menus at the top of the new gallery page are rendered.
The breadcrumbs, a series of links allowing the users to navigate back up the folder hierarchy, is now rendered within a horizontally scrolling box. When tapped, it transforms into a read-only text field that allows users to select and copy the path, which would not otherwise be possible. Keyboard controls are fully supported, with a roving tab index employed for moving the focus between the links and tab correctly triggering the read-only text field. Being able to drag-and-drop onto the breadcrumbs is retained, with the animated added whilst dragging to make it clear which UI elements are dropzones. Note the blue outline:
The remaining buttons and menus -- actions, sorting, and views -- have been re-arranged to be consistent with the other newly designed pages (e.g. sysadmin users page) where the primary action in placed in the top left whilst the other buttons and menus are placed in the top right corner. Also similar to the sysadmin users page, a label describing what is selected is also added by this change.
Finally, react-router is used to synchronise the URL search parameter of
mediaTypewith the selected gallery section. This means that the new gallery remains backwards compatible with links to the various gallery sections of the old gallery and when/newGallerybecomes/galleryall those existing links will continue to work. I attempted to extended this further by capturing the entire breadcrumb in the URL so that users could use the browser back and forwards buttons to navigate around in addition to the breadcrumb links but this would require some backend changes as the current API endpoints require a folder id to get the listing of a folder's contents; the folder's path is not sufficient given that two folders distinct may have the same name, and thus same path.