Styled top bar back button

Previously, the back button on the top window bar
was not styled correctly according to designs.
This commit changes the BackButton widget to now
suclass Endless Asset Button and have the right
styling.

[endlessm/eos-sdk#301]

7 files changed, 36 insertions, 24 deletions

diff --git a/data/assets/topbar_back_icon_normal.png b/data/assets/topbar_back_icon_normal.png
new file mode 100644
index 0000000..84c6861
--- /dev/null
+++ b/data/assets/topbar_back_icon_normal.png
diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css
index 2b20fb5..5e42acd 100644
--- a/data/css/eos-wikipedia-domain.css
+++ b/data/css/eos-wikipedia-domain.css
@@ -52,23 +52,23 @@ Gjs_ArticleList .scrollbar.slider {
     background-color: #babdb6;
 }
 
-#category_info{
+.category-page #category_info{
     background-color: rgba(0, 0, 0, 0.5);
 }
 
-#category_description{
+.category-page #category_description{
     color:rgba(255, 255, 255, 1.0);
     background-color: rgba(0, 0, 0, 0);
     font-size: 12px;
     font-family: "Source Sans Pro";
 }
 
-#category_scrolled_window .scrollbar.slider {
+.category-page #category_scrolled_window .scrollbar.slider {
     border-radius: 6px;
     background-color: alpha(white, 0.3);
 }
 
-#category_title{
+.category-page #category_title{
     /* Top padding is hack because we have bad version of BentonSans */
     padding-top: 20px;
     font-family: "BentonSans ExtraLight";
@@ -89,12 +89,20 @@ Gjs_CategoryButton GtkEventBox:hover {
     background-color: rgba(0, 0, 0, 0.2);
 }
 
-#category_page_back_button {
+.category-page Gjs_AssetButton {
     font-weight: bold;
     color: alpha(white, 0.0);
 }
 
-#category_page_back_button:prelight {
+.category-page Gjs_AssetButton:prelight {
     text-shadow: 0px 1px 0px alpha(#000000, 0.5), 0px 0px 12px alpha(#000000, 0.3);
     color: alpha(white, 1.0);
 }
+
+Gjs_BackButton {
+    -GtkButton-image-spacing: 7;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
diff --git a/data/eos-wikipedia-domain.gresource.xml b/data/eos-wikipedia-domain.gresource.xml
index 19c31f4..8442d5e 100644
--- a/data/eos-wikipedia-domain.gresource.xml
+++ b/data/eos-wikipedia-domain.gresource.xml
@@ -16,5 +16,6 @@
     <file>assets/introduction_back_button_normal.png</file>
     <file>assets/introduction_back_button_pressed.png</file>
     <file>assets/introduction_back_button_hover.png</file>
+    <file>assets/topbar_back_icon_normal.png</file>
   </gresource>
 </gresources>
diff --git a/po/POTFILES.in b/po/POTFILES.in
index 017b1f7..2639260 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -1,3 +1,4 @@
 # List of source files which contain translatable strings.
 wikipedia/views/domain_wiki_view.js
+wikipedia/widgets/BackButton.js
 wikipedia/PrebuiltCategoryPage.js
diff --git a/wikipedia/PrebuiltCategoryPage.js b/wikipedia/PrebuiltCategoryPage.js
index be20547..3ad3ebf 100644
--- a/wikipedia/PrebuiltCategoryPage.js
+++ b/wikipedia/PrebuiltCategoryPage.js
@@ -122,8 +122,7 @@ const PrebuiltCategoryPage = new Lang.Class({
             normal_image_uri: "resource://com/endlessm/wikipedia-domain/assets/introduction_back_button_normal.png",
             active_image_uri: "resource://com/endlessm/wikipedia-domain/assets/introduction_back_button_pressed.png",
             prelight_image_uri: "resource://com/endlessm/wikipedia-domain/assets/introduction_back_button_hover.png",
-            label: _("OTHER CATEGORIES"),
-            name: "category_page_back_button"
+            label: _("OTHER CATEGORIES")
         });
 
         this._back_button.connect('clicked', Lang.bind(this, function() {
@@ -153,6 +152,10 @@ const PrebuiltCategoryPage = new Lang.Class({
 
         this.add(this._outer_most_grid);
         this._category_provider = new Gtk.CssProvider();
+
+        // Add style contexts for CSS
+        let context = this.get_style_context();
+        context.add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_PAGE);
     },
 
     get title() {
diff --git a/wikipedia/views/domain_wiki_view.js b/wikipedia/views/domain_wiki_view.js
index 90a29ff..ca0d6bd 100644
--- a/wikipedia/views/domain_wiki_view.js
+++ b/wikipedia/views/domain_wiki_view.js
@@ -1,18 +1,12 @@
 const EndlessWikipedia = imports.wikipedia.EndlessWikipedia;
-const Gettext = imports.gettext;
-const GLib = imports.gi.GLib;
 const Lang = imports.lang;
 const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
 const Endless = imports.gi.Endless;
 
-const Config = imports.wikipedia.config;
 const BackButton = imports.wikipedia.widgets.BackButton;
 const SideBarButton = imports.wikipedia.widgets.SideBarButton;
 
-const _ = function(string) { return GLib.dgettext('eos-sdk', string); };
-Gettext.bindtextdomain('eos-sdk', Config.DATADIR + '/locale');
-
 const SIDEBAR_BACK_BUTTON_URI = "/com/endlessm/wikipedia-domain/assets/image_strip_back_button.png";
 const SUBMENU_SEPARATOR_A_URI = "/com/endlessm/wikipedia-domain/assets/submenu_separator_shadow_a.png";
 const SUBMENU_SEPARATOR_B_URI = "/com/endlessm/wikipedia-domain/assets/submenu_separator_shadow_b.png";
@@ -142,12 +136,9 @@ const DomainWikiView = new Lang.Class({
         this._category_page.add(this._category_view);
         this._category_page.add(this._category_article_list);
 
-        this._category_back_button = new BackButton.BackButton({
-            label: _("HOME")
-        });
+        this._category_back_button = new BackButton.BackButton();
         this._category_back_button.show();
 
-
         this._category_article_list.connect('article-chosen',
             Lang.bind(this, this._onArticleClicked));
 
diff --git a/wikipedia/widgets/BackButton.js b/wikipedia/widgets/BackButton.js
index cfb3155..2d44e3f 100644
--- a/wikipedia/widgets/BackButton.js
+++ b/wikipedia/widgets/BackButton.js
@@ -1,18 +1,26 @@
+const Endless = imports.gi.Endless;
+const Gettext = imports.gettext;
+const GLib = imports.gi.GLib;
 const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 
+const Config = imports.wikipedia.config;
+
+const _ = function(string) { return GLib.dgettext('eos-sdk', string); };
+Gettext.bindtextdomain('eos-sdk', Config.DATADIR + '/locale');
+
+const BACK_BUTTON_URI = "resource://com/endlessm/wikipedia-domain/assets/topbar_back_icon_normal.png";
+
 const BackButton = new Lang.Class({
     Name: 'BackButton',
-    Extends: Gtk.Button,
+    Extends: Endless.AssetButton,
 
     _init: function(props) {
         props = props || {};
-        props.image = Gtk.Image.new_from_icon_name('go-previous-symbolic',
-            Gtk.IconSize.BUTTON);
-        props.always_show_image = true;
-        // Don't do that. What should actually happen is the system-wide setting
-        // that controls whether buttons show images should be changed.
+        props.label = _("BACK");
+        props.normal_image_uri = BACK_BUTTON_URI;
+
         this.parent(props);
     }
 });