Opened 12 years ago

Closed 12 years ago

Last modified 10 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 12 years ago.
Current look-a-like in Read (GTK3 version)
spinbutton_adwaita.png (26.0 KB) - added by erikos 12 years ago.
The spin button themed with Adwaita
read-spin-buttons.png (21.0 KB) - added by manuq 12 years ago.
Spin button with the CSS change of comment 5
0001-Theme-GtkSpinButton-buttons-SL-3406.patch (1.6 KB) - added by manuq 12 years ago.
Screenshot_spin_button.png (9.5 KB) - added by erikos 12 years ago.
Spinbutton after applying Manuels patch (value|+)
SpinButton_value_centre.png (10.0 KB) - added by garycmartin 12 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 12 years ago.
Here's it centred and the input value container curved
SpinButton_smaller_with_grey_separator.png (9.8 KB) - added by garycmartin 12 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 12 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 12 years ago.
Second version
spin-normal.png (10.8 KB) - added by manuq 12 years ago.
spin-normal.2.png (10.8 KB) - added by manuq 12 years ago.
spin-active.png (11.1 KB) - added by manuq 12 years ago.
spin-disabled.png (11.7 KB) - added by manuq 12 years ago.
Disabled state.

Download all attachments as: .zip

Change History (27)

comment:1 Changed 12 years ago by erikos

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

comment:2 Changed 12 years ago by manuq

  • Cc manuq added

Changed 12 years ago by erikos

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

Changed 12 years ago by erikos

The spin button themed with Adwaita

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

Spin button with the CSS change of comment 5

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

Spinbutton after applying Manuels patch (value|+)

comment:7 follow-up: Changed 12 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 12 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 12 years ago by garycmartin

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

Changed 12 years ago by garycmartin

Here's it centred and the input value container curved

Changed 12 years ago by garycmartin

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

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

Second version

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

Changed 12 years ago by manuq

Changed 12 years ago by manuq

Changed 12 years ago by manuq

Disabled state.

comment:10 Changed 12 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 11 years ago by dnarvaez

  • Component changed from sugar-artwork to Sugar

comment:12 Changed 11 years ago by dnarvaez

  • Milestone 0.96 deleted

Milestone 0.96 deleted

comment:13 Changed 10 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.