search

girder / girder_web_components

Reusable Javascript and VueJS components for interacting with a Girder server.
https://gwc.girder.org
Apache License 2.0
16 stars 9 forks source link

Add prop to support condensed view during upload #156

Closed zachmullen closed 5 years ago

zachmullen commented 5 years ago

When uploading hundreds of files at a time, showing all of them in the list causes a very tall element, and also slows down the browser due to reactively repainting such a massive list on the timescales at which updates are occurring.

This commit adds a new prop maxShow (integer) to the Upload and FileUploadList components that limits the max number of files shown at a time in the list. Additional files are truncated to an element in the bottom that just shows their count.

This doesn't change the default behavior, which remains to show the entire list.

Additionally, this fixes a bug where individual file progress was not being rendered in the progress circle component, and also condenses the height of each file element in the list to make it more compact in all cases.

One downside of this approach is that the transitions are no longer animated in the condensed mode, as I wasn't sure how that could be achieved. I leave that as a future consideration.

zachmullen commented 5 years ago

@subdavis PTAL, as this is made against the vuetify upgrade branch.

subdavis commented 5 years ago

@zachmullen It looks like we've reached the first consequence of snippet/FileManager.vue

Should these new props be added as props to the snippet as well? For consistency, I think they should.

zachmullen commented 5 years ago

I don't have a preference. If the idea of the snippet approach is to have something that has sensible defaults but less controls, maybe we don't want to add another prop to it, but for my project I'm just using the Upload component directly.

matthewma7 commented 5 years ago

It looks like this new prop is simple to understand so I personally think we could have the FileManger pass it through.

subdavis commented 5 years ago

I think I agree with @matthewma7 here: pass it through and give it the same default.