diff options
author | Philip Chimento <philip@endlessm.com> | 2014-08-14 17:50:10 -0700 |
---|---|---|
committer | Philip Chimento <philip@endlessm.com> | 2014-08-14 17:50:10 -0700 |
commit | bb8639e049b9df3df9c8a5563fc0b13a7243ba84 (patch) | |
tree | 77b2279d4100b52e2a20d01f0764906e4b69ca00 | |
parent | 1aba52ae2af0bea733b4fa0b2fa5e3fa3392d392 (diff) |
Set hand cursor on search box and topbar nav
This changes the mouse pointer to be a 'hand' cursor when hovering over
certain clickable UI elements: the back/forward buttons on the title
bar, and the magnifying glass icon in the search box.
[endlessm/eos-sdk#1483]
-rw-r--r-- | overrides/endless_private/search_box.js | 42 | ||||
-rw-r--r-- | overrides/endless_private/topbar_nav_button.js | 11 |
2 files changed, 53 insertions, 0 deletions
diff --git a/overrides/endless_private/search_box.js b/overrides/endless_private/search_box.js index 680c8b8..86a2051 100644 --- a/overrides/endless_private/search_box.js +++ b/overrides/endless_private/search_box.js @@ -1,3 +1,4 @@ +const Gdk = imports.gi.Gdk; const GObject = imports.gi.GObject; const Gtk = imports.gi.Gtk; const Lang = imports.lang; @@ -10,6 +11,11 @@ const CELL_PADDING_Y = 6; * Class: SearchBox * * This is a Search Box with autocompletion functionality. + * The primary icon is a magnifying glass and the cursor turns into a hand when + * hovering over the icon. + * + * NOTE: Due to a limitation in GTK, the cursor change will not work if the + * search box's alignment is set to Gtk.Align.FILL in either direction. * */ const SearchBox = new Lang.Class({ @@ -68,10 +74,46 @@ const SearchBox = new Lang.Class({ } this._entry_changed_by_widget = false; })); + this.connect('enter-notify-event', this._on_motion.bind(this)); + this.connect('motion-notify-event', this._on_motion.bind(this)); + this.connect('leave-notify-event', this._on_leave.bind(this)); this.get_style_context().add_class('endless-search-box'); }, + _on_motion: function (widget, event) { + let [has_coords, x, y] = event.get_root_coords(); + if (!has_coords) + return; + let rect = this.get_icon_area(Gtk.EntryIconPosition.PRIMARY); + let top = this.get_toplevel(); + if (!top.is_toplevel()) + return; + let [realized, icon_x, icon_y] = this.translate_coordinates(top, + rect.x, rect.y); + if (!realized) + return; + + if (x >= icon_x && x <= icon_x + rect.width && + y >= icon_y && y <= icon_y + rect.height) { + if (this._has_hand_cursor) + return; + let cursor = Gdk.Cursor.new_for_display(Gdk.Display.get_default(), + Gdk.CursorType.HAND1); + this.window.set_cursor(cursor); + this._has_hand_cursor = true; + } else { + this._on_leave(widget); + } + }, + + _on_leave: function (widget) { + if (!this._has_hand_cursor) + return; + this.window.set_cursor(null); + this._has_hand_cursor = false; + }, + _onMatchSelected: function (widget, model, iter) { let index = model.get_path(iter).get_indices(); this.emit('menu-item-selected', this._items[index]['id']); diff --git a/overrides/endless_private/topbar_nav_button.js b/overrides/endless_private/topbar_nav_button.js index 7af7c07..541b122 100644 --- a/overrides/endless_private/topbar_nav_button.js +++ b/overrides/endless_private/topbar_nav_button.js @@ -1,3 +1,4 @@ +const Gdk = imports.gi.Gdk; const GObject = imports.gi.GObject; const Gtk = imports.gi.Gtk; const Lang = imports.lang; @@ -32,6 +33,16 @@ const TopbarNavButton = new Lang.Class({ [this._back_button, this._forward_button].forEach(function (button) { button.can_focus = false; + button.add_events(Gdk.EventMask.ENTER_NOTIFY_MASK | + Gdk.EventMask.LEAVE_NOTIFY_MASK); + button.connect('enter-notify-event', function (widget) { + let cursor = Gdk.Cursor.new_for_display(Gdk.Display.get_default(), + Gdk.CursorType.HAND1); + widget.window.set_cursor(cursor); + }); + button.connect('leave-notify-event', function (widget) { + widget.window.set_cursor(null); + }); button.get_style_context().add_class(Gtk.STYLE_CLASS_LINKED); }); |