[Sugar-devel] Layout with gtk3

[Manuel Quiñones]

2013/11/22 Daniel Narvaez <dwnarvaez at gmail.com>:
> On 22 November 2013 12:49, Manuel Quiñones <manuq at laptop.org> wrote:
>>
>> Hi,
>>
>> sorry for not joining the discussion yet.  I'm a bit overloaded with
>> non-Sugar stuff.
>
>
> Ufff, we need you full time! :P
>
>>
>> I remember Agustín Zubiaga also mentioned Box(orientation) instead of
>> HBox, VBox at the time of the GTK3 port, and then I came to read about
>> Grid. When I checked, the GTK docs were recommending it, but most of
>> their code was not using it, and the API looked weird to me in Python,
>> less readable.  That is for a replacement of simple, flat boxes.  But
>> if Grid allows to remove the boxes nesting in Sugar widgets like
>> Palette, then we definetely should use it.
>
>
> Perhaps the reason their code was not using it is that it will take a while
> to get converted. The API is pretty nice for simple boxes really, it's more
> that the reference documentation is doing a bad job at showing it.
>
> box = Gtk.Grid(orientation=Gtk.Orientation.HORIZONTAL, spacing=20)
>
> widget1 = MyWidget(margin=5)
> box.add(widget1)
> widget1.show()
>
> widget2 = MyWidget(margin_top=10, margin_left=5)
> box.add(widget2)
> widget2.show()
>
> box.show()

Great example!  We should move everything then.Yeah I took a quick
look at their docs instead of trying for myself.  Their docs are
definetely doing a bad job.

>> For the widget spacings and dimentions, keep in mind that part is done
>> in the Python code, and part in the artwork CSS. And some things can
>> be done in the two sides.
>>
>> Example:
>>
>> grid margin (Python):
>> https://developer.gnome.org/gtk3/stable/GtkWidget.html#GtkWidget--margin
>> margin (CSS)
>> https://developer.gnome.org/gtk3/stable/GtkStyleContext.html#GTK-STYLE-PROPERTY-MARGIN:CAPS
>> separator height (CSS):
>>
>> https://developer.gnome.org/gtk3/stable/GtkWidget.html#GtkWidget--s-separator-height
>>
>> What I've been doing in styling is: use CSS as much as possible.  If
>> there is a CSS way and also a programmatic way, use CSS.
>
>
> I agree. I suppose it's possible to easily use CSS for non-toolkit stuff
> too? (activities and shell).

Yes, and is very easy to do:

screen = Gdk.Screen.get_default()
css_provider = Gtk.CssProvider()
style_path = "my_style.css"
css_provider.load_from_path(style_path)
context = Gtk.StyleContext()
context.add_provider_for_screen(screen, css_provider,
    Gtk.STYLE_PROVIDER_PRIORITY_USER)

>>
>> To check graphics regressions is good to do visual comparisons for
>> example:
>> http://bugs.sugarlabs.org/attachment/ticket/4295/palette-border-wrong.gif
>
>
> Good idea.
>
> Also we really need to start writing regression tests for sugar.graphics.
> Just render offscreen and compare, it should be easy to set that up.

That would be great.

-- 
.. manuq ..