From ea0ee7eae47409aab44f79f5e8e939b38398f961 Mon Sep 17 00:00:00 2001 From: Rory MacQueen Date: Tue, 17 Sep 2013 19:55:33 -0700 Subject: Reorganized widget layout for the category page We were encountering a bizarre bug where the textview would enlarge when you click the button on the category page. It seems to be due to the set_size_request call on the textview or containing widget. To correct, I took out that set_size_request call and instead subclassed the textview to override the get_preferred_width function. The button image is a placeholder till we get the right asset from design. --- data/assets/play.png | Bin 0 -> 16366 bytes data/eos-wikipedia-domain.gresource.xml | 1 + wikipedia/Makefile.am.inc | 1 + wikipedia/PrebuiltCategoryPage.js | 50 ++++++++++++++++++-------------- wikipedia/widgets/FixedSizeTextView.js | 14 +++++++++ 5 files changed, 44 insertions(+), 22 deletions(-) create mode 100644 data/assets/play.png create mode 100644 wikipedia/widgets/FixedSizeTextView.js diff --git a/data/assets/play.png b/data/assets/play.png new file mode 100644 index 0000000..d5b1279 Binary files /dev/null and b/data/assets/play.png differ diff --git a/data/eos-wikipedia-domain.gresource.xml b/data/eos-wikipedia-domain.gresource.xml index 447b7e2..b1a7d87 100644 --- a/data/eos-wikipedia-domain.gresource.xml +++ b/data/eos-wikipedia-domain.gresource.xml @@ -13,5 +13,6 @@ assets/category_splash_separator_shadow.png assets/category_hover_arrow.png assets/image_strip_back_button.png + assets/play.png diff --git a/wikipedia/Makefile.am.inc b/wikipedia/Makefile.am.inc index dd1c5bb..e8560da 100644 --- a/wikipedia/Makefile.am.inc +++ b/wikipedia/Makefile.am.inc @@ -24,6 +24,7 @@ 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 \ diff --git a/wikipedia/PrebuiltCategoryPage.js b/wikipedia/PrebuiltCategoryPage.js index 827bca9..3cb298d 100644 --- a/wikipedia/PrebuiltCategoryPage.js +++ b/wikipedia/PrebuiltCategoryPage.js @@ -5,13 +5,15 @@ const Gtk = imports.gi.Gtk; const Lang = imports.lang; const BoxWithBg = imports.wikipedia.widgets.BoxWithBg; +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; function _resourceUriToPath(uri) { @@ -43,26 +45,26 @@ const PrebuiltCategoryPage = new Lang.Class({ }, _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._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({ @@ -82,9 +84,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, @@ -97,30 +98,30 @@ 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 Gtk.Button({ + valign: Gtk.Align.CENTER, + hexpand: true, + child: new Gtk.Image({ resource: '/com/endlessm/wikipedia-domain/assets/play.png'}) }); 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 @@ -128,9 +129,14 @@ const PrebuiltCategoryPage = new Lang.Class({ this._overlay.add(this._layout_grid); this._overlay.add_overlay(this._submenu_separator); - this.add(this._overlay); - 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() { diff --git a/wikipedia/widgets/FixedSizeTextView.js b/wikipedia/widgets/FixedSizeTextView.js new file mode 100644 index 0000000..14b82dc --- /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]; + } +}); -- cgit v1.2.3