File browser polishing

• Ignore common system files when adding directories. Specifically .DS_Store files on osx. If you know of an similar windows os metadata files that should generally be ignored, then those too. (56106551425b72e1af05c6f18172c6fc7d0e3469)

• Sort by name should only sort by name. We can sort by kind (folders first then files) by default, but if the user selects sort by name it should do that regardless of their kind. We may need to introduce a “kind” column so that the user can return the sort to “by kind” if they want, but I’d love to find a less redundant way. Skip for now. See https://github.com/ipfs-shipyard/ipfs-webui/issues/748#issuecomment-413955567

• fix breadcrumb position jumping up a few pixels when navigating to a file preview page. (acdd1dd438ab5e1968b5fc7d34b08c4dcc6ad43d)

• Display cumulative sizes for directories (9218fea291359f08066f59a6177fbd96185be6a4)

• focus the first item in the file list and add a focus state. (95ea3c7 - just click arrow up or down when nothing is focused).

• add keyboard navigation for up and down arrow keys to navigate up and down the list, and enter to drill down into a folder or file. Meta key + down should also drill down. (95ea3c7)

• replace “Root” in breadcrumb with a home icon (like https://icon.now.sh/home) (39b5de0)

• Add a quick slide-in from bottom animation to the multi select actions bar when it appears (e95d95fdb81d11f00343f9fa41ef42da4b5b74c8)

• When previewing images and videos, don’t show the media larger than it’s natural resolution. Use max-width:100%. Right now they always take up the full width, which looks neat, but small images get super distorted, and most images and videos end up much taller than the available screen height, on my laptop screen at least. (333eb883567de1e0cebd58ea82abe706cf53dc83)

• match breadcrumb underline color to the dag-pb color. See: https://github.com/ipfs-shipyard/ipld-explorer/issues/27 (81e58024e12fe70902d21d60ea8ec263c128d94c)

[olizilla]

Done!

[olizilla]

Getting really good now! A couple of things from using the new fancy files:

• Now we’ve tightened up the file list, it feels like there is a little too much space at the top of the page. I don’t have specific suggestions there, but what do you think?
• The home icon with the underline seems a little to “strong” when we’re at the root. It’s all on it’s own on the left and really dark and underlined, but it’s not interesting until we start drilling down into the folders and files. Perhaps we should hide it or make it less visually distracting when we’re at the root.
• There are a few little gaps in the clickable areas on the file items. I keep managing to click right between the filename and the cid, and it’s not part of the hit area so nothing happens. The is another between the icon and the file name/cid. Would be nicer to have that whole part of the box be clickable.