#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)
Change History (27)
comment:1 Changed 11 years ago by erikos
- Owner changed from benzea to erikos
- Status changed from new to assigned
comment:2 Changed 11 years ago by manuq
- Cc manuq added
Changed 11 years ago by erikos
comment:3 Changed 11 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 11 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 11 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; }
comment:6 Changed 11 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 11 years ago by manuq
comment:7 follow-up: ↓ 8 Changed 11 years ago by erikos
- Bug Status changed from Unconfirmed to Assigned
- Priority changed from Unspecified by Maintainer to Normal
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 11 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 11 years ago by garycmartin
As per current patch, but with grey separator and reducing the widget width
Changed 11 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
comment:9 Changed 11 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 11 years ago by manuq
Changed 11 years ago by manuq
Changed 11 years ago by manuq
comment:10 Changed 11 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 10 years ago by dnarvaez
- Component changed from sugar-artwork to Sugar
comment:13 Changed 9 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.
Current look-a-like in Read (GTK3 version)