Create File Browser Component about girder_web_components

[jtomeck]

I think the popup idea works. I can put something together for you.

[jtomeck]

Here is a modal dialogue for creating a folder. My thought is that creating an item would be very similar, if not exact (with the exception of headings and such).

A second thought that I had, was that when you click new folder/item it would add a row to the file list with the appropriate icon, and the name would just be a focused text input where you would type the name and hit enter. You would have to go back and edit/add a description after creation if this is the case.

Thoughts?

[subdavis]

As far as implementation, if it were a pop-up, I think it would be the consumer's responsibility to listen to a "new folder/item" event and display this window themselves. @zachmullen ?

If it were just a row where you type the name and click enter, how would you add the optional description? In general, I think I prefer the pop-up because:

1. it's easier to implement because it doesn't introduce new intermediate states for row data and
2. the popup UI feels very intentional - you either click "Create" or you click "Cancel". With the inline add, I think you'd need some kind of toast or check-mark animation to signify that the folder creation operation succeeded on the server, and you have to jam error handling behavior into a single data row.

My personal preference is to use the pop-up and have this be an independent component.

---

Here's where I am so far:

Couple more questions for @zachmullen and @jtomeck

• For paginated folders, what does "select all" mean? The current page is selected? All items in the folder are selected, including previous and future pages? I think current page is appropriate, since it's easy to perform operations on an entire folder using the parent.
• How do breadcrumbs behave in cases where it's too long for the table header? Should it shorten at the beginning, showing only the most recent ancestors? Should it shorten folder names to a single letter, then collapse to elipses when that's too short? Tooltips for shortened folder names?
• For "create new item" can we embed the file upload component?

I don't really know how to achieve this without the dark magic of inspecting element sizes from code. Can always just let it wrap, I guess.

[jtomeck]

• I think current page would be the expected functionality
• I think shortening at the beginning makes the most sense. This reminds me that my interface should include an "up one directory" button somewhere. Mainly because if breadcrumbs become too long, you can no longer click through the trail effectively. I'm open to thoughts on this as well.
• I think that is a great idea, however will there be enough screen space for this? I'm thinking we could make the modal wider and have half be the form with name and description and the other half be the file upload with draggable area.

@subdavis

[jtomeck]

I think I'll also need to show a UI for what happens when you click "change destination" if that's functionality we even want to have. I just added it in my mockup as a feature that would be neat and definitely help the user experience, however one that is not high priority by any means.

[jeffbaumes]

I'll go ahead and ask: Is there a reasonable way to implement infinite scroll instead of paging? Do people feel that would be a preferred interaction mode or would it make navigating more difficult (e.g. in the case of thousands of items in a folder)?

[jtomeck]

@jeffbaumes - I was going to suggest this until @subdavis asked the question about the select all. Would this functionality make planning the select all checkbox a nightmare?

[jbeezley]

My main problem with infinite scrolling is that it is very difficult to handle back/forward page navigations (or direct links) without losing your place.

[subdavis]

@jeffbaumes I like the idea of infinite scroll, and it could potentially be a toggle feature.

The case for pagination, though, is that since this is a reusable component, it would require the element to be set up in such a away that this file browser has an absolute height or is in a layout such that its height determines the page height. Putting it somewhere in the middle of the page wouldn't really flow.

Also yeah, it might select-all very unintuitive for the user.

[jeffbaumes]

Right @jtomeck - it might make some things messier on the UX side and complicate UI logic. It can be argued that paging makes things more explicit, and even modern robust tools like Gmail stick with paging. So if anything the argument is not too strong for infinite scroll. Just thought I'd bring it up.

@subdavis I'd argue against implementing both paging and infinite scroll from a maintainability standpoint. It's a good point that paging will work in more environments if this is meant to be reusable.

[zachmullen]

+1 for paging only on the first iteration.

EDIT: by first iteration I meant first iteration of development of this widget, sorry if that was unclear.

[jtomeck]

@subdavis - I had a few comments on your progress screenshot, despite it already looking great. Just a couple tweaks.

1. The selected background for the rows, can we use "light-blue lighten-5"
2. Everything you have as gray, can we change to the blue-gray of the same value? (aka gray lighten-5 -> blue-gray lighten-5) I feel that it softens things with the UI giving it more visual appeal.
3. The filesizes on the right side of the file list are black. Can we tone this down so that they don't have more emphasis than the filename/folder names themselves?
4. I was wondering the capability of us globally changing the font for the girder web components. In my design I use Barlow Condensed (a google font). I think the more condensed font will help with long filenames and generally look better overall.

Other than those points, it's looking really good. Nice work!

Also another note - @jeffbaumes and I talked about not including the "change destination" button in my mockup above for now.

[jeffbaumes]

@subdavis I just realized this is still just an issue instead of a PR. Could this be made into a WIP PR sometime in the near future? I am curious how you handle color/font theming (can you use Vuetify config to achieve this look?), and how much custom spacing and CSS, is required to get toward this look. We need to give some thought to the balance of aesthetics and maintainability, hopefully we can have both.