Merge pull request #183 from endlessm/issues/176

Issues/176

8 files changed, 102 insertions, 27 deletions

diff --git a/wikipedia/data/assets/introduction_title_separator.png b/wikipedia/data/assets/introduction_title_separator.png
new file mode 100644
index 0000000..7c202f7
--- /dev/null
+++ b/wikipedia/data/assets/introduction_title_separator.png
diff --git a/wikipedia/data/css/endless_brazil.css b/wikipedia/data/css/endless_brazil.css
index 42d8382..7e0bde4 100644
--- a/wikipedia/data/css/endless_brazil.css
+++ b/wikipedia/data/css/endless_brazil.css
@@ -25,4 +25,18 @@ Gjs_ArticleList .button:hover {
 .articles-page {
     color: black;
     background-color: #babdb6;
-}
\ No newline at end of file
+}
+
+#category_info{
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+#category_description{
+    color:rgba(255, 255, 255, 1.0);
+    font-size: 16px;
+}
+
+#category_title{
+    font-size: 52px;
+    color: rgba(255, 255, 255, 0.9);
+}
diff --git a/wikipedia/data/endless_brazil.gresource.xml b/wikipedia/data/endless_brazil.gresource.xml
index 7b9f502..1ca63a1 100644
--- a/wikipedia/data/endless_brazil.gresource.xml
+++ b/wikipedia/data/endless_brazil.gresource.xml
@@ -5,5 +5,6 @@
     <file compressed="true">css/endless_brazil.css</file>
     <file>category_images/cuisine.jpg</file>
     <file>category_images/history.jpg</file>
+    <file>assets/introduction_title_separator.png</file>
   </gresource>
 </gresources>
diff --git a/wikipedia/src/endless_wikipedia/BoxWithBg.js b/wikipedia/src/endless_wikipedia/BoxWithBg.js
new file mode 100644
index 0000000..1ae9404
--- /dev/null
+++ b/wikipedia/src/endless_wikipedia/BoxWithBg.js
@@ -0,0 +1,19 @@
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const BoxWithBg = new Lang.Class({
+    Name: "BoxWithBg",
+    Extends: Gtk.Box,
+
+    vfunc_draw: function(cairoContext) {
+        let width = this.get_allocated_width();
+        let height = this.get_allocated_height();
+        let context = this.get_style_context();
+        Gtk.render_background(context, cairoContext, 0, 0, width, height);
+        Gtk.render_frame(context, cairoContext, 0, 0, width, height);
+
+        return this.parent(cairoContext);
+    }
+});
+
diff --git a/wikipedia/src/endless_wikipedia/EndlessWikipedia.js b/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
index 0f12986..5cd3740 100644
--- a/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
+++ b/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
@@ -22,6 +22,9 @@ this.ArticleList = _ArticleList.ArticleList;
 const _BackButton = imports.endless_wikipedia.BackButton;
 this.BackButton = _BackButton.BackButton;
 
+const _BoxWithBg = imports.endless_wikipedia.BoxWithBg;
+this.BoxWithBg = _BoxWithBg.BoxWithBg; 
+
 const STYLE_CLASS_TITLE = 'title';
 const STYLE_CLASS_PREBUILT = 'prebuilt';
 const STYLE_CLASS_CATEGORY = 'category';
diff --git a/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js b/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js
index 3831c63..b0bce2d 100644
--- a/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js
+++ b/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js
@@ -1,4 +1,5 @@
 const GObject = imports.gi.GObject;
+const GdkPixbuf = imports.gi.GdkPixbuf;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 
@@ -6,6 +7,12 @@ const EndlessWikipedia = imports.endless_wikipedia.EndlessWikipedia;
 
 GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE;
 
+function _resourceUriToPath(uri) {
+    if(uri.startsWith('resource://'))
+        return uri.slice('resource://'.length);
+    throw new Error('Resource URI did not start with "resource://"');
+}
+
 const PrebuiltCategoryPage = new Lang.Class({
     Name: 'PrebuiltCategoryPage',
     Extends: Gtk.Frame,
@@ -19,48 +26,73 @@ const PrebuiltCategoryPage = new Lang.Class({
             'Description',
             'Description of the category (excerpt from Wiki text)',
             GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+            ''),
+        // resource URI for the category's accompanying image
+        'image-uri': GObject.ParamSpec.string('image-uri',
+            'Image URI',
+            'Resource URI for the image file accompanying the category',
+            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
             '')
     },
 
     _init: function(props) {
+        this._vbox = new EndlessWikipedia.BoxWithBg({
+            name: "category_info",
+            orientation: Gtk.Orientation.VERTICAL
+        });
+
         this._title = null;
         this._description = null;
 
+        this._frame = new Gtk.Frame({
+            name: "category_frame",
+            expand: true,
+        });
+
         this._grid = new Gtk.Grid({
             orientation: Gtk.Orientation.VERTICAL,
-            expand: true
+            expand: true,
+            halign: Gtk.Align.END
         });
         this._title_label = new Gtk.Label({
+            name:"category_title",
             vexpand: false,
-            halign: Gtk.Align.START
+            halign: Gtk.Align.START,
+            margin_left:45,
+            margin_right:45
         });
         this._separator = new Gtk.Separator({
             orientation: Gtk.Orientation.HORIZONTAL,
             vexpand: false
         });
+
+        this._separator = new Gtk.Image({
+            resource: "/com/endlessm/brazil/assets/introduction_title_separator.png"
+        });
+
         this._description_label = new Gtk.Label({
+            name:"category_description",
             valign: Gtk.Align.START,
-            halign: Gtk.Align.START
+            halign: Gtk.Align.START,
+            margin_left:45,
+            margin_right:45
         });
+        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._grid.add(this._title_label);
-        this._grid.add(this._separator);
-        this._grid.add(this._description_label);
-        this.add(this._grid);
-
-        let context = this._title_label.get_style_context();
-        context.add_class(EndlessWikipedia.STYLE_CLASS_TITLE);
-        context.add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY);
-        context.add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_PAGE);
-        context.add_class(EndlessWikipedia.STYLE_CLASS_PREBUILT);
-        let context = this._separator.get_style_context();
-        context.add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_PAGE);
-        let context = this._description_label.get_style_context();
-        context.add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_PAGE);
-        let context = this.get_style_context();
-        context.add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_PAGE);
+        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.add(this._frame);
+        this._frame.add(this._grid);
+        this._category_provider = new Gtk.CssProvider();
+
     },
 
     get title() {
@@ -81,5 +113,17 @@ const PrebuiltCategoryPage = new Lang.Class({
         this._description = value;
         if(this._description_label)
             this._description_label.label = value;
+    },
+
+    get image_uri(){
+        return this._image_uri;
+    },
+
+    set image_uri(value){
+        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();
+        context.add_provider(this._category_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
     }
 });
\ No newline at end of file
diff --git a/wikipedia/src/endless_wikipedia/PrebuiltWikipediaApplication.js b/wikipedia/src/endless_wikipedia/PrebuiltWikipediaApplication.js
index 3aa4a3c..da56d2c 100644
--- a/wikipedia/src/endless_wikipedia/PrebuiltWikipediaApplication.js
+++ b/wikipedia/src/endless_wikipedia/PrebuiltWikipediaApplication.js
@@ -25,7 +25,5 @@ const PrebuiltWikipediaApplication = new Lang.Class({
         this._domain_wiki_view = new DomainWikiView.DomainWikiView(this);
         let filename = this.application_uri;
         this._domain_wiki_presenter = new DomainWikiPresenter.DomainWikiPresenter(this._domain_wiki_model, this._domain_wiki_view, filename);
-
-        //this._view = new WikipediaView.WikipediaView(this);
     }
 });
diff --git a/wikipedia/src/views/domain_wiki_view.js b/wikipedia/src/views/domain_wiki_view.js
index e56d69d..5a07ab4 100644
--- a/wikipedia/src/views/domain_wiki_view.js
+++ b/wikipedia/src/views/domain_wiki_view.js
@@ -37,7 +37,6 @@ const DomainWikiView = new Lang.Class({
             name: 'front'
         });
 
-        // Add category page to page manager
         this._window.page_manager.add(this._category_page, {
             name: 'category',
             left_topbar_widget: this._category_back_button
@@ -47,8 +46,6 @@ const DomainWikiView = new Lang.Class({
             name: 'article',
             left_topbar_widget: this._article_back_button
         })
-
-        // Build window
      
         this._window.show_all();
     },
@@ -57,7 +54,6 @@ const DomainWikiView = new Lang.Class({
         this._front_page = new EndlessWikipedia.PrebuiltFrontPage({
             title: "Brazil App"
         });
-
         this._front_page.connect('category-chosen',
             Lang.bind(this, this._onCategoryClicked));
     },
@@ -120,7 +116,7 @@ const DomainWikiView = new Lang.Class({
     set_category_info: function(category, articles) {
         this._category_view.title = category.title;
         this._category_view.description = category.description;
-
+        this._category_view.image_uri = category.image_uri;
         this._category_article_list.setArticles(articles);
         this._article_list.setArticles(articles);
         this._article_back_button.label = category.title.toUpperCase();