summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRory MacQueen <rorymacqueen@gmail.com>2014-02-04 12:46:43 -0800
committerRory MacQueen <rorymacqueen@gmail.com>2014-02-04 08:28:27 -0800
commit80f9003e067a4aad9b3c28a063423bba78a4142e (patch)
treecec1857f082c5895bba84d91b0c25d9b42c82322
parent024886a49afbf4756440a7744548e482e118820b (diff)
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]
-rw-r--r--data/css/eos-wikipedia-domain.css9
-rw-r--r--wikipedia/widgets/category_button.js26
2 files changed, 21 insertions, 14 deletions
diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css
index 50e3e71..df6aec6 100644
--- a/data/css/eos-wikipedia-domain.css
+++ b/data/css/eos-wikipedia-domain.css
@@ -82,15 +82,6 @@ Gjs_CategoryButton.clickable:hover {
background-color: alpha(#212121, 0.5);
}
-Gjs_CategoryButton .image {
- opacity: 0.0;
- transition: opacity 150ms ease-in-out;
-}
-
-Gjs_CategoryButton.clickable .image:hover {
- opacity: 1.0;
-}
-
#side_bar_button:hover {
background-color: rgba(0, 0, 0, 0.2);
}
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() {