Storage UI design review

[willgarrett64]

@adamkdean please put feedback here so I can go through them and tick them off.

Some notes on what I've got so far, and what I know needs work: General

• All data is spoofed, but you can also add/remove/edit anything and it'll persist (until you reload the page that is).
• Sorting doesn't work, it will when hooked upto API.
• None of this has been adapted for mobile yet, but happy to hear your thoughts on how to lay it out.

File Explorer

• Needs some form of user feedback when opening a new directory. I don't think we should have the file list replaced with a loading spinner, but maybe we can show the loading spinner next to the breadcrumbs until new directory loads?
• Could do with a header bar (name / size / etc).
• There are issues with the file uploader overlay size when selecting a lot of files (10+). Actually, the size of the file explorer needs making responsive.
• New file/dir buttons need restyling for sure.
• To open a new directory, it requires a double click (within 500ms). A single click will select the item, but nothing more. It used to be clicking the name would open the directory but I changed that tonight (just testing really). What do you think is best?
• Double clicking a file will open a split panel with file info on the right (future feature - I need to know what file info we will have first)
• Clicking anywhere on the page should deselect any selected file/dir, not just when clicking on other files/dirs
• I want to implement a few more features, which I'll write up in ticket tomorrow, but roughly they are:
  • summary
  • navigation with back/forward mouse or browser buttons
  • multi-select files/dirs (for multi-delete, multi-move, etc)
  • move file from one directory to another (maybe a copy/paste function of sorts, maybe a modal with a drop down for new folder, maybe drag/drop where hovering over a dir for a while opens it)

[adamkdean]

1. Estimated Costs is traffic based, should be storage based.
2. Upload file icon should be cloud with up arrow
3. Upload file + new directory icons to not have border around, and to be same size as home icon, etc
4. Adding new directory goes below files, directories and files should always be in order (dirs first, files second)
5. Hovering over file/dir should highlight (green) and underline just file/dir name, not icon
6. When clicking and selecting dir/file, grey background needs more horizontal padding etc
7. Selection grey background to have a little bit of border radius
8. Single click to navigate/select (double click ends up with a quick text selection before navigation)
9. On single click directory, disable items, while loading next (maybe with a timeout?)
10. On single click file, show pane on right side
11. When renaming file/dir, hover over tick/cross should have some hover effect (darker colour etc)
12. When renaming file/dir, hover should not make icon go green (see 5 above)
13. Renaming should trim dir/filename and not allow empty
14. Modal for deleting dir should say directory, not modal, and if any contents, warn they will be lost
15. Config should require a JSON object, not accept []
16. (Question) UI calls CDN integrations "deployments", perhaps we should use "deployments" instead of "instances"?
17. Add cursor: pointer; to the files/dirs