diff options
-rw-r--r-- | endless/eoswindow.c | 8 | ||||
-rw-r--r-- | wikipedia/widgets/category_button.js | 24 | ||||
-rw-r--r-- | wikipedia/widgets/category_layout_manager.js | 22 | ||||
-rw-r--r-- | wikipedia/widgets/category_selector_view.js | 1 |
4 files changed, 33 insertions, 22 deletions
diff --git a/endless/eoswindow.c b/endless/eoswindow.c index 6258d8b..d026e6b 100644 --- a/endless/eoswindow.c +++ b/endless/eoswindow.c @@ -66,6 +66,7 @@ struct _EosWindowPrivate GtkWidget *top_bar; GtkWidget *main_area; GtkWidget *overlay; + GtkSizeGroup *overlay_size_group; GtkWidget *edge_finishing; GtkWidget *current_background; GtkWidget *next_background; @@ -656,6 +657,13 @@ eos_window_init (EosWindow *self) self->priv->main_area = eos_main_area_new (); gtk_overlay_add_overlay (GTK_OVERLAY (self->priv->overlay), self->priv->main_area); + // We want the overlay to size to the main area, the widget on top. The + // overlay gets its size request from the widget on the bottom, the + // background frame with no minimum size. So we use a size group. + self->priv->overlay_size_group = gtk_size_group_new (GTK_SIZE_GROUP_BOTH); + gtk_size_group_add_widget (self->priv->overlay_size_group, self->priv->background_stack); + gtk_size_group_add_widget (self->priv->overlay_size_group, self->priv->main_area); + self->priv->edge_finishing = gtk_drawing_area_new (); gtk_widget_set_vexpand (self->priv->edge_finishing, FALSE); gtk_widget_set_valign (self->priv->edge_finishing, GTK_ALIGN_START); diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js index 1cc6572..e6cfdde 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,18 @@ const CategoryButton = new Lang.Class({ // OVERRIDES - 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(); - } + // 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 if there's + // no space. We ask for width for height management so the height will be + // allocated first. + vfunc_get_request_mode: function() { + return Gtk.SizeRequestMode.WIDTH_FOR_HEIGHT; + }, + + vfunc_get_preferred_width_for_height: function(height) { + let natural_width = this.parent(height)[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. |