Add TopbarHomeButton

As agreed with the design team, all apps should include a generic
home button at the top left corner of the app window. Therefore, we
add a new generic button in the sdk to be used in all the different
apps for consistency.

[endlessm/eos-sdk#4030]

3 files changed, 48 insertions, 0 deletions

diff --git a/overrides/Endless.js b/overrides/Endless.js
index 4049836..a835838 100644
--- a/overrides/Endless.js
+++ b/overrides/Endless.js
@@ -26,6 +26,7 @@ imports.searchPath.unshift(getCurrentFileDir());
 const AssetButton = imports.endless_private.asset_button;
 const ConnectionTest = imports.endless_private.connection_test;
 const SearchBox = imports.endless_private.search_box;
+const TopbarHomeButton = imports.endless_private.topbar_home_button;
 const TopbarNavButton = imports.endless_private.topbar_nav_button;
 
 function _init() {
@@ -35,6 +36,7 @@ function _init() {
     Endless.AssetButton = AssetButton.AssetButton;
     Endless.doConnectionTestAsync = ConnectionTest.doConnectionTestAsync;
     Endless.SearchBox = SearchBox.SearchBox;
+    Endless.TopbarHomeButton = TopbarHomeButton.TopbarHomeButton;
     Endless.TopbarNavButton = TopbarNavButton.TopbarNavButton;
 
     // Override Endless.PageManager.add() so that you can set child properties
diff --git a/overrides/Makefile.am.inc b/overrides/Makefile.am.inc
index 2d4023c..5a6d1c9 100644
--- a/overrides/Makefile.am.inc
+++ b/overrides/Makefile.am.inc
@@ -9,6 +9,7 @@ overrides_sources = \
     overrides/endless_private/asset_button.js \
     overrides/endless_private/connection_test.js \
     overrides/endless_private/search_box.js \
+    overrides/endless_private/topbar_home_button.js \
     overrides/endless_private/topbar_nav_button.js \
     $(NULL)
 
diff --git a/overrides/endless_private/topbar_home_button.js b/overrides/endless_private/topbar_home_button.js
new file mode 100644
index 0000000..62d74c6
--- /dev/null
+++ b/overrides/endless_private/topbar_home_button.js
@@ -0,0 +1,45 @@
+const Gdk = imports.gi.Gdk;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+/**
+ * Class: TopbarHomeButton
+ * Generic button widget to re-direct the user to the home page
+ *
+ * This is a generic button widget to be used by all applications.
+ * It must be placed at the top left corner of the window. When
+ * clicked, the user must be re-directed to the home page of the
+ * application.
+ */
+const TopbarHomeButton = new Lang.Class({
+    Name: 'TopbarHomeButton',
+    GTypeName: 'EosTopbarHomeButton',
+    Extends: Gtk.Button,
+
+    _init: function(props={}) {
+        this.parent(props);
+
+        let icon_name;
+        if (Gtk.Widget.get_default_direction() === Gtk.TextDirection.RTL) {
+            icon_name = 'go-home-rtl-symbolic';
+        } else {
+            icon_name = 'go-home-symbolic';
+        }
+        let image = Gtk.Image.new_from_icon_name(icon_name, Gtk.IconSize.SMALL_TOOLBAR);
+        this.set_image(image);
+
+        this.get_style_context().add_class('home');
+
+        this.can_focus = false;
+        this.add_events(Gdk.EventMask.ENTER_NOTIFY_MASK | Gdk.EventMask.LEAVE_NOTIFY_MASK);
+        this.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);
+        });
+        this.connect('leave-notify-event', function (widget) {
+            widget.window.set_cursor(null);
+        });
+        this.get_style_context().add_class(Gtk.STYLE_CLASS_LINKED);
+    },
+});