summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPhilip Chimento <philip@endlessm.com>2014-01-17 22:35:19 -0200
committerPhilip Chimento <philip@endlessm.com>2014-01-22 22:43:53 -0200
commita534c68a1ef3dc5cdc49a69d3277b9c85c25e044 (patch)
tree313c8fb7ea3dd7e9c6bdf93a5a98fd6ae45ab388
parentc466c45d91b13e2d284751c300de6c8bf112ee5a (diff)
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]
-rw-r--r--data/css/eos-wikipedia-domain.css10
-rw-r--r--wikipedia/widgets/category_button.js14
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() {