Ticket #3406 (closed defect: fixed)

Opened 14 months ago

Last modified 12 months ago

Theme new spinbutton correctly

Reported by: erikos Owned by: erikos
Priority: Normal Milestone: 0.96
Component: sugar-artwork Version: Git as of bugdate
Severity: Major Keywords: 12.1.0
Cc: manuq, garycmartin Distribution/OS: OLPC
Bug Status: Assigned

Description

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

Attachments

read_spin_button.png Download (32.9 KB) - added by erikos 13 months ago.
Current look-a-like in Read (GTK3 version)
spinbutton_adwaita.png Download (26.0 KB) - added by erikos 13 months ago.
The spin button themed with Adwaita
read-spin-buttons.png Download (21.0 KB) - added by manuq 12 months ago.
Spin button with the CSS change of comment 5
0001-Theme-GtkSpinButton-buttons-SL-3406.patch Download (1.6 KB) - added by manuq 12 months ago.
Screenshot_spin_button.png Download (9.5 KB) - added by erikos 12 months ago.
Spinbutton after applying Manuels patch (value|-|+)
SpinButton_value_centre.png Download (10.0 KB) - added by garycmartin 12 months ago.
Here's what it could look like if the value can be centred
Screenshot_spin_button_curve_value.png Download (10.6 KB) - added by garycmartin 12 months ago.
Here's it centred and the input value container curved
SpinButton_smaller_with_grey_separator.png Download (9.8 KB) - added by garycmartin 12 months ago.
As per current patch, but with grey separator and reducing the widget width
SpinButton_size_animation.gif Download (79.2 KB) - added by garycmartin 12 months ago.
Animated gif of the screenshots so far showing how the widget is getting even wider even though the dev environments fonts are smaller
0001-Theme-GtkSpinButton-buttons-SL-3406.2.patch Download (2.4 KB) - added by manuq 12 months ago.
Second version
spin-normal.png Download (10.8 KB) - added by manuq 12 months ago.
spin-normal.2.png Download (10.8 KB) - added by manuq 12 months ago.
spin-active.png Download (11.1 KB) - added by manuq 12 months ago.
spin-disabled.png Download (11.7 KB) - added by manuq 12 months ago.
Disabled state.

Change History

  Changed 14 months ago by erikos

  • owner changed from benzea to erikos
  • status changed from new to assigned

  Changed 13 months ago by manuq

  • cc manuq added

Changed 13 months ago by erikos

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

Changed 13 months ago by erikos

The spin button themed with Adwaita

  Changed 12 months ago by 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;

}

  Changed 12 months ago by erikos

  • cc garycmartin added

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?

  Changed 12 months ago by manuq

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

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

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

Changed 12 months ago by manuq

Spin button with the CSS change of comment 5

  Changed 12 months ago by 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.

Changed 12 months ago by manuq

Changed 12 months ago by erikos

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

follow-up: ↓ 8   Changed 12 months ago by erikos

  • priority changed from Unspecified by Maintainer to Normal
  • status_field changed from Unconfirmed to Assigned

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)

in reply to: ↑ 7   Changed 12 months ago by 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)

Changed 12 months ago by garycmartin

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

Changed 12 months ago by garycmartin

Here's it centred and the input value container curved

Changed 12 months ago by garycmartin

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

Changed 12 months ago by garycmartin

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

Changed 12 months ago by manuq

Second version

  Changed 12 months ago by 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.

Changed 12 months ago by manuq

Changed 12 months ago by manuq

Changed 12 months ago by manuq

Changed 12 months ago by manuq

Disabled state.

  Changed 12 months ago by erikos

  • status changed from assigned to closed
  • resolution set to fixed

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

Note: See TracTickets for help on using tickets.