Prevent progress bar overflow when uploading in Folders

[artonge]

Fix #1682

Before	After

@nextcloud/designers any idea on how to fix that nicely?

[skjnldsv]

Would it make sense to upstream to @nc/uploader ?

[artonge]

Would it make sense to upstream to @nc/uploader ?

Depending on the final solution, yes, but not satisfied by the current one. Let's see what @nextcloud/designers have to say :)

[nimishavijay]

Great catch! What do you think about something like this?

Over here, only on mobile there is some extra space below the add button where the progress bar would appear. This gives ample space for longer text and makes sure that no other elements jump around during upload. What do you think? cc @szaimen

[szaimen]

Yes, I also think that moving it to the next line on mobile is the way to go 👍

[szaimen]

But I would not add a big empry space in case the upload bar is not visible

[artonge]

@skjnldsv I do not see any other way than emitting a progress event from @nc/uploader and recreate a progress bar here. Maybe we can create and export the progress bar component in @nc/uploader to not duplicate code. What do you think?

[skjnldsv]

@skjnldsv I do not see any other way than emitting a progress event from @nc/uploader and recreate a progress bar here. Maybe we can create and export the progress bar component in @nc/uploader to not duplicate code. What do you think?

That would kind of defeat the purpose of having a simple and universal component look.

@nimishavijay the uploader design is aiming to be a standard in other locations of Nextcloud. If we start putting the progress in another location (like bellow the title), it won't work well with what we're trying to achieve I'm afraid 🤔

[nimishavijay]

Hmm, are there examples of other places where the component is/will be used? We can try and come to a design that works for most use cases? :)

[skjnldsv]

@nimishavijay Files app for example or like Talk that is not using this component yet :)

@artonge please also note that we do expose current list and progress.

[nimishavijay]

Hmm, even in Files and Talk, for the mobile view the best place does seem to be below the add/upload button/whatever element the uploader is associated with. Any other placement will give rise to the same problem as we saw. Is it totally not possible to standardise this design?

Some alternatives would be to use a loading spinner instead of a progress bar on mobile, or maybe showing the uploading message in a toast notification?

[skjnldsv]

@nimishavijay what would the standard look like?
This is an upload component, not a Title-header-upload component.
So if we want to stay generic, I don't see what else we can do.

Also, and that's my personal opinion, I think your mockup doesn't look polished enough from a UI perspective. The spacing is not consistent (for example; I'm guessing you just did a quick mockup in photoshop), but if we want to really make sure we can move forward, having a real final mockup to refer to for adjustments would be really helpful :)

[artonge]

Hacky solution for now with css positioning. But it works.
Let's wait for Talk and Files to use this component to have more concrete use cases and see how we can unify those.
Screenshot updated.

[artonge]

/backport to stable26

[artonge]

/backport to stable25

[szaimen]

LGTM for the meantime (but didnt test)