Yaru: boxed hover effect on window control buttons

[clobrano]

This idea comes from madsrh's mockup.

It requires background-images for control buttons, so it's not a high priority task

[madsrh]

But no circle on hover for min and max, right?

[clobrano]

No circles, correct

[godlyranchdressing]

I did some testing with this, but I decided to omit the boxed effect. It doesn't work without the white circle present in the mockup. Since the current buttons themselves rely on a circle effect when interacted with you end up with this double background color that looks like an error, too.

Should we merge the changes or try with another design instead?

[clobrano]

Can you post a picture of the result?

[godlyranchdressing]

Sure.

Background-image lets us use larger buttons without the background-color taking up the full dimensions of the box which would look awkward:
(Result of the pull request)

With the boxed effect, a 1:1 ratio would make the buttons too wide and the close button can't reach the edge of the headerbar unless we remove the headerbar's padding:

[clobrano]

What do you think of removing the circle hover from the second picture?

[godlyranchdressing]

I thought about it. We could make them look and work like regular headerbar buttons, but then the orange circle will need to go.

I think I might reduce the target space since it's too probably a little unreasonably large the way it is now. 2-3px outside of the circle's radius should be fair.

[madsrh]

• I too think the hover in the second picture should be removed.
• I really like the large target space ;)

[clobrano]

If I understood correctly, the effect should be this one

[clobrano]

@godlyranchdressing do you mind if I commit this?

[godlyranchdressing]

Of course, though I think it'd be better if they have a radius to match the other headerbar buttons.

[clobrano]

Of course, though I think it'd be better if they have a radius to match the other headerbar buttons.

That'd be surely better