summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRory MacQueen <rory@endlessm.com>2013-09-17 19:55:33 -0700
committerRory MacQueen <rorymacqueen@gmail.com>2013-09-26 10:43:54 -0700
commitea0ee7eae47409aab44f79f5e8e939b38398f961 (patch)
tree3391fc4c9162a71e4cc1dad63592ed0119a275ba
parent7a8bc7d599fe3440b925980f7d821f7d42874d43 (diff)
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.
-rw-r--r--data/assets/play.pngbin0 -> 16366 bytes
-rw-r--r--data/eos-wikipedia-domain.gresource.xml1
-rw-r--r--wikipedia/Makefile.am.inc1
-rw-r--r--wikipedia/PrebuiltCategoryPage.js50
-rw-r--r--wikipedia/widgets/FixedSizeTextView.js14
5 files changed, 44 insertions, 22 deletions
diff --git a/data/assets/play.png b/data/assets/play.png
new file mode 100644
index 0000000..d5b1279
--- /dev/null
+++ b/data/assets/play.png
Binary files 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 @@
<file>assets/category_splash_separator_shadow.png</file>
<file>assets/category_hover_arrow.png</file>
<file>assets/image_strip_back_button.png</file>
+ <file>assets/play.png</file>
</gresource>
</gresources>
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];
+ }
+});