Merge lp:~tintou/granite/avatar-hidpi into lp:~elementary-pantheon/granite/granite

[Corentin Noël]

Make it work with HiDPI

[lp:~tintou/granite/avatar-hidpi]

1016. By Corentin Noël on 2016-12-17

[Avatar] working with HiDPI devices.

[Danielle Foré (danrabbit)]

As far as I can tell, this is working as expected and fixes the issue with this widget on HiDPI

review: Approve (ux)

[Zisu Andrei (matzipan)]

2 comments inline.

review: Needs Information

Unmerged revisions

1016. By Corentin Noël on 2016-12-17

[Avatar] working with HiDPI devices.

=== modified file 'demo/GraniteDemo.vala'
--- demo/GraniteDemo.vala	2016-09-29 01:45:59 +0000
+++ demo/GraniteDemo.vala	2016-12-17 20:23:09 +0000
@@ -336,13 +336,14 @@
     private Granite.Widgets.Avatar create_avatar () {
         var username = GLib.Environment.get_user_name ();
         var avatar = new Granite.Widgets.Avatar ();
+        avatar.pixel_size = 24;
         var iconfile = @"/var/lib/AccountsService/icons/$username";
 
         avatar.valign = Gtk.Align.CENTER;
 
         try {
             var pixbuf = new Gdk.Pixbuf.from_file (iconfile);
-            avatar.pixbuf = pixbuf.scale_simple (24, 24, Gdk.InterpType.BILINEAR);
+            avatar.pixbuf = pixbuf;
             avatar.set_tooltip_text ("Avatar widget: User image found");
         } catch (Error e) {
             avatar.show_default (24);

=== modified file 'lib/Widgets/Avatar.vala'
--- lib/Widgets/Avatar.vala	2015-09-01 21:08:27 +0000
+++ lib/Widgets/Avatar.vala	2016-12-17 20:23:09 +0000
@@ -23,13 +23,12 @@
  * The Avatar widget allowes to theme & crop images with css BORDER_RADIUS property in the .avatar class.
  *
  */
-public class Granite.Widgets.Avatar : Gtk.EventBox {
+public class Granite.Widgets.Avatar : Gtk.Image {
     private const string DEFAULT_ICON = "avatar-default";
     private const string DEFAULT_STYLE = "avatar";
     private const int EXTRA_MARGIN = 4;
-    private bool draw_theme_background = true;
 
-    public Gdk.Pixbuf? pixbuf { get; set; }
+    private Gdk.Pixbuf? internal_pixbuf;
 
     /**
      * Makes new Avatar widget
@@ -44,96 +43,129 @@
     * @param pixbuf image to be used
     */
     public Avatar.from_pixbuf (Gdk.Pixbuf pixbuf) {
-        Object (pixbuf: pixbuf);
+        this.pixbuf = pixbuf;
     }
 
     /**
      * Creates a new Avatar from the speficied filepath and icon size
      *
      * @param filepath image to be used
-     * @param size to scale the image
+     * @param pixel_size to scale the image
      */
-    public Avatar.from_file (string filepath, int icon_size) {
-        try {
-            pixbuf = new Gdk.Pixbuf.from_file_at_scale (filepath, icon_size, icon_size, true);
-        } catch (Error e) {
-            show_default (icon_size);
-        }
+    public Avatar.from_file (string filepath, int pixel_size) {
+        this.pixel_size = pixel_size;
+        file = filepath;
+        icon_name = null;
+        render_pixbuf ();
     }
 
     /**
      * Creates a new Avatar with the default icon from theme without applying the css style
      *
-     * @param icon_size size of the icon to be loaded
+     * @param pixel_size size of the icon to be loaded
      */
-    public Avatar.with_default_icon (int icon_size) {
-        show_default (icon_size);
+    public Avatar.with_default_icon (int pixel_size) {
+        show_default (pixel_size);
     }
 
     construct {
+        icon_size = Gtk.IconSize.BUTTON;
+        pixel_size = 64;
         valign = Gtk.Align.CENTER;
         halign = Gtk.Align.CENTER;
-        visible_window = false;
-        get_style_context ().add_class (DEFAULT_STYLE);
-
-        notify["pixbuf"].connect (refresh_size_request);
-    }
-
-    ~Avatar () {
-        notify["pixbuf"].disconnect (refresh_size_request);
-    }
-
-    private void refresh_size_request () {
+        unowned Gtk.StyleContext style_context = get_style_context ();
+        style_context.add_class (DEFAULT_STYLE);
+        notify["scale-factor"].connect (render_pixbuf);
+        notify["icon-size"].connect (render_pixbuf);
+    }
+
+    private void render_pixbuf () {
+        if (file != null) {
+            try {
+                var temp_pixbuf = new Gdk.Pixbuf.from_file_at_scale (file, pixel_size, pixel_size, true);
+                internal_pixbuf = temp_pixbuf.scale_simple (pixel_size, pixel_size, Gdk.InterpType.BILINEAR);
+            } catch (Error e) {
+                show_default (pixel_size);
+            }
+        } else if (pixbuf != null) {
+            internal_pixbuf = pixbuf.scale_simple (pixel_size, pixel_size, Gdk.InterpType.BILINEAR);
+        }
+
+        queue_draw ();
+    }
+
+    /**
+     * Load the default avatar icon from theme into the widget without applying the css style
+     *
+     * @param pixel_size size of the icon to be loaded
+     */
+    public void show_default (int pixel_size) {
+        this.pixel_size = pixel_size;
+        this.file = null;
+        this.icon_name = DEFAULT_ICON;
+        base.pixbuf = null;
+        internal_pixbuf = null;
+        queue_draw ();
+    }
+
+    /**
+     * Get the current pixbuf, here for API retro-compatibility
+     *
+     * @return the pixbuf in use or //null//
+     */
+    [Version (deprecated = true, deprecated_since = "0.5", replacement = "Gtk.Image.get_pixbuf")]
+    public new Gdk.Pixbuf? get_pixbuf () {
+        return pixbuf;
+    }
+
+    /**
+     * Get the current internal pixbuf, here for API retro-compatibility
+     *
+     * @param pixbuf the pixbuf to show. Automatically resized.
+     */
+    public void set_pixbuf (Gdk.Pixbuf? pixbuf) {
         if (pixbuf != null) {
-            set_size_request (pixbuf.width + EXTRA_MARGIN * 2, pixbuf.height + EXTRA_MARGIN * 2);
-            draw_theme_background = true;
+            icon_name = null;
+            file = null;
+            this.pixbuf = pixbuf;
+            render_pixbuf ();
         } else {
-            set_size_request (0, 0);
-        }
-
-        queue_draw ();
-    }
-
-    /**
-     * Load the default avatar icon from theme into the widget without applying the css style
-     *
-     * @param icon_size size of the icon to be loaded
-     */
-    public void show_default (int icon_size) {
-        Gtk.IconTheme icon_theme = Gtk.IconTheme.get_default ();
-        try {
-            pixbuf = icon_theme.load_icon (DEFAULT_ICON, icon_size, 0);
-        } catch (Error e) {
-            stderr.printf ("Error setting default avatar icon: %s ", e.message);
-        }
-
-        draw_theme_background = false;
+            show_default (pixel_size);
+        }
+    }
+
+    public override void get_preferred_width (out int minimum_width, out int natural_width) {
+        minimum_width = pixel_size + EXTRA_MARGIN * 2;
+        natural_width = minimum_width;
+    }
+
+    public override void get_preferred_height (out int minimum_height, out int natural_height) {
+        minimum_height = pixel_size + EXTRA_MARGIN * 2;
+        natural_height = minimum_height;
     }
 
     public override bool draw (Cairo.Context cr) {
-        if (pixbuf == null) {
-            return base.draw (cr);
+        unowned Gtk.StyleContext style_context = get_style_context ();
+        if (internal_pixbuf == null) {
+            style_context.save ();
+            style_context.remove_class (DEFAULT_STYLE);
+            var result = base.draw (cr);
+            style_context.restore ();
+            return result;
         }
 
-        unowned Gtk.StyleContext style_context = get_style_context ();
+        int scale = style_context.get_scale ();
         var width = get_allocated_width () - EXTRA_MARGIN * 2;
         var height = get_allocated_height () - EXTRA_MARGIN * 2;
 
-        if (draw_theme_background) {
-            var border_radius = style_context.get_property (Gtk.STYLE_PROPERTY_BORDER_RADIUS, Gtk.StateFlags.NORMAL).get_int ();
-            var crop_radius = int.min (width / 2, border_radius * width / 100);
-
-            Granite.Drawing.Utilities.cairo_rounded_rectangle (cr, EXTRA_MARGIN, EXTRA_MARGIN, width, height, crop_radius);
-            Gdk.cairo_set_source_pixbuf (cr, pixbuf, EXTRA_MARGIN, EXTRA_MARGIN);
-            cr.fill_preserve ();
-            style_context.render_background (cr, EXTRA_MARGIN, EXTRA_MARGIN, width, height);
-            style_context.render_frame (cr, EXTRA_MARGIN, EXTRA_MARGIN, width, height);
-
-        } else {
-            Granite.Drawing.Utilities.cairo_rounded_rectangle (cr, EXTRA_MARGIN, EXTRA_MARGIN, width, height, 0);
-            Gdk.cairo_set_source_pixbuf (cr, pixbuf, EXTRA_MARGIN, EXTRA_MARGIN);
-            cr.fill_preserve ();
-        }
+        var border_radius = style_context.get_property (Gtk.STYLE_PROPERTY_BORDER_RADIUS, Gtk.StateFlags.NORMAL).get_int ();
+        var crop_radius = int.min (width / 2, border_radius * width / 100);
+
+        Granite.Drawing.Utilities.cairo_rounded_rectangle (cr, EXTRA_MARGIN, EXTRA_MARGIN, width, height, crop_radius);
+        Gdk.cairo_set_source_pixbuf (cr, internal_pixbuf, EXTRA_MARGIN, EXTRA_MARGIN);
+        cr.fill_preserve ();
+        style_context.render_background (cr, EXTRA_MARGIN, EXTRA_MARGIN, width, height);
+        style_context.render_frame (cr, EXTRA_MARGIN, EXTRA_MARGIN, width, height);
 
         return Gdk.EVENT_STOP;
     }