Arvados

Branch 2753-collection-tree-view-wip could use some review at this point. After discussion on IRC, it implements a classic two-pane view when browsing Collection files. The left pane shows the tree of files, with collapsing folders and limited file type icons (different for images vs. everythign else). The right pane shows details about the currently selected file, with widgets to view/download/add to selections/image preview.

Now that I've implemented this, I'm not 100% sold on this. I'm starting to wonder if something more like the previous version might've been better, just with added indentation and collapsing to make the hierarchy clearer, and pop-up image previews. That would take some custom JavaScript writing, though, since the jstree plug-in I used likes to completely own the HTML in your <ul>. But it would probably make better use of space, since the right pane in the current version is kind of empty if you're not looking at an image.

If we decide we want to go ahead with this approach, two small things I want to fix:

• Anchor the file details pane to the top of the window, so file details stay handy if you scroll down a very long list of collection files.
• Make the View and Download buttons take up the whole width of the pane together.

• Don't like the setup where we can only see one "select this file" checkbox at a time: selecting a bunch of files from a collection is no longer reasonable. (Is this the sort of thing made difficult by "jstree likes to completely own the HTML"?)
• Similarly, don't like losing the "see all the file sizes" feature.
• Possible to close/hide the details pane until I click a file (and put a "close" box on it)? With a collection like d4eb5e5a71c8b93cc5c785c8b7382b0f+36720 filenames get hidden behind the mysterious white area).

• Icons on the tree view rows don't show properly until I add "fa" class. ("fa-file"→rectangle "fa fa-file"→file icon)
• When I click a folder on the left, I see details for some file on the right (should show me stuff about this folder - perhaps total size and #files? but even blank would be better than detail of something that's not currently selected)
• Path in detail pane should not be a huge font (ideally: could it be presented in a more breadcrumby format, but still clipboardable? Perhaps present it first as a heading with just the filename, then "Full path: foo/bar/baz"?)

So I, too, am less than 100% sold.

• The hierarchy view is a huge improvement. Ability to collapse is nice, but not essential.
• Like the detail pane (assuming it can be hidden when it's not wanted or there's nothing to say).

Tom Clegg wrote:

So I, too, am less than 100% sold.

Pushed a new attempt to branch 2753-collection-tree-view-2-wip, 1562310. It uses all the same infrastructure, down to building the list in the view, but the contents of that list are much more like our old table. No collapsing, but no JavaScript either, just some cute CSS. This is ready for review.

Looking at 2753-collection-tree-view-2-wip 1562310

• Definitely a huge improvement, seeing the structure.
• Not keen on the stripes. They help line up the filenames and sizes, but they also highlight a meaningless distinction. I also don't like the way the highlighting doesn't extend all the way across. #f8f8f8 looks less bad but I'm sure it depends on the display. I tried tweaking and the best version IMO is with no striping, just a white background. (If we want to highlight the whole row I'm guessing we have to abandon ul+li in favor of table rows with offset=depth?)
• Get rid of the initial indent with something like

div > ul.collection_files {
    margin-left: 0;
    padding-left: 0;
}

Other minor stuff

• Could clean up css a bit by wrapping this whole thing in a <div class="collection-files"> and then using ".collection-files li.odd"
• Use bootstrap .pull-right to float right, instead of making .collection_files_buttons
• I think .fa-fw ("fixed width") does what you want in .collection_files_name i.fa
• Move css to collections.css
• Add a little bit of white space between the view/download buttons and the v-scrollbar

Tom Clegg wrote:

• Not keen on the stripes.

As we discussed on IRC, my main concern was helping people line up the filenames with their buttons. I replaced all this with a :hover effect, using the same colors we do in the header.

Everything else I implemented as requested. Thanks especially for the pointers about classes available from our CSS libraries. Please review 3e1d74d.

Looks great, please merge!