Created article list to look like designs

I modified the ArticleList widget to look like the designs. This meant modifying some of the css as well as creating a
new textButton widget, which displays a text label and an icon image, which will appear on a hover. Also added the
separators between the category info box and the article list

[endlessm/eos-sdk#177]

18 files changed, 114 insertions, 25 deletions

diff --git a/wikipedia/data/assets/category_hover_arrow.png b/wikipedia/data/assets/category_hover_arrow.png
new file mode 100644
index 0000000..13a2fb0
--- /dev/null
+++ b/wikipedia/data/assets/category_hover_arrow.png
diff --git a/wikipedia/data/assets/category_splash_separator_shadow.png b/wikipedia/data/assets/category_splash_separator_shadow.png
new file mode 100644
index 0000000..6ef03e0
--- /dev/null
+++ b/wikipedia/data/assets/category_splash_separator_shadow.png
diff --git a/wikipedia/data/assets/content_background.jpg b/wikipedia/data/assets/content_background.jpg
new file mode 100644
index 0000000..e53a87a
--- /dev/null
+++ b/wikipedia/data/assets/content_background.jpg
diff --git a/wikipedia/data/assets/content_title_separator.png b/wikipedia/data/assets/content_title_separator.png
new file mode 100644
index 0000000..db7d7db
--- /dev/null
+++ b/wikipedia/data/assets/content_title_separator.png
diff --git a/wikipedia/data/assets/image_strip_back_button.png b/wikipedia/data/assets/image_strip_back_button.png
new file mode 100644
index 0000000..1d4787c
--- /dev/null
+++ b/wikipedia/data/assets/image_strip_back_button.png
diff --git a/wikipedia/data/assets/submenu_background.jpg b/wikipedia/data/assets/submenu_background.jpg
new file mode 100644
index 0000000..ccdac1d
--- /dev/null
+++ b/wikipedia/data/assets/submenu_background.jpg
diff --git a/wikipedia/data/assets/submenu_bg_hover.png b/wikipedia/data/assets/submenu_bg_hover.png
new file mode 100644
index 0000000..b9ed24a
--- /dev/null
+++ b/wikipedia/data/assets/submenu_bg_hover.png
diff --git a/wikipedia/data/assets/submenu_bg_normal.jpg b/wikipedia/data/assets/submenu_bg_normal.jpg
new file mode 100644
index 0000000..b84c375
--- /dev/null
+++ b/wikipedia/data/assets/submenu_bg_normal.jpg
diff --git a/wikipedia/data/assets/submenu_bg_pressed.png b/wikipedia/data/assets/submenu_bg_pressed.png
new file mode 100644
index 0000000..d5693d5
--- /dev/null
+++ b/wikipedia/data/assets/submenu_bg_pressed.png
diff --git a/wikipedia/data/assets/submenu_hover_arrow.png b/wikipedia/data/assets/submenu_hover_arrow.png
new file mode 100644
index 0000000..a286591
--- /dev/null
+++ b/wikipedia/data/assets/submenu_hover_arrow.png
diff --git a/wikipedia/data/assets/submenu_separator_shadow_a.png b/wikipedia/data/assets/submenu_separator_shadow_a.png
new file mode 100644
index 0000000..d4ac1ba
--- /dev/null
+++ b/wikipedia/data/assets/submenu_separator_shadow_a.png
diff --git a/wikipedia/data/assets/submenu_separator_shadow_b.png b/wikipedia/data/assets/submenu_separator_shadow_b.png
new file mode 100644
index 0000000..ba79241
--- /dev/null
+++ b/wikipedia/data/assets/submenu_separator_shadow_b.png
diff --git a/wikipedia/data/css/endless_brazil.css b/wikipedia/data/css/endless_brazil.css
index 7e0bde4..fc667cb 100644
--- a/wikipedia/data/css/endless_brazil.css
+++ b/wikipedia/data/css/endless_brazil.css
@@ -1,5 +1,5 @@
 * {
-    font-family: "Benton Sans";
+    font-family: "BentonSans Regular";
 }
 
 .title {
@@ -11,15 +11,29 @@
     color: #a0a0a0;
 }
 
+Gjs_ArticleList{
+    background-image: url('resource:///com/endlessm/brazil/assets/submenu_background.jpg');
+}
+
 Gjs_ArticleList .button {
-    border-top: 1px solid #555753;
-    padding: 10px;
-    background-color: #d3d7cf;
-    color: black;
+    padding-left: 25px;
+    padding-right: 25px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-size: 15px;
+    color: #464646;
+    background-image: url('resource:///com/endlessm/brazil/assets/submenu_bg_normal.jpg');
+    background-size: cover;
 }
 
 Gjs_ArticleList .button:hover {
     color: #555753;
+    background-image: url('resource:///com/endlessm/brazil/assets/submenu_bg_hover.png');
+}
+
+Gjs_ArticleList .button:active {
+    color: #555753;
+    background-image: url('resource:///com/endlessm/brazil/assets/submenu_bg_pressed.png');
 }
 
 .articles-page {
@@ -37,6 +51,7 @@ Gjs_ArticleList .button:hover {
 }
 
 #category_title{
+    font-family: "BentonSans Light";
     font-size: 52px;
     color: rgba(255, 255, 255, 0.9);
-}
+}
\ No newline at end of file
diff --git a/wikipedia/data/endless_brazil.gresource.xml b/wikipedia/data/endless_brazil.gresource.xml
index 1ca63a1..6040179 100644
--- a/wikipedia/data/endless_brazil.gresource.xml
+++ b/wikipedia/data/endless_brazil.gresource.xml
@@ -6,5 +6,14 @@
     <file>category_images/cuisine.jpg</file>
     <file>category_images/history.jpg</file>
     <file>assets/introduction_title_separator.png</file>
+    <file>assets/submenu_bg_hover.png</file>
+    <file>assets/submenu_bg_pressed.png</file>
+    <file>assets/submenu_bg_normal.jpg</file>
+    <file>assets/submenu_separator_shadow_a.png</file>
+    <file>assets/submenu_separator_shadow_b.png</file>
+    <file>assets/submenu_hover_arrow.png</file>
+    <file>assets/submenu_background.jpg</file>
+    <file>assets/category_splash_separator_shadow.png</file>
+    <file>assets/category_hover_arrow.png</file>
   </gresource>
 </gresources>
diff --git a/wikipedia/src/endless_wikipedia/ArticleList.js b/wikipedia/src/endless_wikipedia/ArticleList.js
index 9406181..59f1ef9 100644
--- a/wikipedia/src/endless_wikipedia/ArticleList.js
+++ b/wikipedia/src/endless_wikipedia/ArticleList.js
@@ -1,10 +1,11 @@
 const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
-
+const HOVER_ARROW_URI = "/com/endlessm/brazil/assets/submenu_hover_arrow.png";
 const ArticleList = new Lang.Class({
     Name: 'ArticleList',
     Extends: Gtk.ScrolledWindow,
+    
     Signals: {
         'article-chosen': {
             param_types: [GObject.TYPE_STRING, GObject.TYPE_INT]
@@ -16,11 +17,13 @@ const ArticleList = new Lang.Class({
         props.hscrollbar_policy = Gtk.PolicyType.NEVER;
         props.vscrollbar_policy = Gtk.PolicyType.AUTOMATIC,
         this.parent(props);
-
         this._grid = new Gtk.Grid({
             orientation: Gtk.Orientation.VERTICAL,
             vexpand: true
         });
+
+        //width is set per designs, height is set arbitrarily for now but doesn't matter because it's just a min size
+        this.set_size_request(258, 500);
         this.add(this._grid);
     },
 
@@ -33,16 +36,11 @@ const ArticleList = new Lang.Class({
 
         // Create new ones
         articles.forEach(function(title, index, obj) {
-            var button = Gtk.Button.new_with_label(title.toUpperCase());
-            button.image = Gtk.Image.new_from_icon_name('go-next-symbolic',
-                Gtk.IconSize.BUTTON);
-            button.always_show_image = true; // Don't do this, see BackButton.js
-            button.image_position = Gtk.PositionType.RIGHT;
-            button.xalign = 0;
+            let button = new EndlessWikipedia.TextButton(HOVER_ARROW_URI, title, {hexpand:true});
             button.connect('clicked', Lang.bind(this, function() {
                 this.emit('article-chosen', title, index);
             }));
-            button.show();
+            
             this._grid.add(button);
         }, this);
     }
diff --git a/wikipedia/src/endless_wikipedia/EndlessWikipedia.js b/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
index 5cd3740..9028173 100644
--- a/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
+++ b/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
@@ -23,7 +23,10 @@ const _BackButton = imports.endless_wikipedia.BackButton;
 this.BackButton = _BackButton.BackButton;
 
 const _BoxWithBg = imports.endless_wikipedia.BoxWithBg;
-this.BoxWithBg = _BoxWithBg.BoxWithBg; 
+this.BoxWithBg = _BoxWithBg.BoxWithBg;
+
+const _TextButton = imports.endless_wikipedia.textButton;
+this.TextButton = _TextButton.TextButton;  
 
 const STYLE_CLASS_TITLE = 'title';
 const STYLE_CLASS_PREBUILT = 'prebuilt';
diff --git a/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js b/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js
index b0bce2d..f46ca2a 100644
--- a/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js
+++ b/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js
@@ -49,11 +49,12 @@ const PrebuiltCategoryPage = new Lang.Class({
             expand: true,
         });
 
-        this._grid = new Gtk.Grid({
-            orientation: Gtk.Orientation.VERTICAL,
+        this._layout_grid = new Gtk.Grid({
+            orientation: Gtk.Orientation.HORIZONTAL,
             expand: true,
             halign: Gtk.Align.END
         });
+
         this._title_label = new Gtk.Label({
             name:"category_title",
             vexpand: false,
@@ -66,7 +67,16 @@ const PrebuiltCategoryPage = new Lang.Class({
             vexpand: false
         });
 
-        this._separator = new Gtk.Image({
+        this._submenu_separator = new Gtk.Image({
+            halign:Gtk.Align.END,
+            resource: "/com/endlessm/brazil/assets/submenu_separator_shadow_a.png"
+        });
+
+        this._splash_separator = new Gtk.Image({
+            resource: "/com/endlessm/brazil/assets/category_splash_separator_shadow.png"
+        });
+
+        this._description_separator = new Gtk.Image({
             resource: "/com/endlessm/brazil/assets/introduction_title_separator.png"
         });
 
@@ -80,17 +90,21 @@ const PrebuiltCategoryPage = new Lang.Class({
         this._description_label.set_line_wrap(true);
         this._description_label.set_max_width_chars(40);
 
-        this._grid.set_size_request(100, 100);
-
         this.parent(props);
 
         this._vbox.pack_start(this._title_label, false, false, 0);
-        this._vbox.pack_start(this._separator, false, false, 0);
-        this._vbox.pack_start(this._description_label, true, true, 0);
-        this._grid.add(this._vbox);
+        this._vbox.pack_start(this._description_separator, false, false, 0);
+        this._vbox.pack_start(this._description_label, true, true, 0);        
+
+        this._layout_grid.add(this._splash_separator);
+        this._layout_grid.add(this._vbox);
+        
+        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._frame.add(this._grid);
         this._category_provider = new Gtk.CssProvider();
 
     },
diff --git a/wikipedia/src/endless_wikipedia/textButton.js b/wikipedia/src/endless_wikipedia/textButton.js
new file mode 100644
index 0000000..f8cf373
--- /dev/null
+++ b/wikipedia/src/endless_wikipedia/textButton.js
@@ -0,0 +1,50 @@
+const Lang = imports.lang;
+const Gdk = imports.gi.Gdk;
+const GdkPixbuf = imports.gi.GdkPixbuf;
+const Gtk = imports.gi.Gtk;
+
+const TextButton = new Lang.Class({
+    Name: 'EndlessTextButton',
+    Extends: Gtk.Button,
+
+    // This is a button for the article list widget. It has a label and an icon image.
+    // The icon image will only appear on hover or press of button
+    _init: function(hover_icon_path, label_text, params) {
+        params.hexpand = true;
+        this.parent(params);
+
+        this._hover_icon_pixbuf = GdkPixbuf.Pixbuf.new_from_resource(hover_icon_path);
+
+        this._image = new Gtk.Image();
+        this._image.set_from_pixbuf(this._hover_icon_pixbuf);
+
+        this._box = new Gtk.Box({
+            orientation: Gtk.Orientation.HORIZONTAL
+        });
+
+        this._label = new Gtk.Label({
+            label: label_text.toUpperCase()
+        });
+
+        this._box.pack_start(this._label, false, false, 0);
+        this._box.pack_end(this._image, false, false, 0);
+
+        this.add(this._box);
+        this.connect('state-changed', Lang.bind(this, this._update_appearance));
+        this.show_all();
+        this._image.hide();
+    },
+
+    _update_appearance: function(widget, state) {
+        // If button is hovered over and/or pressed, then show the arrow icon
+        if (widget.get_state_flags() & Gtk.StateFlags.ACTIVE || 
+            widget.get_state_flags() & Gtk.StateFlags.PRELIGHT) {
+            this._image.show();
+            return false;
+        }
+        // If no hover or press, then hide the arrow icon
+        this._image.hide();
+        return false;
+    }
+});
+