Add app image to title label

Presenter sets app title and app image at the same time.

[endlessm/eos-sdk#182]

4 files changed, 128 insertions, 20 deletions

diff --git a/wikipedia/src/endless_wikipedia/PrebuiltFrontPage.js b/wikipedia/src/endless_wikipedia/PrebuiltFrontPage.js
index 38b6250..36fdd2c 100644
--- a/wikipedia/src/endless_wikipedia/PrebuiltFrontPage.js
+++ b/wikipedia/src/endless_wikipedia/PrebuiltFrontPage.js
@@ -4,6 +4,9 @@ const Lang = imports.lang;
 
 const EndlessWikipedia = imports.endless_wikipedia.EndlessWikipedia;
 const CategorySelectorView = imports.views.category_selector_view;
+const TitleLabelView = imports.views.title_label_view;
+
+const TITLE_CATEGORY_COLUMN_SPACING = 10;  // pixels
 
 GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE;
 
@@ -15,6 +18,11 @@ const PrebuiltFrontPage = new Lang.Class({
             'Front page title',
             'Name of the Wikipedia-based application',
             GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+            ''),
+        'image-uri': GObject.ParamSpec.string('image-uri',
+            'Image URI',
+            'Image URI for title image',
+            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
             '')
     },
     Signals: {
@@ -25,12 +33,9 @@ const PrebuiltFrontPage = new Lang.Class({
 
     _init: function(props) {
         this._title = null;
+        this._image_uri = null;
 
-        this._title_label = new Gtk.Label({
-            expand: true,
-            halign: Gtk.Align.START,
-            valign: Gtk.Align.END
-        });
+        this._title_label = new TitleLabelView.TitleLabelView();
         let context = this._title_label.get_style_context()
         context.add_class(EndlessWikipedia.STYLE_CLASS_TITLE);
         context.add_class(EndlessWikipedia.STYLE_CLASS_PREBUILT);
@@ -39,6 +44,7 @@ const PrebuiltFrontPage = new Lang.Class({
 
         props = props || {};
         props.orientation = Gtk.Orientation.HORIZONTAL;
+        props.column_spacing = TITLE_CATEGORY_COLUMN_SPACING;
         this.parent(props);
 
         this.add(this._title_label);
@@ -53,8 +59,16 @@ const PrebuiltFrontPage = new Lang.Class({
 
     set title(value) {
         this._title = value;
-        if(this._title_label)
-            this._title_label.label = value.toUpperCase();
+        this._title_label.title = value;
+    },
+
+    get image_uri() {
+        return this._image_uri;
+    },
+
+    set image_uri(value) {
+        this._image_uri = value;
+        this._title_label.image_uri = value;
     },
 
     setCategories: function(categories) {
diff --git a/wikipedia/src/presenters/domain_wiki_presenter.js b/wikipedia/src/presenters/domain_wiki_presenter.js
index 9d010e3..151bae6 100644
--- a/wikipedia/src/presenters/domain_wiki_presenter.js
+++ b/wikipedia/src/presenters/domain_wiki_presenter.js
@@ -61,7 +61,7 @@ const DomainWikiPresenter = new Lang.Class({
             category_models.push(categoryModel);
         }
         this._domain_wiki_model.addCategories(category_models);
-        this._domain_wiki_view.set_front_page_info(this._image_uri);
+        this._domain_wiki_view.set_front_page_info(this._application_name, this._image_uri);
     },
 
     initCategory: function(category){
diff --git a/wikipedia/src/views/domain_wiki_view.js b/wikipedia/src/views/domain_wiki_view.js
index 460709b..36062b2 100644
--- a/wikipedia/src/views/domain_wiki_view.js
+++ b/wikipedia/src/views/domain_wiki_view.js
@@ -51,9 +51,7 @@ const DomainWikiView = new Lang.Class({
     },
 
     create_front_page: function(){
-        this._front_page = new EndlessWikipedia.PrebuiltFrontPage({
-            title: "Brazil"
-        });
+        this._front_page = new EndlessWikipedia.PrebuiltFrontPage();
         this._front_page.connect('category-chosen',
             Lang.bind(this, this._onCategoryClicked));
     },
@@ -113,15 +111,9 @@ const DomainWikiView = new Lang.Class({
         this._presenter = presenter;
     },
 
-    set_front_page_info: function(image_uri) {
-        /*
-        *  TODO: This is a stub function that sets the front page
-        *  info. The front page needs its domain-specific image set.
-        *  Currently, the domain-specific image for the Brazil App is
-        *  the same image used in the food category.
-        */
-
-        return;
+    set_front_page_info: function(title, image_uri) {
+        this._front_page.title = title;
+        this._front_page.image_uri = image_uri;
     },
 
     set_category_info: function(category, articles) {
diff --git a/wikipedia/src/views/title_label_view.js b/wikipedia/src/views/title_label_view.js
new file mode 100644
index 0000000..336492c
--- /dev/null
+++ b/wikipedia/src/views/title_label_view.js
@@ -0,0 +1,102 @@
+const GdkPixbuf = imports.gi.GdkPixbuf;
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const Utils = imports.utils;
+
+const TITLE_LABEL_SCREEN_WIDTH_PERCENTAGE = 0.37;
+const TITLE_LABEL_LEFT_MARGIN = 20;  // pixels
+const TITLE_LABEL_BOTTOM_MARGIN = 20;  // pixels
+
+const TitleLabelView = new Lang.Class({
+    Name: 'TitleLabelView',
+    Extends: Gtk.Overlay,
+    Properties: {
+        'title': GObject.ParamSpec.string('title',
+            'Front page title',
+            'Name of the Wikipedia-based application',
+            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+            ''),
+        'image-uri': GObject.ParamSpec.string('image-uri',
+            'Image URI',
+            'Image URI for title image',
+            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+            '')
+    },
+
+    _init: function(props) {
+        this._title = null;
+        this._image_uri = null;
+        this._label = new Gtk.Label({
+            halign: Gtk.Align.START,
+            valign: Gtk.Align.END,
+            margin_left: TITLE_LABEL_LEFT_MARGIN,
+            margin_bottom: TITLE_LABEL_BOTTOM_MARGIN
+        });
+        this._image = new Gtk.Image();
+
+        this.parent(props);
+
+        this.add(this._image);
+        this.add_overlay(this._label);
+    },
+
+    // OVERRIDES
+
+    // Ensure that this widget is 37% of the window's width
+    vfunc_get_preferred_width: function() {
+        let toplevel = this.get_toplevel();
+        if(toplevel == null)
+            return this.parent();
+        let width = toplevel.get_allocated_width() * TITLE_LABEL_SCREEN_WIDTH_PERCENTAGE;
+        return [width, width];
+    },
+
+    vfunc_size_allocate: function(allocation) {
+        this.parent(allocation);
+        this._updateImage(Utils.resourceUriToPath(this._image_uri),
+            allocation.width, allocation.height);
+    },
+
+    // PROPERTIES
+
+    get title() {
+        return this._title;
+    },
+
+    set title(value) {
+        this._title = value;
+        if(this._label)
+            this._label.label = value.toUpperCase();
+    },
+
+    get image_uri() {
+        return this._image_uri;
+    },
+
+    set image_uri(value) {
+        this._image_uri = value;
+        if(this._image) {
+            let res_path = Utils.resourceUriToPath(value);
+            let allocation = this.get_allocation();
+            this._updateImage(res_path, allocation.width, allocation.height);
+        }
+    },
+
+    // PRIVATE
+
+    _updateImage: function(res_path, width, height) {
+        let [source_width, source_height] = [width, height];
+        if(width > height)
+            source_height = -1;
+        else
+            source_width = -1;
+        let source_pixbuf = GdkPixbuf.Pixbuf.new_from_resource_at_scale(res_path,
+            source_width, source_height, true);
+        let cropped_pixbuf = source_pixbuf;
+        if(width < source_pixbuf.width || height < source_pixbuf.height)
+            cropped_pixbuf = source_pixbuf.new_subpixbuf(0, 0, width, height);
+        this._image.set_from_pixbuf(cropped_pixbuf);
+    }
+});