Merge pull request #323 from endlessm/issues/301

#301 Topbar back button on category page

7 files changed, 35 insertions, 22 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 715f20f..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);
 }
 
-Gjs_AssetButton {
+.category-page Gjs_AssetButton {
     font-weight: bold;
     color: alpha(white, 0.0);
 }
 
-Gjs_AssetButton: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 fad4fcd..3ad3ebf 100644
--- a/wikipedia/PrebuiltCategoryPage.js
+++ b/wikipedia/PrebuiltCategoryPage.js
@@ -152,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);
     }
 });