Fix for making arrow hover states correct in NUC

For some reason, on the NUC, we can't set opacity for hover state
in CSS. So this commit instead makes it so that we set the opacity
in Gtk. Note that this problem was only reproducible on a NUC so
this commit may eventually need to be reverted.

[endlessm/eos-sdk#540]

1 files changed, 21 insertions, 5 deletions

diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js
index 08ce2ed..cafa7a6 100644
--- a/wikipedia/widgets/category_button.js
+++ b/wikipedia/widgets/category_button.js
@@ -96,6 +96,26 @@ const CategoryButton = new Lang.Class({
         this._inner_grid.add(this._arrow);
         this.add(this._inner_grid);
         this.show_all();
+
+        // For some reason, on the NUC, setting opacity in CSS for this button does not work.
+        // So we have to set it in Gtk code. Also, we have to set the opacity
+        // to zero upfront. I am putting that here instead of in the initialisation
+        // of the arrow since it is part of this NUC-specific hack 
+        this._arrow.connect('state-flags-changed', Lang.bind(this, this._update_appearance));
+        this._arrow.set_opacity(0)
+    },
+
+    _update_appearance: function(widget) {
+        // 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._clickable_category) {
+            this._arrow.set_opacity(1);
+            return false;
+        }
+        // If no hover or press, then hide the arrow icon
+        this._arrow.set_opacity(0);
+        return false;
     },
 
     get image_uri() {
@@ -122,11 +142,7 @@ const CategoryButton = new Lang.Class({
 
     set clickable_category(value) {
         this._clickable_category = value;
-        if(this._clickable_category) {
-            this.get_style_context().add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_CLICKABLE);
-        } else {
-            this.get_style_context().remove_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_CLICKABLE);
-        }
+        this._update_appearance(this._arrow);
     },
 
     get is_main_category() {