[Sugar-devel] [PATCH sugar-toolkit-gtk3 2/2] Fix the drawing of ColorToolButton, RadioToolButton and ToggleToolButton

[Simon Schampijer]

On 08/23/2012 07:12 AM, Manuel Quiñones wrote:
> gtk_paint_box is deprecated [1] and now we can use the CSS to change
> the style of the button's prelight state.
>
> To test the buttons, I provide a patch for HelloWorld activity [2].
> They are added in the main toolbar.

We should really make sure we have a test-suite for the toolkit/artwork. 
At the moment we are only patching while going ;p

> Signed-off-by: Manuel Quiñones <manuq at laptop.org>
>
> [1] http://developer.gnome.org/gtk3/stable/GtkStyle.html#gtk-paint-box
> [2] http://dev.laptop.org/~manuq/shell-port/test_gtk3_buttons.patch

Cool, while trying this out I came across the issue that when the you 
click on the colorbutton the size changes and therefore there is a gap 
between toolbar and Palette. Looking at gtk-widgets.css.em this is 
causing this (border-width):

.button:focused {
     border-width: $(thickness)px;
     border-color: @white;
     border-style: solid;
}

We should find out for which exact use cases it is there. git-blame only 
told me that it has been added in the general conversion.

>   src/sugar3/graphics/colorbutton.py      | 14 ++++----------
>   src/sugar3/graphics/radiotoolbutton.py  | 14 ++++----------
>   src/sugar3/graphics/toggletoolbutton.py | 14 ++++----------
>   3 files changed, 12 insertions(+), 30 deletions(-)
>
> diff --git a/src/sugar3/graphics/colorbutton.py b/src/sugar3/graphics/colorbutton.py
> index 95d023a..0783481 100644
> --- a/src/sugar3/graphics/colorbutton.py
> +++ b/src/sugar3/graphics/colorbutton.py
> @@ -523,20 +523,14 @@ class ColorToolButton(Gtk.ToolItem):
>
>       title = GObject.property(type=str, getter=get_title, setter=set_title)
>
> -    def do_expose_event(self, event):
> +    def do_draw(self, cr):
>           child = self.get_child()
>           allocation = self.get_allocation()
>           if self._palette and self._palette.is_up():
>               invoker = self._palette.props.invoker
> -            invoker.draw_rectangle(event, self._palette)
> -        elif child.state == Gtk.StateType.PRELIGHT:
> -            child.style.paint_box(event.window, Gtk.StateType.PRELIGHT,
> -                                  Gtk.ShadowType.NONE, event.area,
> -                                  child, 'toolbutton-prelight',
> -                                  allocation.x, allocation.y,
> -                                  allocation.width, allocation.height)
> -
> -        Gtk.ToolButton.do_expose_event(self, event)
> +            invoker.draw_rectangle(cr, self._palette)
> +
> +        Gtk.ToolButton.do_draw(self, cr)

In the toolbutton we have a more detailed drawing. We should see how it 
exactly differs and if we need to do similar here.

>       def __notify_change(self, widget, pspec):
>           self.notify(pspec.name)
> diff --git a/src/sugar3/graphics/radiotoolbutton.py b/src/sugar3/graphics/radiotoolbutton.py
> index 8fd01f7..d843b1f 100644
> --- a/src/sugar3/graphics/radiotoolbutton.py
> +++ b/src/sugar3/graphics/radiotoolbutton.py
> @@ -165,18 +165,12 @@ class RadioToolButton(Gtk.RadioToolButton):
>       palette_invoker = GObject.property(
>           type=object, setter=set_palette_invoker, getter=get_palette_invoker)
>
> -    def do_expose_event(self, event):
> +    def do_draw(self, cr):
>           child = self.get_child()
>           allocation = self.get_allocation()
>
>           if self.palette and self.palette.is_up():
>               invoker = self.palette.props.invoker
> -            invoker.draw_rectangle(event, self.palette)
> -        elif child.state == Gtk.StateType.PRELIGHT:
> -            child.style.paint_box(event.window, Gtk.StateType.PRELIGHT,
> -                                  Gtk.ShadowType.NONE, event.area,
> -                                  child, 'toolbutton-prelight',
> -                                  allocation.x, allocation.y,
> -                                  allocation.width, allocation.height)
> -
> -        Gtk.RadioToolButton.do_expose_event(self, event)
> +            invoker.draw_rectangle(cr, self.palette)
> +
> +        Gtk.RadioToolButton.do_draw(self, cr)
> diff --git a/src/sugar3/graphics/toggletoolbutton.py b/src/sugar3/graphics/toggletoolbutton.py
> index c865332..63f4ed6 100644
> --- a/src/sugar3/graphics/toggletoolbutton.py
> +++ b/src/sugar3/graphics/toggletoolbutton.py
> @@ -113,20 +113,14 @@ class ToggleToolButton(Gtk.ToggleToolButton):
>       accelerator = GObject.property(type=str, setter=set_accelerator,
>                                      getter=get_accelerator)
>
> -    def do_expose_event(self, event):
> +    def do_draw(self, cr):
>           allocation = self.get_allocation()
>           child = self.get_child()
>
>           if self.palette and self.palette.is_up():
>               invoker = self.palette.props.invoker
> -            invoker.draw_rectangle(event, self.palette)
> -        elif child.state == Gtk.StateType.PRELIGHT:
> -            child.style.paint_box(event.window, Gtk.StateType.PRELIGHT,
> -                                  Gtk.ShadowType.NONE, event.area,
> -                                  child, 'toolbutton-prelight',
> -                                  allocation.x, allocation.y,
> -                                  allocation.width, allocation.height)
> -
> -        Gtk.ToggleToolButton.do_expose_event(self, event)
> +            invoker.draw_rectangle(cr, self.palette)
> +
> +        Gtk.ToggleToolButton.do_draw(self, cr)
>
>       palette = property(get_palette, set_palette)
>

Thanks,
    Simon