Opened 7 years ago

Closed 7 years ago

Last modified 5 years ago

#3406 closed defect (fixed)

Theme new spinbutton correctly

Reported by: erikos Owned by: erikos
Priority: Normal Milestone: Unspecified
Component: Sugar 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 (14)

read_spin_button.png (32.9 KB) - added by erikos 7 years ago.
Current look-a-like in Read (GTK3 version)
spinbutton_adwaita.png (26.0 KB) - added by erikos 7 years ago.
The spin button themed with Adwaita
read-spin-buttons.png (21.0 KB) - added by manuq 7 years ago.
Spin button with the CSS change of comment 5
0001-Theme-GtkSpinButton-buttons-SL-3406.patch (1.6 KB) - added by manuq 7 years ago.
Screenshot_spin_button.png (9.5 KB) - added by erikos 7 years ago.
Spinbutton after applying Manuels patch (value|+)
SpinButton_value_centre.png (10.0 KB) - added by garycmartin 7 years ago.
Here's what it could look like if the value can be centred
Screenshot_spin_button_curve_value.png (10.6 KB) - added by garycmartin 7 years ago.
Here's it centred and the input value container curved
SpinButton_smaller_with_grey_separator.png (9.8 KB) - added by garycmartin 7 years ago.
As per current patch, but with grey separator and reducing the widget width
SpinButton_size_animation.gif (79.2 KB) - added by garycmartin 7 years 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 (2.4 KB) - added by manuq 7 years ago.
Second version
spin-normal.png (10.8 KB) - added by manuq 7 years ago.
spin-normal.2.png (10.8 KB) - added by manuq 7 years ago.
spin-active.png (11.1 KB) - added by manuq 7 years ago.
spin-disabled.png (11.7 KB) - added by manuq 7 years ago.
Disabled state.

Download all attachments as: .zip

Change History (27)

comment:1 Changed 7 years ago by erikos

  • Owner changed from benzea to erikos
  • Status changed from new to assigned

comment:2 Changed 7 years ago by manuq

  • Cc manuq added

Changed 7 years ago by erikos

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

Changed 7 years ago by erikos

The spin button themed with Adwaita

comment:3 Changed 7 years 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;

}

comment:4 Changed 7 years 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?

comment:5 Changed 7 years 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 7 years ago by manuq

Spin button with the CSS change of comment 5

comment:6 Changed 7 years 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 7 years ago by erikos

Spinbutton after applying Manuels patch (value|+)

comment:7 follow-up: Changed 7 years ago by erikos

  • Bug Status changed from Unconfirmed to Assigned
  • Priority changed from Unspecified by Maintainer to Normal
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)

comment:8 in reply to: ↑ 7 Changed 7 years 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 7 years ago by garycmartin

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

Changed 7 years ago by garycmartin

Here's it centred and the input value container curved

Changed 7 years ago by garycmartin

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

Changed 7 years 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 7 years ago by manuq

Second version

comment:9 Changed 7 years 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 7 years ago by manuq

Changed 7 years ago by manuq

Changed 7 years ago by manuq

Changed 7 years ago by manuq

Disabled state.

comment:10 Changed 7 years ago by erikos

  • Resolution set to fixed
  • Status changed from assigned to closed

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

comment:11 Changed 6 years ago by dnarvaez

  • Component changed from sugar-artwork to Sugar

comment:12 Changed 6 years ago by dnarvaez

  • Milestone 0.96 deleted

Milestone 0.96 deleted

comment:13 Changed 5 years ago by robertthomas

  • Milestone set to Unspecified

The most up to date listing of coupons for couponsdeals. Our editors check coupon codes to ensure validity every day.

Note: See TracTickets for help on using tickets.