Fix wiki apps title category button sizing

Before this the size request of the title category button is set
based on the toplevels allocation. This broke when EosWindow's size
request was fixed.

Having some sort of container or bind constraint that allocated things
based on percentages is the eventual solution here. For now I used
a column homogeneous grid where each column was a percentage of the
allocation. A little gross, but works fine, and our wiki apps handle
resizing much better than they did before now
[endlessm/eos-sdk#376]

[endlessm/eos-sdk#376]

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.