Merge pull request #4090 from endlessm/sdk/4030

Add TopbarHomeButton

6 files changed, 69 insertions, 0 deletions

diff --git a/data/css/endless-widgets.css b/data/css/endless-widgets.css
index 59e36f7..03c0c72 100644
--- a/data/css/endless-widgets.css
+++ b/data/css/endless-widgets.css
@@ -86,6 +86,7 @@ EosWindow .titlebar .button:active {
         color-stop(0, rgb(67, 67, 67)));
 }
 
+EosWindow .titlebar .home,
 EosWindow .titlebar .back,
 EosWindow .titlebar .forward {
     background-image: linear-gradient(-179deg,
@@ -96,6 +97,7 @@ EosWindow .titlebar .forward {
     padding: 2px 10px;
 }
 
+EosWindow .titlebar .home:insensitive,
 EosWindow .titlebar .back:insensitive,
 EosWindow .titlebar .forward:insensitive {
     border: 1px solid alpha(black, 0.20);
@@ -106,6 +108,10 @@ EosWindow .titlebar .forward:insensitive {
     icon-shadow: none;
 }
 
+EosWindow .titlebar .home {
+    border-radius: 5px;
+}
+
 EosWindow .titlebar .back {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
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);
+    },
+});
diff --git a/test/Makefile.am.inc b/test/Makefile.am.inc
index 2fca7ea..0fad7a2 100644
--- a/test/Makefile.am.inc
+++ b/test/Makefile.am.inc
@@ -53,6 +53,7 @@ javascript_tests = \
 	test/webhelper/testWebActions2Old.js \
 	test/webhelper/testUpdateFontSize.js \
 	test/endless/testCustomContainer.js \
+	test/endless/testTopbarHomeButton.js \
 	test/endless/testTopbarNavButton.js \
 	test/endless/testSearchBox.js \
 	$(NULL)
diff --git a/test/endless/testTopbarHomeButton.js b/test/endless/testTopbarHomeButton.js
new file mode 100644
index 0000000..1eeee73
--- /dev/null
+++ b/test/endless/testTopbarHomeButton.js
@@ -0,0 +1,14 @@
+const Endless = imports.gi.Endless;
+const Gtk = imports.gi.Gtk;
+
+Gtk.init(null);
+
+describe('TopbarHomeButton', function () {
+    let button;
+
+    beforeEach(function () {
+        button = new Endless.TopbarHomeButton();
+    });
+
+    it('can be constructed', function () {});
+});