Merge pull request #317 from endlessm/issues/270

#270 [wikipedia] Back button on category page

12 files changed, 90 insertions, 39 deletions

diff --git a/data/assets/introduction_back_button_hover.png b/data/assets/introduction_back_button_hover.png
new file mode 100644
index 0000000..418fee7
--- /dev/null
+++ b/data/assets/introduction_back_button_hover.png
diff --git a/data/assets/introduction_back_button_normal.png b/data/assets/introduction_back_button_normal.png
new file mode 100644
index 0000000..54ea015
--- /dev/null
+++ b/data/assets/introduction_back_button_normal.png
diff --git a/data/assets/introduction_back_button_pressed.png b/data/assets/introduction_back_button_pressed.png
new file mode 100644
index 0000000..a1d3bc0
--- /dev/null
+++ b/data/assets/introduction_back_button_pressed.png
diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css
index c1d6199..715f20f 100644
--- a/data/css/eos-wikipedia-domain.css
+++ b/data/css/eos-wikipedia-domain.css
@@ -85,6 +85,16 @@ Gjs_CategoryButton GtkEventBox:hover {
     transition: background-color 100ms ease-in-out;
 }
 
-#side_bar_button:hover{
+#side_bar_button:hover {
     background-color: rgba(0, 0, 0, 0.2);
 }
+
+Gjs_AssetButton {
+    font-weight: bold;
+    color: alpha(white, 0.0);
+}
+
+Gjs_AssetButton:prelight {
+    text-shadow: 0px 1px 0px alpha(#000000, 0.5), 0px 0px 12px alpha(#000000, 0.3);
+    color: alpha(white, 1.0);
+}
diff --git a/data/eos-wikipedia-domain.gresource.xml b/data/eos-wikipedia-domain.gresource.xml
index 447b7e2..19c31f4 100644
--- a/data/eos-wikipedia-domain.gresource.xml
+++ b/data/eos-wikipedia-domain.gresource.xml
@@ -13,5 +13,8 @@
     <file>assets/category_splash_separator_shadow.png</file>
     <file>assets/category_hover_arrow.png</file>
     <file>assets/image_strip_back_button.png</file>
+    <file>assets/introduction_back_button_normal.png</file>
+    <file>assets/introduction_back_button_pressed.png</file>
+    <file>assets/introduction_back_button_hover.png</file>
   </gresource>
 </gresources>
diff --git a/po/POTFILES.in b/po/POTFILES.in
index 21f5350..017b1f7 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -1,2 +1,3 @@
 # List of source files which contain translatable strings.
 wikipedia/views/domain_wiki_view.js
+wikipedia/PrebuiltCategoryPage.js
diff --git a/wikipedia/ArticleList.js b/wikipedia/ArticleList.js
index d6edb0f..0b145b8 100644
--- a/wikipedia/ArticleList.js
+++ b/wikipedia/ArticleList.js
@@ -3,7 +3,7 @@ const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 
-const TextButton = imports.wikipedia.widgets.TextButton;
+const ListTextButton = imports.wikipedia.widgets.ListTextButton;
 
 const ARTICLE_LIST_SIZE_REQUEST = 320;
 const HOVER_ARROW_URI = "/com/endlessm/wikipedia-domain/assets/submenu_hover_arrow.png";
@@ -43,7 +43,7 @@ const ArticleList = new Lang.Class({
 
         // Create new ones
         articles.forEach(function(title, index, obj) {
-            let button = new TextButton.TextButton(HOVER_ARROW_URI, title, {hexpand:true});
+            let button = new ListTextButton.ListTextButton(HOVER_ARROW_URI, title, {hexpand:true});
             button.connect('clicked', Lang.bind(this, function() {
                 this.emit('article-chosen', title, index);
             }));
diff --git a/wikipedia/Makefile.am.inc b/wikipedia/Makefile.am.inc
index dd1c5bb..ba7e4e8 100644
--- a/wikipedia/Makefile.am.inc
+++ b/wikipedia/Makefile.am.inc
@@ -24,13 +24,14 @@ js_sources = \
 	wikipedia/ArticleList.js \
 	wikipedia/widgets/BackButton.js \
 	wikipedia/widgets/BoxWithBg.js \
+	wikipedia/widgets/FixedSizeTextView.js \
 	wikipedia/EndlessWikipedia.js \
 	wikipedia/PrebuiltArticlesPage.js \
 	wikipedia/PrebuiltCategoryPage.js \
 	wikipedia/PrebuiltFrontPage.js \
 	wikipedia/PrebuiltWikipediaApplication.js \
 	wikipedia/widgets/SideBarButton.js \
-	wikipedia/widgets/TextButton.js \
+	wikipedia/widgets/ListTextButton.js \
 	wikipedia/config.js \
 	wikipedia/widgets/scaled_image.js \
 	wikipedia/utils.js \
diff --git a/wikipedia/PrebuiltCategoryPage.js b/wikipedia/PrebuiltCategoryPage.js
index 85484b9..fad4fcd 100644
--- a/wikipedia/PrebuiltCategoryPage.js
+++ b/wikipedia/PrebuiltCategoryPage.js
@@ -1,19 +1,25 @@
-const EndlessWikipedia = imports.wikipedia.EndlessWikipedia;
+const Endless = imports.gi.Endless;
+const Gettext = imports.gettext;
+const GLib = imports.gi.GLib;
 const GObject = imports.gi.GObject;
-const GdkPixbuf = imports.gi.GdkPixbuf;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 
 const BoxWithBg = imports.wikipedia.widgets.BoxWithBg;
+const Config = imports.wikipedia.config;
+const FixedSizeTextView = imports.wikipedia.widgets.FixedSizeTextView;
 const ScaledImage = imports.wikipedia.widgets.scaled_image;
 
-const CATEGORY_DESCRIPTION_WIDTH = 520;
 const SUBMENU_SEPARATOR_A_URI = "/com/endlessm/wikipedia-domain/assets/submenu_separator_shadow_a.png";
 const SPLASH_SEPARATOR_URI = "/com/endlessm/wikipedia-domain/assets/category_splash_separator_shadow.png";
 const INTRO_TITLE_SEPARATOR_URI = "/com/endlessm/wikipedia-domain/assets/introduction_title_separator.png";
+const LEFT_MARGIN_FOR_TEXT = 45;
 
 GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE;
 
+const _ = function(string) { return GLib.dgettext('eos-sdk', string); };
+Gettext.bindtextdomain('eos-sdk', Config.DATADIR + '/locale');
+
 function _resourceUriToPath(uri) {
     if(uri.startsWith('resource://'))
         return uri.slice('resource://'.length);
@@ -42,32 +48,31 @@ const PrebuiltCategoryPage = new Lang.Class({
             '')
     },
 
+    Signals: {
+        'go-back-home':{}
+    },
+
     _init: function(props) {
-        this._vbox = new BoxWithBg.BoxWithBg({
+        this._shaded_box = new BoxWithBg.BoxWithBg({
             name: "category_info",
             orientation: Gtk.Orientation.VERTICAL,
-            expand:true
+            vexpand: true
         });
-        this._vbox.set_size_request(CATEGORY_DESCRIPTION_WIDTH, -1);
 
         this._title = null;
         this._description = null;
 
-        this._frame = new Gtk.Frame({
-            name: "category_frame",
-            expand: true,
-        });
-
         this._layout_grid = new Gtk.Grid({
             orientation: Gtk.Orientation.HORIZONTAL,
-            expand: true,
+            hexpand: true,
             halign: Gtk.Align.END
         });
 
         this._title_label = new Gtk.Label({
             name:"category_title",
             expand: false,
-            halign: Gtk.Align.START
+            halign: Gtk.Align.START,
+            margin_left: LEFT_MARGIN_FOR_TEXT
         });
 
         this._submenu_separator = new ScaledImage.ScaledImage({
@@ -87,9 +92,8 @@ const PrebuiltCategoryPage = new Lang.Class({
             constraint: Gtk.Orientation.HORIZONTAL
         });
 
-        this._description_text_view = new Gtk.TextView({
+        this._description_text_view = new FixedSizeTextView.FixedSizeTextView({
             name:"category_description",
-            expand: true,
             margin_left: 6, // stupid Benton Sans correction
             sensitive: false,
             editable: false,
@@ -102,39 +106,52 @@ const PrebuiltCategoryPage = new Lang.Class({
 
         this._description_scrolled_window = new Gtk.ScrolledWindow({
             name: 'category_scrolled_window',
-            halign: Gtk.Align.FILL
+            halign: Gtk.Align.FILL,
+            vexpand: true,
+            margin_left: LEFT_MARGIN_FOR_TEXT
         });
 
         this._description_scrolled_window.add(this._description_text_view);
+
         this._description_scrolled_window.set_policy(Gtk.PolicyType.NEVER,
             Gtk.PolicyType.AUTOMATIC);
 
-        this._inner_grid = new Gtk.Grid({
-            orientation: Gtk.Orientation.VERTICAL,
-            expand: true,
-            margin_left: 45,
-            margin_right: 45,
-            margin_bottom: 15
+        this._back_button = new Endless.AssetButton({
+            valign: Gtk.Align.CENTER,
+            hexpand: true,
+            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")
         });
 
+        this._back_button.connect('clicked', Lang.bind(this, function() {
+            this.emit('go-back-home');
+        }));
+
         this.parent(props);
 
-        this._inner_grid.add(this._title_label);
-        this._inner_grid.add(this._description_separator);
-        this._inner_grid.add(this._description_scrolled_window);
-        this._vbox.add(this._inner_grid);
+        this._shaded_box.add(this._title_label);
+        this._shaded_box.add(this._description_separator);
+        this._shaded_box.add(this._description_scrolled_window);
 
         this._layout_grid.add(this._splash_separator);
-        this._layout_grid.add(this._vbox);
+        this._layout_grid.add(this._shaded_box);
         
-        this._overlay = new Gtk.Overlay({halign:Gtk.Align.END});
+        this._overlay = new Gtk.Overlay({
+            halign: Gtk.Align.END
+        });
         this._overlay.add(this._layout_grid);
         this._overlay.add_overlay(this._submenu_separator);
 
-        this._frame.add(this._overlay);
-        this.add(this._frame);
-        this._category_provider = new Gtk.CssProvider();
+        this._outer_most_grid = new Gtk.Grid({
+            orientation: Gtk.Orientation.HORIZONTAL
+        });
+        this._outer_most_grid.add(this._back_button);
+        this._outer_most_grid.add(this._overlay);
 
+        this.add(this._outer_most_grid);
+        this._category_provider = new Gtk.CssProvider();
     },
 
     get title() {
@@ -165,7 +182,7 @@ const PrebuiltCategoryPage = new Lang.Class({
         this._image_uri = value;
         let frame_css = "#category_frame{background-image: url('" + value + "');background-repeat:no-repeat;background-size:cover;}";
         this._category_provider.load_from_data(frame_css);
-        let context = this._frame.get_style_context();
+        let context = this.get_style_context();
         context.add_provider(this._category_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
     }
 });
\ No newline at end of file
diff --git a/wikipedia/views/domain_wiki_view.js b/wikipedia/views/domain_wiki_view.js
index 29f638a..90a29ff 100644
--- a/wikipedia/views/domain_wiki_view.js
+++ b/wikipedia/views/domain_wiki_view.js
@@ -129,7 +129,9 @@ const DomainWikiView = new Lang.Class({
         this._category_page = new Gtk.Grid({
             orientation: Gtk.Orientation.HORIZONTAL
         });
-        this._category_view = new EndlessWikipedia.PrebuiltCategoryPage();
+        this._category_view = new EndlessWikipedia.PrebuiltCategoryPage({
+            name: "category_frame"
+        });
         // _category_article_list is eventually going to be the same widget as
         // _article_list, so that's why it's not built into the
         // PrebuiltCategoryPage
@@ -151,6 +153,9 @@ const DomainWikiView = new Lang.Class({
 
         this._category_back_button.connect('clicked',
             Lang.bind(this, this._onCategoryBackClicked));
+
+        this._category_view.connect('go-back-home',
+            Lang.bind(this, this._onCategoryBackClicked));
     },
 
     _set_article_sidebar_uri: function(uri){
diff --git a/wikipedia/widgets/FixedSizeTextView.js b/wikipedia/widgets/FixedSizeTextView.js
new file mode 100644
index 0000000..f655d88
--- /dev/null
+++ b/wikipedia/widgets/FixedSizeTextView.js
@@ -0,0 +1,14 @@
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const CATEGORY_DESCRIPTION_WIDTH = 520;
+
+const FixedSizeTextView = new Lang.Class({
+    Name: "FixedSizeTextView",
+    Extends: Gtk.TextView,
+
+    vfunc_get_preferred_width: function(){
+        return [CATEGORY_DESCRIPTION_WIDTH, CATEGORY_DESCRIPTION_WIDTH];
+    }
+});
diff --git a/wikipedia/widgets/TextButton.js b/wikipedia/widgets/ListTextButton.js
index 834826f..a3a141b 100644
--- a/wikipedia/widgets/TextButton.js
+++ b/wikipedia/widgets/ListTextButton.js
@@ -8,8 +8,8 @@ const Pango = imports.gi.Pango;
 // going over its specified width
 const ARTICLE_LABEL_MAX_WIDTH_CHARS = 24;
 
-const TextButton = new Lang.Class({
-    Name: 'EndlessTextButton',
+const ListTextButton = new Lang.Class({
+    Name: 'EndlessListTextButton',
     Extends: Gtk.Button,
 
     // This is a button for the article list widget. It has a label and an icon image.