Always reserve space for arrow on article list

This keeps the content from jumping on article list mouseover. Used
the same opacity trick we use for the category button arrow. Did this
in js instead of css, and the image file was set in js and I wanted
to be consistent. But could also be done in css with state flags
[endlessm/eos-sdk#537]

1 files changed, 3 insertions, 3 deletions

diff --git a/wikipedia/widgets/ListTextButton.js b/wikipedia/widgets/ListTextButton.js
index c87150f..41a7585 100644
--- a/wikipedia/widgets/ListTextButton.js
+++ b/wikipedia/widgets/ListTextButton.js
@@ -21,7 +21,7 @@ const ListTextButton = new Lang.Class({
         this._hover_icon_pixbuf = GdkPixbuf.Pixbuf.new_from_resource(hover_icon_path);
 
         this._image = new Gtk.Image({
-            no_show_all: true
+            opacity: 0,
         });
         this._image.set_from_pixbuf(this._hover_icon_pixbuf);
 
@@ -47,11 +47,11 @@ const ListTextButton = new Lang.Class({
         // If button is hovered over and/or pressed, then show the arrow icon
         if (widget.get_state_flags() & Gtk.StateFlags.ACTIVE || 
             widget.get_state_flags() & Gtk.StateFlags.PRELIGHT) {
-            this._image.show();
+            this._image.set_opacity(1);
             return false;
         }
         // If no hover or press, then hide the arrow icon
-        this._image.hide();
+        this._image.set_opacity(0);
         return false;
     }
 });