diff options
-rw-r--r-- | wikipedia/widgets/category_button.js | 16 | ||||
-rw-r--r-- | wikipedia/widgets/category_layout_manager.js | 22 | ||||
-rw-r--r-- | wikipedia/widgets/category_selector_view.js | 1 |
3 files changed, 18 insertions, 21 deletions
diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js index 1cc6572..44a3e1b 100644 --- a/wikipedia/widgets/category_button.js +++ b/wikipedia/widgets/category_button.js @@ -15,7 +15,7 @@ const CATEGORY_BUTTON_BOTTOM_MARGIN = 20; // pixels const CATEGORY_LABEL_BASELINE_CORRECTION = 0; // pixels const CATEGORY_BUTTON_BASELINE_CORRECTION = 10; // pixels const _HOVER_ARROW_URI = '/com/endlessm/wikipedia-domain/assets/category_hover_arrow.png'; -const MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE = 0.37; +const CATEGORY_MIN_WIDTH = 120; // pixels GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE; @@ -160,16 +160,12 @@ const CategoryButton = new Lang.Class({ // OVERRIDES + // Sometimes our label content runs too long and the min window width can + // be greater than the screen width. So we provide our own min width for + // category buttons here, and allow the GtkLabels to be cut off vfunc_get_preferred_width: function() { - if(this._is_main_category) { - let toplevel = this.get_toplevel(); - if(toplevel == null) - return this.parent(); - let width = toplevel.get_allocated_width() * MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE; - return [width, width]; - } else { - return this.parent(); - } + let natural_width = this.parent()[1]; + return [CATEGORY_MIN_WIDTH, natural_width]; }, // Reloads the pixbuf from the gresource at the proper size if necessary diff --git a/wikipedia/widgets/category_layout_manager.js b/wikipedia/widgets/category_layout_manager.js index d49661c..cb2f94a 100644 --- a/wikipedia/widgets/category_layout_manager.js +++ b/wikipedia/widgets/category_layout_manager.js @@ -1,6 +1,9 @@ const Gtk = imports.gi.Gtk; const Lang = imports.lang; +const MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE = 37; +const SUB_CATEGORY_SCREEN_WIDTH_PERCENTAGE = 30; + const CategoryLayoutManager = new Lang.Class({ Name: 'CategoryLayoutManager', Extends: Gtk.Grid, @@ -8,8 +11,7 @@ const CategoryLayoutManager = new Lang.Class({ _init: function(props) { props = props || {}; props.row_homogeneous = true; - //we don't make the columns homogenous because the 0th column - //needs to be 37% of the screen, according to designs. + props.column_homogeneous = true; this.parent(props); this._childWidgets = []; @@ -17,15 +19,16 @@ const CategoryLayoutManager = new Lang.Class({ }, // Distribute children in two columns, except for the last one if an odd - // number; that should span two columns + // number; that should span two columns. The width must be divided by + // percentage according to the spec, so we consider each column in the grid + // one percent _redistributeChildren: function() { let numChildren = this._childWidgets.length; let oddNumber = numChildren % 2 == 1; let numRows = 1; - this._childWidgets.forEach(function(child, index) { - let column = (index % 2) + 1; //plus 1 because the mainWidget is the 0 column. + let column = (index % 2) * SUB_CATEGORY_SCREEN_WIDTH_PERCENTAGE + MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE; let row = Math.floor(index / 2); if(numRows < row + 1) @@ -33,20 +36,19 @@ const CategoryLayoutManager = new Lang.Class({ //need when we add the main widget. if(child.get_parent() === this) - Gtk.Container.prototype.remove.call(this, - this._childWidgets[index]); + Gtk.Container.prototype.remove.call(this, this._childWidgets[index]); if(oddNumber && index == numChildren - 1) - this.attach(child, 1, row, 2, 1); + this.attach(child, column, row, SUB_CATEGORY_SCREEN_WIDTH_PERCENTAGE * 2, 1); else - this.attach(child, column, row, 1, 1); + this.attach(child, column, row, SUB_CATEGORY_SCREEN_WIDTH_PERCENTAGE, 1); }, this); if(this._mainWidget) { if(this._mainWidget.get_parent() === this) { Gtk.Container.prototype.remove.call(this, this._mainWidget); } - this.attach(this._mainWidget, 0, 0, 1, numRows); + this.attach(this._mainWidget, 0, 0, MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE, numRows); } }, diff --git a/wikipedia/widgets/category_selector_view.js b/wikipedia/widgets/category_selector_view.js index 674e563..72eff07 100644 --- a/wikipedia/widgets/category_selector_view.js +++ b/wikipedia/widgets/category_selector_view.js @@ -39,7 +39,6 @@ const CategorySelectorView = new Lang.Class({ image_uri: category.image_thumbnail_uri, clickable_category: category.has_articles, is_main_category: category.is_main_category, - hexpand: !category.is_main_category }); button.id = category.id; // ID to return to when clicked //if the category has no articles, you shouldn't be able to click on it. |