Uploader component design

As discussed in https://github.com/nextcloud/photos/pull/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"
• https://github.com/nextcloud-libraries/nextcloud-upload/issues/1604
• https://github.com/nextcloud-libraries/nextcloud-upload/issues/1605

What do you think? @skjnldsv :)

Start by reviewing the discussion in PR #1785 and the related nextcloud-upload issues #1604 and #1605. Compare the existing uploader behavior with the proposed desktop and mobile layouts, including the progress indicator and upload actions. Done means the agreed responsive design is implemented across the listed use cases.