diff options
Diffstat (limited to 'wikipedia/widgets/category_button.js')
| -rw-r--r-- | wikipedia/widgets/category_button.js | 90 |
1 files changed, 39 insertions, 51 deletions
diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js index 667a816..e6cfdde 100644 --- a/wikipedia/widgets/category_button.js +++ b/wikipedia/widgets/category_button.js @@ -15,13 +15,13 @@ const CATEGORY_BUTTON_BOTTOM_MARGIN = 20; // pixels const CATEGORY_LABEL_BASELINE_CORRECTION = 0; // pixels const CATEGORY_BUTTON_BASELINE_CORRECTION = 10; // pixels const _HOVER_ARROW_URI = '/com/endlessm/wikipedia-domain/assets/category_hover_arrow.png'; -const MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE = 0.37; +const CATEGORY_MIN_WIDTH = 120; // pixels GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE; const CategoryButton = new Lang.Class({ Name: 'CategoryButton', - Extends: Gtk.EventBox, + Extends: Gtk.Button, Properties: { // resource URI for the category's accompanying image 'image-uri': GObject.ParamSpec.string('image-uri', @@ -51,9 +51,6 @@ const CategoryButton = new Lang.Class({ GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY, false) }, - Signals: { - 'clicked': {} - }, _init: function(props) { // Get ready for property construction @@ -63,19 +60,14 @@ const CategoryButton = new Lang.Class({ this._is_main_category = null; this._pixbuf = null; - this._eventbox = new Gtk.EventBox({ + this._overlay = new Gtk.Overlay({ expand: true }); - this._eventbox_grid = new Gtk.Grid({ - orientation: Gtk.Orientation.HORIZONTAL, - hexpand: true, - valign: Gtk.Align.END - }); this._label = new Gtk.Label({ margin_left: CATEGORY_LABEL_LEFT_MARGIN, margin_bottom: CATEGORY_LABEL_BOTTOM_MARGIN - CATEGORY_LABEL_BASELINE_CORRECTION, - hexpand: true, halign: Gtk.Align.START, + valign: Gtk.Align.END, xalign: 0.0, // deprecated Gtk.Misc properties; necessary because wrap: true, // "wrap" doesn't respect "halign" width_chars: 18, @@ -86,8 +78,12 @@ const CategoryButton = new Lang.Class({ margin_right: CATEGORY_BUTTON_RIGHT_MARGIN, margin_bottom: CATEGORY_BUTTON_BOTTOM_MARGIN + CATEGORY_BUTTON_BASELINE_CORRECTION, halign: Gtk.Align.END, - valign: Gtk.Align.END, - opacity: 0 + valign: Gtk.Align.END + }); + // Make the arrow image transparent to mouse events + this._arrow.connect_after('realize', function (frame) { + let gdk_window = frame.get_window(); + gdk_window.set_child_input_shapes(); }); let context = this._label.get_style_context(); @@ -99,15 +95,21 @@ const CategoryButton = new Lang.Class({ this.parent(props); // Put widgets together - this._eventbox_grid.add(this._label); - this._eventbox_grid.add(this._arrow); - this._eventbox.add(this._eventbox_grid); - this.add(this._eventbox); + let alignment = new Gtk.Alignment({ expand: true }); + alignment.add(this._label); + this._overlay.add(alignment); + this._overlay.add_overlay(this._arrow); + this.add(this._overlay); this.show_all(); - - // Connect signals - this.connect('button-press-event', - Lang.bind(this, this._onButtonPress)); + 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() { @@ -135,19 +137,9 @@ const CategoryButton = new Lang.Class({ set clickable_category(value) { this._clickable_category = value; if(this._clickable_category) { - //Hover events/effects only trigger if the button is clickable. - this._eventbox.add_events(Gdk.EventMask.ENTER_NOTIFY_MASK | - Gdk.EventMask.LEAVE_NOTIFY_MASK); - this._eventbox.connect('enter-notify-event', - Lang.bind(this, function(widget, event) { - this._eventbox.set_state_flags(Gtk.StateFlags.PRELIGHT, false); - this._arrow.opacity = 1.0; - })); - this._eventbox.connect('leave-notify-event', - Lang.bind(this, function(widget, event) { - this._eventbox.unset_state_flags(Gtk.StateFlags.PRELIGHT); - this._arrow.opacity = 0.0; - })); + this.get_style_context().add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_CLICKABLE); + } else { + this.get_style_context().remove_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_CLICKABLE); } }, @@ -168,16 +160,18 @@ const CategoryButton = new Lang.Class({ // OVERRIDES - vfunc_get_preferred_width: function() { - if(this._is_main_category) { - let toplevel = this.get_toplevel(); - if(toplevel == null) - return this.parent(); - let width = toplevel.get_allocated_width() * MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE; - return [width, width]; - } else { - return this.parent(); - } + // Sometimes our label content runs too long and the min window width can + // be greater than the screen width. So we provide our own min width for + // category buttons here, and allow the GtkLabels to be cut off if there's + // no space. We ask for width for height management so the height will be + // allocated first. + vfunc_get_request_mode: function() { + return Gtk.SizeRequestMode.WIDTH_FOR_HEIGHT; + }, + + vfunc_get_preferred_width_for_height: function(height) { + let natural_width = this.parent(height)[1]; + return [CATEGORY_MIN_WIDTH, natural_width]; }, // Reloads the pixbuf from the gresource at the proper size if necessary @@ -203,11 +197,5 @@ const CategoryButton = new Lang.Class({ // a better fix in the future, i.e. fix this through gjs. cr.$dispose(); return ret; - }, - - // HANDLERS - - _onButtonPress: function(widget, event) { - this.emit('clicked') } }); |