Uploader component design

[nimishavijay]

As discussed in nextcloud/photos#1785 the uploader component needs to work across all screen sizes. After discussing with @jancborchardt and @szaimen, here is what it could look like:

• On desktop and large screens, just show the progress bar as it is.
• On mobile, it depends on the use case. For eg. in Talk, since there is ample horizontal space, it could just be the progress bar that appears below the associated element.
• For Photos and Files, we could use the circular progress bar seen for uploading in ios, or for indicating the number of characters while composing a tweet on Twitter (screenshots attached).
  • This would be used when there is not enough space for a linear progress bar. It could appear next to the associated element.
  • It can be in the same style as the linear progress bar (--color-primary-element color and --color-background-darker bg).
  • Tapping on this element would show an action menu with 2 entries, 1 line with the text info ("a few seconds remaining", etc), as well as the second option to "Cancel upload"
• Show success message after upload has finished #1604
• Show current upload speed #1605

What do you think? @skjnldsv :)

[jancborchardt]

@nimishavijay FYI I did a small adjustment:

Tapping on this element would show an action menu with 2 entries, 1 line with the text info ("a few seconds remaining", etc), as well as the second option to "Cancel upload"

[skjnldsv]

Could we have mockups of what it would look like in the following state please?
Not just inspiration, but real design references to use for the UI :)

1. No upload ongoing with the add button visible ?
2. Upload ongoing
3. Something went wrong during the upload
4. Upload finished

[marcoambrosini]

So here's a first draft. I think that the progress part of it should be implemented in the NcProgress component and imported from there into this wrapper as it would be nice to have the circular progress for other application too.
The progress would wrapped in a NcButton component and all icons are 30px in diameter so that they can fit nicely in 44px tall rows, list items and so forth.

No upload ongoing with the add button visible ?

@skjnldsv what do you mean by this?

[skjnldsv]

No upload ongoing with the add button visible ?

@skjnldsv what do you mean by this?

A mockup where no upload is in progress and we can see the add button

[skjnldsv]

@marcoambrosini thanks for the mockups!
Can you maybe show them in action? Like with the UI around it? I find it harder to really grasp the expectations.
ideally something looking like the initial mockups in photos 🙏