summaryrefslogtreecommitdiff
path: root/overrides
diff options
context:
space:
mode:
authorPhilip Chimento <philip@endlessm.com>2014-08-14 17:50:10 -0700
committerPhilip Chimento <philip@endlessm.com>2014-08-14 17:50:10 -0700
commitbb8639e049b9df3df9c8a5563fc0b13a7243ba84 (patch)
tree77b2279d4100b52e2a20d01f0764906e4b69ca00 /overrides
parent1aba52ae2af0bea733b4fa0b2fa5e3fa3392d392 (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]
Diffstat (limited to 'overrides')
-rw-r--r--overrides/endless_private/search_box.js42
-rw-r--r--overrides/endless_private/topbar_nav_button.js11
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);
});