Move percentdone bar to bottom of task

[andreasjacobsen93]

I think this makes much more sense visually.
I always mistake the percentdone bar for being to the task above it.

[raimund-schluessler]

This is very much a matter of taste. When the progress bar is at the bottom, you could easily mistake the bar for belonging to the task below it.

What do you think @jancborchardt ?

[andreasjacobsen93]

I read the text first, then see the progress bar.
I think this is less confusing.

[jancborchardt]

I agree below is better. But also to avoid confusion, I would separate it visually from the dividing line, and associate it more with the title. A bit like so:

[andreasjacobsen93]

I think we should keep the full width, but I provided a little space in the bottom to separate it from the one below.

[andreasjacobsen93]

I think it looks better if we also lose the 2px round corners, what do you guys think?
So we remove this border-radius: 2px 2px 2px 2px;

[jancborchardt]

The round corners should stay because we do that for the new quota bar in Files too. And it should not be full width because that makes it less apparent it's a progress bar. :)

Check out the server master with the quota bar including grey for full width: nextcloud/server#5305 (comment)

[andreasjacobsen93]

This could be a temporary solution, to improve the usability a little bit, and I will look into styling it more like the new quota later?

[jancborchardt]

It would be cool to do it fully directly. :) The screenshot looks good but a bit off, just halfway done. Let me know if you need any help! :)

[andreasjacobsen93]

Alright, update. :-)

[andreasjacobsen93]

A little more clean now! :-)

[raimund-schluessler]

I like how this looks now. 😃

I haven't tested it yet, but from the screenshots it looks as if the title of the task jumps up a bit if there is the percentbar present. Do we really want this? I would prefer to have the title static at the same position.

Also, before merging we need to squash all the commits, but I can do that once this is finished.

[jancborchardt]

Really great work @andreasjacobsen93! :)

@raimund-schluessler yes, there is a slight positional change. It's necessary to make both states look nice, and I think it's absolutely ok.
It's the same with the Contacts app for example, where the contact name in the list is at a different height depending if secondary info like the email is present or not. :)

[raimund-schluessler]

Alright, then I will merge this as it is.

@andreasjacobsen93 Thanks a lot for the contribution. More is welcome 😉