Theme new spinbutton correctly

[erikos]

Can be seen in the View sub-toolbar of Read for example.

[erikos]

Current look-a-like in Read (GTK3 version)

[erikos]

The spin button themed with Adwaita

[garnacho]

what seems to be hurting the most here is buttons being rounded, it could probably look better to have:

(value [-][+)

The following css can achieve that:

GtkSpinButton.button:first-child {

border-radius: 0px 0px 0px 0px;

}

GtkSpinButton.button:last-child {

border-radius: 0px 4px 4px 0px;

}

[erikos]

Thanks Carlos for the patch. So setting the border-radius to something like 10px for the corners gets close. We need to see how we can do the math correctly here. Secondly, the border radius does not seem to get applied to first-child I have no idea what is wrong here, hmmm.

+*/
+.spinbutton .button:first-child {
+    border-radius: 10px 0 0 10px;
+}
+
+.spinbutton .button:last-child {
+    border-radius: 0 10px 10px 0;
+}
+

I think there are two possible layouts: something like (value (-][+)), or as Carlos suggests (value [-][+)). Gary any comments?

[manuq]

This fixes the "first-child" issue for me:

.spinbutton.button {
    border-radius: 0;
}

.spinbutton.button:last-child {
    border-radius: 0px 10px 10px 0px;
}

[manuq]

Spin button with the CSS change of comment 5

[manuq]

Currently if you press the buttons, a border appears around them and this provokes a resize in the toolbar height. It is because of this CSS rule:

.button:focused {
    border-width: $(thickness)px;
    border-color: @white;
    border-style: solid;
}

It's fixed adding:

.spinbutton.button:focused {
    border-color: transparent;
    border-radius: 0px;
    border-style: none;
}

Now I will try to remove the hardcored number for the radius and attach a first patch.

[erikos]

Spinbutton after applying Manuels patch (value|-|+)

[erikos]

Gary, I have a question on this one: In the above screenshot after applying Manuels patch we have the following layout: (value|-|+). Should we try to get it like (value(-|+) ? And I presume there should be a | between the '-' and the '+'.

And then when pressing the buttons it gets all white which I think is not the intended lookalike.

(marking this one normal priority wise only as the buttons are functional, but not nice)

[garycmartin]

Replying to erikos:

Gary, I have a question on this one: In the above screenshot after applying Manuels patch we have the following layout: (value|-|+). Should we try to get it like (value(-|+) ?

OK so first, Screenshot_spin_button.png does look cleaner than the original. I'm Not so convinced about adding an extra curve in a (value(-|+) layout. Just to confirm, is it possible to put the value in the centre or is that a no go from the implementation side? See attached SpinButton_value_centre.png for a quick mockup, I also mocked up an image where the value is in a curved container called Screenshot_spin_button_curve_value.png

And I presume there should be a | between the '-' and the '+'.

If the '-' and '+' do have to go together, a 2px vertical grey line can separate them, see attached mockup SpinButton_smaller_with_grey_separator.png

Lastly, looking at the screenshots so far, the widget total width is getting even larger not smaller, one of the issues with the new gtk3 SpinButton was that it was so much wider than the previous version (e.g Abacus activity need to re-work all it's SpinButton UI). See SpinButton_size_animation.gif for an animation overlapping the screen grabs, even with the smaller font the widget still gets even wider! ;)

And then when pressing the buttons it gets all white which I think is not the intended lookalike.

(marking this one normal priority wise only as the buttons are functional, but not nice)

[garycmartin]

Here's what it could look like if the value can be centred

[garycmartin]

Here's it centred and the input value container curved

[garycmartin]

As per current patch, but with grey separator and reducing the widget width

[garycmartin]

Animated gif of the screenshots so far showing how the widget is getting even wider even though the dev environments fonts are smaller

[manuq]

Second version

[manuq]

So, second version attached, my findings:

Centered value layout is not possible in current Gtk with just CSS.

White button while pressing is because previously we had white background and black foreground (the arrows were the foreground). I think a quick solution is to set black background, see screenshot. Ideally we should have black circle and white bg, but that may require adding svg images to the buttons.

I removed the padding and the calculations for it. Previously they were used in the entry, not in the buttons, to make it 45 pixel height, as the comment in the gtkrc for Gtk2 states: "This tries to get a height of exactly 45 pixel for the entry".

Hope this is enough for the moment.

[manuq]

Disabled state.

[erikos]

Pushed as 44d9e63f5d11970ee04ae5b555130a5682b62c20 after another discussion with Manu. Thanks everyone for your work on this one :)