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

Remove layout weirdness from Upload component #291

Closed zachmullen closed 3 years ago

zachmullen commented 3 years ago

I ran into an issue using this downstream, where trying to have a larger height component caused a bunch of blank space to appear between the actions and the file list. This was due to an empty v-col that was apparently set to grow.

I can't figure out why the v-row or v-col were even present before. Removing them doesn't break anything that I can see currently.

Screenshot of problem:

Screen Shot 2020-12-03 at 3 13 39 PM
subdavis commented 3 years ago

This I believe this was done to allow the uploader to fill the height of a fixed-height container. This would have broken upper airway, and anywhere the uploader opens in a dialog that is taller than the natural height of the uploader, it won't fill the dialog.

Without that inner container, you can never have an uploaded taller than the default height unless it's full of file rows.

I'll come up with an example of the problem to confirm.

zachmullen commented 3 years ago

Maybe that was true just in some older versions of vuetify? I can't reproduce the problem you're mentioning (modern vuetify doesn't even want you to set the height on a v-dialog, it seems). The only issue I noticed when it was in a dialog is due to the height:100% on the Dropzone component, causing it to scroll, but I think that's an unrelated bug.

zachmullen commented 3 years ago

I think I see a problem with this change actually, and I do think flexbox should be kept. I'll change this so that the v-col itself will disappear when the file list is populated.

zachmullen commented 3 years ago

Ok, this new approach should be satisfactory and fixes my original issue.

zachmullen commented 3 years ago

Note that the last commit is necessary to support the component being inside fixed-height containers. (This actually doesn't work on master currently.) Without that, a too-long file list wrapped in the v-row as a second column, which overflows out the side of the container. After disabling flex wrapping, it would still overflow the height, which downstreams could deal with on their wrapping components, however it seems more user friendly to scroll just the file list and keep the actions and error messages visible.

zachmullen commented 3 years ago

I've added one more UI bugfix for the upload component. The default gutters on the v-row in the Dropzone were causing the content inside to be shifted 12px to the left of center, which was just enough to subliminally trigger annoyance.