feat: use circular progress bar instead of linear bar

[raimund-schluessler]

This PR changes the progress / completion bar from linear to circular. It uses less space and the length and position is always the same. Requires nextcloud-libraries/nextcloud-vue#5100.

Before:

After:

Closes #1439.

[szaimen]

LGTM from design perspective. Thanks for implementing this! :)

[raimund-schluessler]

Merging now. Once there is a new nc/vue release, we will have to adjust the import accordingly. Tracked in #2453.

[jancborchardt]

I find the linear one a more obvious for comparisons. :) Generally the rule of thumb is:

• Linear for longer loading and if space is available (which is both the case here)
• Circular for shorter and where space is small (e.g. spinners, or mobile app installation with indicator on icon)

But your call of course. :) As an enhancement, it would be nice if the indicator circles all line up, so if they are always the element left next of the action menu.

[raimund-schluessler]

I find the linear one a more obvious for comparisons. :)

I understand your point, and I also think that linear bars can have advantages here. But the problem was that the bars don't always have the same total length. And there isn't really a fix for this, since subtasks are indented and shorter. So comparing different bars could be a bit misleading, see the originial issue #1439.

So, I think cirular is a bit better suited here, although it's probably a gray area 🙈

As an enhancement, it would be nice if the indicator circles all line up, so if they are always the element left next of the action menu.

That's a good idea, I will do this. see #2466.

[jancborchardt]

@raimund-schluessler ah, missed the link to the original issue, sorry. :) Right, the issue of variable widths (or rather start and end points) is indeed an issue. Then let's see how this fares. :)