From a534c68a1ef3dc5cdc49a69d3277b9c85c25e044 Mon Sep 17 00:00:00 2001
From: Philip Chimento <philip@endlessm.com>
Date: Fri, 17 Jan 2014 22:35:19 -0200
Subject: Change the category button to a CompositeButton

This allows the arrow fade-in and fade-out to be specified in the CSS.

[endlessm/eos-sdk#505]
---
 data/css/eos-wikipedia-domain.css    | 10 +++++++++-
 wikipedia/widgets/category_button.js | 14 ++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css
index 7ee21ca..98deb8a 100644
--- a/data/css/eos-wikipedia-domain.css
+++ b/data/css/eos-wikipedia-domain.css
@@ -81,7 +81,15 @@ Gjs_CategoryButton.clickable {
 
 Gjs_CategoryButton.clickable:hover {
     background-color: alpha(#212121, 0.5);
-    transition: background-color 150ms ease-in-out;
+}
+
+Gjs_CategoryButton .image {
+    opacity: 0.0;
+    transition: opacity 150ms ease-in-out;
+}
+
+Gjs_CategoryButton.clickable .image:hover {
+    opacity: 1.0;
 }
 
 #side_bar_button:hover {
diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js
index ed95507..6388d68 100644
--- a/wikipedia/widgets/category_button.js
+++ b/wikipedia/widgets/category_button.js
@@ -4,6 +4,7 @@ const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 
+const CompositeButton = imports.wikipedia.widgets.composite_button;
 const Utils = imports.wikipedia.utils;
 
 const CATEGORY_LABEL_LEFT_MARGIN = 25;  // pixels
@@ -22,7 +23,7 @@ GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.
 
 const CategoryButton = new Lang.Class({
     Name: 'CategoryButton',
-    Extends: Gtk.Button,
+    Extends: CompositeButton.CompositeButton,
     Properties: {
         // resource URI for the category's accompanying image
         'image-uri': GObject.ParamSpec.string('image-uri',
@@ -89,6 +90,7 @@ const CategoryButton = new Lang.Class({
             let gdk_window = frame.get_window();
             gdk_window.set_child_input_shapes();
         });
+        this._arrow.get_style_context().add_class(Gtk.STYLE_CLASS_IMAGE);
 
         let context = this._label.get_style_context();
         context.add_class(EndlessWikipedia.STYLE_CLASS_TITLE);
@@ -103,17 +105,9 @@ const CategoryButton = new Lang.Class({
         alignment.add(this._label);
         this._overlay.add(alignment);
         this._overlay.add_overlay(this._arrow);
+        this.setSensitiveChildren([this._arrow]);
         this.add(this._overlay);
         this.show_all();
-        this._arrow.hide();
-
-        this.connect("enter", Lang.bind(this, function (w) {
-            if(this._clickable_category)
-                this._arrow.show();
-        }));
-        this.connect("leave", Lang.bind(this, function (w) {
-            this._arrow.hide();
-        }));
     },
 
     get image_uri() {
-- 
cgit v1.2.3