Feature #20014
openReskin of Group Library
0%
Files
Related issues
Updated by Boone Gorges about 1 month ago
- Related to Feature #19592: Groups Page Re-Design added
Updated by Boone Gorges 22 days ago
A first pass at the reskin is available for testing on cdev.
Sara, your comps had a single page for the Library. But it's a pretty dynamic app with a bunch of different types of views. So I made some guesses about how things ought to behave. I'll list some specific notes below, but when testing, be sure to walk through the various views and look at all the various combinations of item type.
- Your comp shows a couple of icons related to videos, images, etc. The various icons are a bit more complex than this. If you upload a file, the app tries to show a different icon based on file extension. If you create an editable doc, it shows a "pencil" icon. If you add an external link, the app tries to show a service-specific icon (like Google Drive or Dropbox). I've left this system in place and haven't swapped out any icons, since any change would require rethinking all the available icons. Here's a list of what's currently in the plugin: https://gist.github.com/boonebgorges/7a0d75b21279fd3a8e1733ccc68051c2
- I added file size, but this is valid only for uploaded files, not for External Links or Editable Docs.
- The existing library shows the "folder" (ie, tag) of the item when viewing the main list. I think users requested this because they wanted a way to see, at a glance, whether an item was in a given folder. (This goes away when you navigate into a folder, since it'd be redundant information.) I've left this information, but I've moved it into the "Details" column. Instead of showing a folder icon, I've changed it to the text "Tagged in".
- The search box in the existing app has some dynamic behavior. For the reskin, I've removed the grow/shrink behavior, but I've kept the click-x-to-reset-search behavior.
- I couldn't remember whether we have an existing example of the "advanced" three-dot submenu, so I wrote my own implementation. If we're doing this elsewhere, we'll want to standardize the markup (for accessibility) and styling.
- For pagination, I've kept the forward/back links from the current app. I also kept the underline under the links, since we use non-underline to indicate the non-clickable current page.
- I've made an initial attempt at mobile. The main two changes are (a) breaking the filters/search/add interface into multiple lines, and (b) dropping the non-sortable "details" section onto its own line. More work will probably be needed here.
- I made some small cleanup on the other views (Add New, Edit) but I didn't spend a lot of effort on it. This may also need some more attention.
Updated by Sara Cannon 16 days ago
- File Screenshot 2024-04-10 at 11.00.13 PM.png Screenshot 2024-04-10 at 11.00.13 PM.png added
- File Screenshot 2024-04-10 at 11.05.58 PM.png Screenshot 2024-04-10 at 11.05.58 PM.png added
Thank you for all this work! It is looking great.
- I would like to re-work all the icons. I'll get those to you at a later date. It's not a blocker.
- "Tagged In" is great!
- I don't think we've implemented the three-dot menu yet... but maybe Ray can confirm.
- I noticed a few bugs... the way a long-file name is handled and the file drop-down gets cut off when adding new.
Updated by Boone Gorges 16 days ago
Thanks, Sara! I've pushed up some changes that ought to address the appearance of dropdowns, etc.
Updated by Raymond Hoh 15 days ago
I couldn't remember whether we have an existing example of the "advanced" three-dot submenu, so I wrote my own implementation. If we're doing this elsewhere, we'll want to standardize the markup (for accessibility) and styling.
I'll need to take a look at what you did, Boone! I also worked on a variation of the ellipsis menu for the single group forum topic page and might re-do it since it doesn't pass all accessibility requirements.