Round off buttons 'pill style' like on the website

[jancborchardt]

Just like @Espina2 did on the website and also suggested for the app some time ago, so all credit to him! 🎉

This works very well with our form language, with the logo, and especially with the upcoming font change to Nunito: #11932

(That’s all the screenshots for now cause I ran into a maintenance mode I can’t recover from …)

Please review @nextcloud/designers and let me know if you find any non-pilled buttons.

[MariusBluem]

Am a bit sceptic about this, since text boxes are not in this pill design ...

[skjnldsv]

There is some css magic to do for the rounded white borders (see https://user-images.githubusercontent.com/925062/47232684-a3d36a80-d3d0-11e8-9cc9-f6807d545c56.png) It looks not ok with the antialiasing :)

Otherwise I really like it. ❤️

Though it will be indeed a bit odd with the inputs.
@jancborchardt can you provide a screenshot of an input[text] joined to a submit.icon-confirm? :)

[jancborchardt]

Am a bit sceptic about this, since text boxes are not in this pill design ...

@MariusBluem yeah, I was also wondering about this. The reason I didn’t do the inputs yet is because traditionally only the search field is rounded like that. I would keep the inputs as they are for now, we can still adjust. (But even on our website I find it odd that the input fields are pill-style.)

There is some css magic to do for the rounded white borders (see https://user-images.githubusercontent.com/925062/47232684-a3d36a80-d3d0-11e8-9cc9-f6807d545c56.png) It looks not ok with the antialiasing :)

Yeah – I think a big factor of this is cause that specific screenshot was made with 150% zoom. It looks better normally.

Though it will be indeed a bit odd with the inputs.
@jancborchardt can you provide a screenshot of an input[text] joined to a submit.icon-confirm? :)

Sorry, my installation is busted atm because of a maintenance mode issue, can’t do more screenshots right now. :\ (But for the joined inputs nothing should change – the icon-confirm should be floating on the right of the input, without background so you don’t even see it’s round.)

[skjnldsv]

Sorry, my installation is busted atm because of a maintenance mode issue, can’t do more screenshots right now. :\ (But for the joined inputs nothing should change – the icon-confirm should be floating on the right of the input, without background so you don’t even see it’s round.)

Yes, but the input also have a focus and active state, so this is not exactly like that :)
Let's see later how it looks and how we can improve if needed ;)

[jancborchardt]

@skjnldsv @ChristophWurst so, could you approve? :)

[skjnldsv]

The inline input + confirm has still the proper design :)
Let's get this in!

[skjnldsv]

Rebased!

[danxuliu]

The inline input + confirm has still the proper design :)

Not everywhere, although this may be a problem specific to the share authentication page:

[skjnldsv]

@danxuliu nice catch!! :)
I'm guessing something from the guest css?

[skjnldsv]

See #11943 (comment)

[jancborchardt]

@danxuliu @skjnldsv fixed :)

Fixed, see #11943 (comment) :)

[jancborchardt]

Failures seem to be unrelated as far as I can see?
https://drone.nextcloud.com/nextcloud/server/11726/279
https://drone.nextcloud.com/nextcloud/server/11726/282

[MorrisJobke]

JSUnit failure is due to codecov issue.