diff options
| -rw-r--r-- | wikipedia/data/css/endless_brazil.css | 12 | ||||
| -rw-r--r-- | wikipedia/data/endless_brazil.gresource.xml | 3 | ||||
| -rw-r--r-- | wikipedia/src/endless_wikipedia/ArticleList.js | 2 | ||||
| -rw-r--r-- | wikipedia/src/endless_wikipedia/EndlessWikipedia.js | 7 | ||||
| -rw-r--r-- | wikipedia/src/endless_wikipedia/PrebuiltArticlesPage.js | 65 | ||||
| -rw-r--r-- | wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js | 5 | ||||
| -rw-r--r-- | wikipedia/src/endless_wikipedia/SideBarButton.js | 39 | ||||
| -rw-r--r-- | wikipedia/src/endless_wikipedia/TextButton.js (renamed from wikipedia/src/endless_wikipedia/textButton.js) | 5 | ||||
| -rw-r--r-- | wikipedia/src/presenters/domain_wiki_presenter.js | 1 | ||||
| -rw-r--r-- | wikipedia/src/utils.js | 5 | ||||
| -rw-r--r-- | wikipedia/src/views/domain_wiki_view.js | 55 | ||||
| -rw-r--r-- | wikipedia/src/views/wikipedia_view.js | 29 |
12 files changed, 156 insertions, 72 deletions
diff --git a/wikipedia/data/css/endless_brazil.css b/wikipedia/data/css/endless_brazil.css index 8b17f65..6c50cd5 100644 --- a/wikipedia/data/css/endless_brazil.css +++ b/wikipedia/data/css/endless_brazil.css @@ -21,8 +21,8 @@ Gjs_ArticleList{ Gjs_ArticleList .button { padding-left: 25px; padding-right: 25px; - padding-top: 10px; - padding-bottom: 10px; + padding-top: 15px; + padding-bottom: 15px; font-size: 15px; color: #464646; background-image: url('resource:///com/endlessm/brazil/assets/submenu_bg_normal.jpg'); @@ -30,12 +30,10 @@ Gjs_ArticleList .button { } 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'); } @@ -55,6 +53,8 @@ Gjs_ArticleList .button:active { } #category_title{ + /* Top padding is hack because we have bad version of BentonSans */ + padding-top: 20px; font-family: "BentonSans Light"; font-size: 52px; color: rgba(255, 255, 255, 0.9); @@ -63,3 +63,7 @@ Gjs_ArticleList .button:active { Gjs_CategoryButton GtkEventBox:hover { background-color: alpha(#212121, 0.5); } + +#side_bar_button:hover{ + background-color: rgba(0, 0, 0, 0.2); +} diff --git a/wikipedia/data/endless_brazil.gresource.xml b/wikipedia/data/endless_brazil.gresource.xml index 6040179..bbbf39c 100644 --- a/wikipedia/data/endless_brazil.gresource.xml +++ b/wikipedia/data/endless_brazil.gresource.xml @@ -1,10 +1,12 @@ <?xml version="1.0" encoding="UTF-8"?> <gresources> <gresource prefix="/com/endlessm/brazil"> + <file compressed="true">pt-br-brazil-app.json</file> <file compressed="true">brazil_categories.json</file> <file compressed="true">css/endless_brazil.css</file> <file>category_images/cuisine.jpg</file> <file>category_images/history.jpg</file> + <file>category_images/bg_brazil_sports.jpg</file> <file>assets/introduction_title_separator.png</file> <file>assets/submenu_bg_hover.png</file> <file>assets/submenu_bg_pressed.png</file> @@ -15,5 +17,6 @@ <file>assets/submenu_background.jpg</file> <file>assets/category_splash_separator_shadow.png</file> <file>assets/category_hover_arrow.png</file> + <file>assets/image_strip_back_button.png</file> </gresource> </gresources> diff --git a/wikipedia/src/endless_wikipedia/ArticleList.js b/wikipedia/src/endless_wikipedia/ArticleList.js index 59f1ef9..f1ec62c 100644 --- a/wikipedia/src/endless_wikipedia/ArticleList.js +++ b/wikipedia/src/endless_wikipedia/ArticleList.js @@ -23,7 +23,7 @@ const ArticleList = new Lang.Class({ }); //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.set_size_request(258, -1); this.add(this._grid); }, diff --git a/wikipedia/src/endless_wikipedia/EndlessWikipedia.js b/wikipedia/src/endless_wikipedia/EndlessWikipedia.js index 398ce1b..640247f 100644 --- a/wikipedia/src/endless_wikipedia/EndlessWikipedia.js +++ b/wikipedia/src/endless_wikipedia/EndlessWikipedia.js @@ -22,8 +22,11 @@ this.BackButton = _BackButton.BackButton; const _BoxWithBg = imports.endless_wikipedia.BoxWithBg; this.BoxWithBg = _BoxWithBg.BoxWithBg; -const _TextButton = imports.endless_wikipedia.textButton; -this.TextButton = _TextButton.TextButton; +const _TextButton = imports.endless_wikipedia.TextButton; +this.TextButton = _TextButton.TextButton; + +const _SideBarButton = imports.endless_wikipedia.SideBarButton; +this.SideBarButton = _SideBarButton.SideBarButton; const STYLE_CLASS_TITLE = 'title'; const STYLE_CLASS_PREBUILT = 'prebuilt'; diff --git a/wikipedia/src/endless_wikipedia/PrebuiltArticlesPage.js b/wikipedia/src/endless_wikipedia/PrebuiltArticlesPage.js index bff354b..fc38e46 100644 --- a/wikipedia/src/endless_wikipedia/PrebuiltArticlesPage.js +++ b/wikipedia/src/endless_wikipedia/PrebuiltArticlesPage.js @@ -11,78 +11,37 @@ const PrebuiltArticlesPage = new Lang.Class({ Name: 'PrebuiltArticlesPage', Extends: Gtk.Frame, Properties: { - 'title': GObject.ParamSpec.string('title', + 'article-title': GObject.ParamSpec.string('article-title', 'Article title', 'Human-readable title for the article to be displayed', GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT, - ''), - 'article-uri': GObject.ParamSpec.string('article-uri', - 'Article URI', - 'Last component of the Wikipedia URI for the article', - GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT, '') }, _init: function(props) { - this._title = null; - //We don't use article_uri now since the database only needs to readable title. - this._article_uri = null; + this._article_title = null; - // Create widgets - this._grid = new Gtk.Grid({ - orientation: Gtk.Orientation.VERTICAL, - expand: true - }); - this._title_label = new Gtk.Label({ - vexpand: false, - halign: Gtk.Align.START - }); - this._separator = new Gtk.Separator({ - orientation: Gtk.Orientation.HORIZONTAL, - vexpand: false + this._wiki_view = new WikipediaView.WikipediaView({ + expand:true, }); - this._wiki_view = new WikipediaView.WikipediaView(); - // Put the webview in a scrolledWindow to handle large page sizes - let scrolledWindow = new Gtk.ScrolledWindow ({ - hscrollbar_policy: Gtk.PolicyType.AUTOMATIC, - vscrollbar_policy: Gtk.PolicyType.AUTOMATIC, - expand: true}); - scrolledWindow.add(this._wiki_view); this.parent(props); - this._grid.add(this._title_label); - this._grid.add(this._separator); - this._grid.add(scrolledWindow); - this.add(this._grid); + this.add(this._wiki_view); // Add style contexts for CSS - let context = this._title_label.get_style_context(); - context.add_class(EndlessWikipedia.STYLE_CLASS_TITLE); - context.add_class(EndlessWikipedia.STYLE_CLASS_ARTICLE); - context.add_class(EndlessWikipedia.STYLE_CLASS_ARTICLES_PAGE); - context.add_class(EndlessWikipedia.STYLE_CLASS_PREBUILT); - let context = this._separator.get_style_context(); - context.add_class(EndlessWikipedia.STYLE_CLASS_ARTICLES_PAGE); let context = this.get_style_context(); context.add_class(EndlessWikipedia.STYLE_CLASS_ARTICLES_PAGE); }, - get title() { - return this._title; - }, - - set title(value) { - this._title = value; - if(this._title_label) - this._title_label.label = value.toUpperCase(); - }, - - get article_uri() { - return this._article_uri; + get article_title() { + return this._article_title; }, - set article_uri(value) { - this._article_uri = value; + set article_title(value) { + this._article_title = value; + if(value !== null && value !== "") { + this._wiki_view.loadArticleByTitle(this._article_title); + } } });
\ No newline at end of file diff --git a/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js b/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js index 4c4ac77..5d51ab4 100644 --- a/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js +++ b/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js @@ -39,7 +39,8 @@ const PrebuiltCategoryPage = new Lang.Class({ _init: function(props) { this._vbox = new EndlessWikipedia.BoxWithBg({ name: "category_info", - orientation: Gtk.Orientation.VERTICAL + orientation: Gtk.Orientation.VERTICAL, + expand:true }); this._title = null; @@ -63,6 +64,8 @@ const PrebuiltCategoryPage = new Lang.Class({ margin_left:45, margin_right:45 }); + this._title_label.set_size_request(460, -1); + this._separator = new Gtk.Separator({ orientation: Gtk.Orientation.HORIZONTAL, vexpand: false diff --git a/wikipedia/src/endless_wikipedia/SideBarButton.js b/wikipedia/src/endless_wikipedia/SideBarButton.js new file mode 100644 index 0000000..b602d6c --- /dev/null +++ b/wikipedia/src/endless_wikipedia/SideBarButton.js @@ -0,0 +1,39 @@ +const Lang = imports.lang; +const Gdk = imports.gi.Gdk; +const GdkPixbuf = imports.gi.GdkPixbuf; +const Gtk = imports.gi.Gtk; + +const SideBarButton = new Lang.Class({ + Name: 'EndlessSideBarButton', + 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, params) { + this.parent(params); + + this.set_size_request(40, -1); + + this._image = new Gtk.Image({ + resource: hover_icon_path, + no_show_all: true + }); + + this.add(this._image); + + this.connect('state-changed', Lang.bind(this, this._update_appearance)); + }, + + _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; // don't block event + } + // If no hover or press, then hide the arrow icon + this._image.hide(); + return false; // don't block event + } +}); + diff --git a/wikipedia/src/endless_wikipedia/textButton.js b/wikipedia/src/endless_wikipedia/TextButton.js index f8cf373..13a47ac 100644 --- a/wikipedia/src/endless_wikipedia/textButton.js +++ b/wikipedia/src/endless_wikipedia/TextButton.js @@ -15,7 +15,9 @@ const TextButton = new Lang.Class({ this._hover_icon_pixbuf = GdkPixbuf.Pixbuf.new_from_resource(hover_icon_path); - this._image = new Gtk.Image(); + this._image = new Gtk.Image({ + no_show_all: true + }); this._image.set_from_pixbuf(this._hover_icon_pixbuf); this._box = new Gtk.Box({ @@ -32,7 +34,6 @@ const TextButton = new Lang.Class({ 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) { diff --git a/wikipedia/src/presenters/domain_wiki_presenter.js b/wikipedia/src/presenters/domain_wiki_presenter.js index 151bae6..25c7e55 100644 --- a/wikipedia/src/presenters/domain_wiki_presenter.js +++ b/wikipedia/src/presenters/domain_wiki_presenter.js @@ -45,7 +45,6 @@ const DomainWikiPresenter = new Lang.Class({ }, initFromJsonFile: function(filename) { - //filename = "../data/brazil_categories.json"; let app_content = JSON.parse(Utils.load_file_from_resource(filename)); this._application_name = app_content['app_name']; this._image_uri = app_content['image_uri']; diff --git a/wikipedia/src/utils.js b/wikipedia/src/utils.js index d2cb544..bdc2b3c 100644 --- a/wikipedia/src/utils.js +++ b/wikipedia/src/utils.js @@ -49,6 +49,11 @@ function load_file_from_resource(filename) { return data[0]; } +function write_contents_to_file(filename, content){ + let file = Gio.file_new_for_path(filename); + file.replace_contents(content, null, false, 0, null); +} + /* * ...Taken from utils.js from the eos-weather branch... */ diff --git a/wikipedia/src/views/domain_wiki_view.js b/wikipedia/src/views/domain_wiki_view.js index 36062b2..ddf1f24 100644 --- a/wikipedia/src/views/domain_wiki_view.js +++ b/wikipedia/src/views/domain_wiki_view.js @@ -4,6 +4,8 @@ const GObject = imports.gi.GObject; const Gtk = imports.gi.Gtk; const Endless = imports.gi.Endless; +const SIDEBAR_BACK_BUTTON_URI = "/com/endlessm/brazil/assets/image_strip_back_button.png"; + const _ = Gettext.gettext; const DomainWikiView = new Lang.Class({ @@ -61,13 +63,46 @@ const DomainWikiView = new Lang.Class({ this._article_page = new Gtk.Grid({ orientation: Gtk.Orientation.HORIZONTAL }); + + this._sidebar_frame = new Gtk.Frame({ + name: "sidebar_frame" + }); + this._sidebar_frame.set_size_request(40, -1); + + this._article_sidebar_back_button = new EndlessWikipedia.SideBarButton(SIDEBAR_BACK_BUTTON_URI,{ + name: "side_bar_button", + vexpand: true + }); this._article_view = new EndlessWikipedia.PrebuiltArticlesPage(); this._article_list = new EndlessWikipedia.ArticleList({ halign: Gtk.Align.START, hexpand: false }); + + this._submenu_separator_a = new Gtk.Image({ + halign: Gtk.Align.END, + resource: "/com/endlessm/brazil/assets/submenu_separator_shadow_a.png" + }); + + this._submenu_separator_b = new Gtk.Image({ + halign: Gtk.Align.START, + resource: "/com/endlessm/brazil/assets/submenu_separator_shadow_b.png" + }); + + this._overlay_left = new Gtk.Overlay(); + this._overlay_left.add(this._sidebar_frame); + this._overlay_left.add_overlay(this._submenu_separator_a); + this._overlay_left.add_overlay(this._article_sidebar_back_button); + + this._overlay_right = new Gtk.Overlay(); + this._overlay_right.add(this._article_view); + this._overlay_right.add_overlay(this._submenu_separator_b); + + this._article_page.add(this._overlay_left); + this._article_page.add(this._article_list); - this._article_page.add(this._article_view); + + this._article_page.add(this._overlay_right); this._article_back_button = new EndlessWikipedia.BackButton(); this._article_back_button.show(); @@ -76,6 +111,9 @@ const DomainWikiView = new Lang.Class({ Lang.bind(this, this._onArticleClicked)); this._article_back_button.connect('clicked', Lang.bind(this, this._onArticleBackClicked)); + this._article_sidebar_back_button.connect('clicked', Lang.bind(this, function() { + this._onArticleBackClicked(); + })); }, create_category_page: function(){ @@ -107,6 +145,14 @@ const DomainWikiView = new Lang.Class({ Lang.bind(this, this._onCategoryBackClicked)); }, + _set_article_sidebar_uri: function(uri){ + let frame_css = "#sidebar_frame{background-image: url('" + uri + "');background-repeat:no-repeat;background-size:cover;}"; + let provider = new Gtk.CssProvider(); + provider.load_from_data(frame_css); + let context = this._sidebar_frame.get_style_context(); + context.add_provider(provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); + }, + set_presenter: function(presenter) { this._presenter = presenter; }, @@ -120,15 +166,16 @@ const DomainWikiView = new Lang.Class({ this._category_view.title = category.title; this._category_view.description = category.description; this._category_view.image_uri = category.image_uri; + + this._set_article_sidebar_uri(category.image_uri); + this._category_article_list.setArticles(articles); this._article_list.setArticles(articles); this._article_back_button.label = category.title.toUpperCase(); }, set_article_info: function(article){ - this._article_view.title = article.title; - this._article_view.article_uri = article.uri; - this._article_view._wiki_view.loadArticleByTitle(article.title); + this._article_view.article_title = article.title; }, transition_page: function(transition_type, page_name){ diff --git a/wikipedia/src/views/wikipedia_view.js b/wikipedia/src/views/wikipedia_view.js index c04fcdd..09ef6fe 100644 --- a/wikipedia/src/views/wikipedia_view.js +++ b/wikipedia/src/views/wikipedia_view.js @@ -1,7 +1,8 @@ const Gtk = imports.gi.Gtk; const Lang = imports.lang; const Soup = imports.gi.Soup; -const WebKit = imports.gi.WebKit; +const WebKit = imports.gi.WebKit2; +const Utils = imports.utils; const getPageURL = "http://localhost:3000/getArticleByTitle?title="; @@ -12,17 +13,37 @@ const WikipediaView = new Lang.Class({ _init: function(params) { this._httpSession = new Soup.Session(); this.parent(params); + // For debugging + // let settings = this.get_settings(); + // settings.set_enable_developer_extras(true); + // this.set_settings(settings); + this._is_first_time = true; }, loadArticleByTitle: function(title) { let request = Soup.Message.new("GET", getPageURL + title); this._httpSession.queue_message(request, Lang.bind(this, function(_httpSession, message) { + if(message.status_code !== 200) { + print(message.status_code); + return; + } let articleJSON = request.response_body.data; let article = JSON.parse(articleJSON); let articleHTML = article["text"]; - this.load_string(articleHTML, "text/html", "UTF-8", ""); - //the last argument is the base-uri, we might need to change this based - //on our local image directory, I'm not sure. + let title = article['title']; + let skeletonHTML = Utils.load_file("views/index.html"); + skeletonHTML = skeletonHTML + "<div id='wiki_content' name='"+ title +"'>" + articleHTML + "</div>" + Utils.write_contents_to_file("views/temp.html", skeletonHTML); + + // TODO: Ask about how we can load directly from HTML. Right now, WebKit can't seem to open + // CSS file correctly. All characters in CSS file are in Chinese + + if(this._is_first_time) { + this.load_uri("file:///home/endless/checkout/eos-sdk/wikipedia/src/views/temp.html", null); + this._is_first_time = false; + } else { + this.reload(); + } })); } }); |