diff options
| -rw-r--r-- | data/css/eos-wikipedia-domain.css | 9 | ||||
| -rw-r--r-- | wikipedia/widgets/category_button.js | 26 |
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() { |