diff options
-rw-r--r-- | configure.ac | 6 | ||||
-rw-r--r-- | data/css/eos-wikipedia-domain.css | 4 | ||||
-rw-r--r-- | endless/eosflexygrid.c | 17 | ||||
-rw-r--r-- | endless/eosflexygridcell.c | 17 | ||||
-rw-r--r-- | endless/eospagemanager-private.h | 3 | ||||
-rw-r--r-- | endless/eospagemanager.c | 32 | ||||
-rw-r--r-- | endless/eoswindow.c | 59 | ||||
-rw-r--r-- | test/smoke-tests/frame-rate-tests/gtk.js | 11 | ||||
-rw-r--r-- | wikipedia/EndlessWikipedia.js | 1 | ||||
-rw-r--r-- | wikipedia/widgets/category_button.js | 90 | ||||
-rw-r--r-- | wikipedia/widgets/category_layout_manager.js | 22 | ||||
-rw-r--r-- | wikipedia/widgets/category_selector_view.js | 1 |
12 files changed, 98 insertions, 165 deletions
diff --git a/configure.ac b/configure.ac index b6551aa..0458a57 100644 --- a/configure.ac +++ b/configure.ac @@ -76,14 +76,14 @@ AC_SUBST(EOS_SDK_LT_VERSION_INFO) # Required versions of libraries # Update these whenever you use a function that requires a certain API version -GLIB_REQUIREMENT="glib-2.0 >= 2.36" +GLIB_REQUIREMENT="glib-2.0 >= 2.38" GOBJECT_REQUIREMENT="gobject-2.0" GIO_REQUIREMENT="gio-2.0" -GTK_REQUIREMENT="gtk+-3.0 >= 3.4" +GTK_REQUIREMENT="gtk+-3.0 >= 3.10" # These go into the pkg-config file as Requires: and Requires.private: # (Generally, use Requires.private: instead of Requires:) EOS_REQUIRED_MODULES= -EOS_REQUIRED_MODULES_PRIVATE="$GLIB_REQUIREMENT $GOBJECT_REQUIREMENT $GIO_REQUIREMENT $GTK_REQUIREMENT pstack" +EOS_REQUIRED_MODULES_PRIVATE="$GLIB_REQUIREMENT $GOBJECT_REQUIREMENT $GIO_REQUIREMENT $GTK_REQUIREMENT" AC_SUBST(EOS_REQUIRED_MODULES) AC_SUBST(EOS_REQUIRED_MODULES_PRIVATE) diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css index 932fb8b..0ad1954 100644 --- a/data/css/eos-wikipedia-domain.css +++ b/data/css/eos-wikipedia-domain.css @@ -71,11 +71,11 @@ Gjs_ArticleList .scrollbar.slider { color: rgba(255, 255, 255, 0.9); } -Gjs_CategoryButton GtkEventBox { +Gjs_CategoryButton.clickable { transition: background-color 1000ms ease-in-out; } -Gjs_CategoryButton GtkEventBox:hover { +Gjs_CategoryButton.clickable:hover { background-color: alpha(#212121, 0.5); transition: background-color 100ms ease-in-out; } diff --git a/endless/eosflexygrid.c b/endless/eosflexygrid.c index d831163..81cf3ba 100644 --- a/endless/eosflexygrid.c +++ b/endless/eosflexygrid.c @@ -63,22 +63,11 @@ enum LAST_SIGNAL }; -#if GLIB_CHECK_VERSION (2, 37, 5) - -# define EOS_FLEXY_GRID_GET_PRIV(obj) \ +#define EOS_FLEXY_GRID_GET_PRIV(obj) \ ((EosFlexyGridPrivate *) eos_flexy_grid_get_instance_private ((EosFlexyGrid *) (obj))) G_DEFINE_TYPE_WITH_PRIVATE (EosFlexyGrid, eos_flexy_grid, GTK_TYPE_CONTAINER) -#else - -# define EOS_FLEXY_GRID_GET_PRIV(obj) \ - (G_TYPE_INSTANCE_GET_PRIVATE ((obj), EOS_TYPE_FLEXY_GRID, EosFlexyGridPrivate)) - -G_DEFINE_TYPE (EosFlexyGrid, eos_flexy_grid, GTK_TYPE_CONTAINER) - -#endif /* GLIB_CHECK_VERSION (2, 37, 5) */ - static guint grid_signals[LAST_SIGNAL] = { 0, }; static GParamSpec *grid_props[LAST_PROP] = { NULL, }; @@ -852,10 +841,6 @@ eos_flexy_grid_finalize (GObject *gobject) static void eos_flexy_grid_class_init (EosFlexyGridClass *klass) { -#if !GLIB_CHECK_VERSION (2, 37, 5) - g_type_class_add_private (klass, sizeof (EosFlexyGridPrivate)); -#endif - GObjectClass *gobject_class = G_OBJECT_CLASS (klass); gobject_class->finalize = eos_flexy_grid_finalize; gobject_class->set_property = eos_flexy_grid_set_property; diff --git a/endless/eosflexygridcell.c b/endless/eosflexygridcell.c index 4091f06..726c7f1 100644 --- a/endless/eosflexygridcell.c +++ b/endless/eosflexygridcell.c @@ -21,22 +21,11 @@ typedef struct { guint selected : 1; } EosFlexyGridCellPrivate; -#if GLIB_CHECK_VERSION (2, 37, 5) - -# define EOS_FLEXY_GRID_CELL_GET_PRIV(obj) \ +#define EOS_FLEXY_GRID_CELL_GET_PRIV(obj) \ ((EosFlexyGridCellPrivate *) eos_flexy_grid_cell_get_instance_private ((EosFlexyGridCell *) (obj))) G_DEFINE_TYPE_WITH_PRIVATE (EosFlexyGridCell, eos_flexy_grid_cell, GTK_TYPE_BIN) -#else - -# define EOS_FLEXY_GRID_CELL_GET_PRIV(obj) \ - (G_TYPE_INSTANCE_GET_PRIVATE ((obj), EOS_TYPE_FLEXY_GRID_CELL, EosFlexyGridCellPrivate)) - -G_DEFINE_TYPE (EosFlexyGridCell, eos_flexy_grid_cell, GTK_TYPE_BIN) - -#endif /* GLIB_CHECK_VERSION (2, 37, 5) */ - enum { PROP_0, @@ -90,10 +79,6 @@ eos_flexy_grid_cell_get_property (GObject *gobject, static void eos_flexy_grid_cell_class_init (EosFlexyGridCellClass *klass) { -#if !GLIB_CHECK_VERSION (2, 37, 6) - g_type_class_add_private (klass, sizeof (EosFlexyGridCellPrivate)); -#endif - GObjectClass *gobject_class = G_OBJECT_CLASS (klass); gobject_class->set_property = eos_flexy_grid_cell_set_property; gobject_class->get_property = eos_flexy_grid_cell_get_property; diff --git a/endless/eospagemanager-private.h b/endless/eospagemanager-private.h index 5a01637..c39a118 100644 --- a/endless/eospagemanager-private.h +++ b/endless/eospagemanager-private.h @@ -8,11 +8,10 @@ #include "eospagemanager.h" #include <gtk/gtk.h> -#include <pstack.h> G_BEGIN_DECLS -PStackTransitionType eos_page_manager_get_pstack_transition_type (EosPageManager *self); +GtkStackTransitionType eos_page_manager_get_gtk_stack_transition_type (EosPageManager *self); G_END_DECLS diff --git a/endless/eospagemanager.c b/endless/eospagemanager.c index 9a6d0b1..d8b7ea5 100644 --- a/endless/eospagemanager.c +++ b/endless/eospagemanager.c @@ -5,7 +5,6 @@ #include "eospagemanager-private.h" #include <gtk/gtk.h> -#include <pstack.h> #include <string.h> @@ -262,9 +261,8 @@ static void set_visible_page_from_info (EosPageManager *self, EosPageManagerPageInfo *info) { - /* FIXME when porting to GtkStack */ - PStack *stack = P_STACK (self->priv->stack); - p_stack_set_visible_child (stack, info->page); + GtkStack *stack = GTK_STACK (self->priv->stack); + gtk_stack_set_visible_child (stack, info->page); self->priv->visible_page_info = info; @@ -906,7 +904,7 @@ eos_page_manager_init (EosPageManager *self) gtk_widget_set_has_window (self_widget, FALSE); /* TODO replace with GtkStack */ - self->priv->stack = p_stack_new (); + self->priv->stack = gtk_stack_new (); gtk_widget_set_parent (self->priv->stack, self_widget); } @@ -1603,7 +1601,7 @@ eos_page_manager_get_transition_duration (EosPageManager *self) { g_return_val_if_fail (EOS_IS_PAGE_MANAGER (self), 0); - return p_stack_get_transition_duration (P_STACK (self->priv->stack)); + return gtk_stack_get_transition_duration (GTK_STACK (self->priv->stack)); } /** @@ -1620,7 +1618,7 @@ eos_page_manager_set_transition_duration (EosPageManager *self, { g_return_if_fail (EOS_IS_PAGE_MANAGER (self)); - p_stack_set_transition_duration (P_STACK (self->priv->stack), duration); + gtk_stack_set_transition_duration (GTK_STACK (self->priv->stack), duration); g_object_notify (G_OBJECT (self), "transition-duration"); } @@ -1657,7 +1655,7 @@ eos_page_manager_set_transition_type (EosPageManager *self, g_return_if_fail (EOS_IS_PAGE_MANAGER (self)); self->priv->transition_type = transition_type; - PStackTransitionType pstack_transition; + GtkStackTransitionType gtk_stack_transition; switch (transition_type) { case EOS_PAGE_MANAGER_TRANSITION_TYPE_NONE: @@ -1666,25 +1664,25 @@ eos_page_manager_set_transition_type (EosPageManager *self, case EOS_PAGE_MANAGER_TRANSITION_TYPE_SLIDE_LEFT: case EOS_PAGE_MANAGER_TRANSITION_TYPE_SLIDE_UP: case EOS_PAGE_MANAGER_TRANSITION_TYPE_SLIDE_DOWN: - pstack_transition = (PStackTransitionType)self->priv->transition_type; + gtk_stack_transition = (GtkStackTransitionType)self->priv->transition_type; break; default: - pstack_transition = P_STACK_TRANSITION_TYPE_NONE; + gtk_stack_transition = GTK_STACK_TRANSITION_TYPE_NONE; break; } - p_stack_set_transition_type (P_STACK (self->priv->stack), - pstack_transition); + gtk_stack_set_transition_type (GTK_STACK (self->priv->stack), + gtk_stack_transition); g_object_notify (G_OBJECT (self), "transition-type"); } /* - * eos_page_manager_get_pstack_transition_type: + * eos_page_manager_get_gtk_stack_transition_type: * @self: the page manager * - * Gets the internal pstack transition type used to animate the page manager. + * Gets the internal gtk_stack transition type used to animate the page manager. */ -PStackTransitionType -eos_page_manager_get_pstack_transition_type (EosPageManager *self) +GtkStackTransitionType +eos_page_manager_get_gtk_stack_transition_type (EosPageManager *self) { - return p_stack_get_transition_type (P_STACK (self->priv->stack)); + return gtk_stack_get_transition_type (GTK_STACK (self->priv->stack)); } diff --git a/endless/eoswindow.c b/endless/eoswindow.c index 35547bb..d026e6b 100644 --- a/endless/eoswindow.c +++ b/endless/eoswindow.c @@ -11,7 +11,6 @@ #include "eosmainarea-private.h" #include <gtk/gtk.h> -#include <pstack.h> /** * SECTION:window @@ -67,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; @@ -213,10 +213,10 @@ static void sync_stack_animation (EosWindow *self) { EosPageManager *pm = EOS_PAGE_MANAGER (self->priv->page_manager); - p_stack_set_transition_type (P_STACK (self->priv->background_stack), - eos_page_manager_get_pstack_transition_type (pm)); - p_stack_set_transition_duration (P_STACK (self->priv->background_stack), - eos_page_manager_get_transition_duration (pm)); + gtk_stack_set_transition_type (GTK_STACK (self->priv->background_stack), + eos_page_manager_get_gtk_stack_transition_type (pm)); + gtk_stack_set_transition_duration (GTK_STACK (self->priv->background_stack), + eos_page_manager_get_transition_duration (pm)); } // Helper to generate frame css override @@ -269,8 +269,8 @@ update_page_background (EosWindow *self) gtk_widget_get_name (self->priv->next_background), next_background_css_props); override_background_css (self, background_css); - p_stack_set_visible_child (P_STACK (self->priv->background_stack), - self->priv->next_background); + gtk_stack_set_visible_child (GTK_STACK (self->priv->background_stack), + self->priv->next_background); // Swap our background frames for next animation GtkWidget *temp = self->priv->next_background; self->priv->next_background = self->priv->current_background; @@ -334,8 +334,8 @@ update_page (EosWindow *self) update_page_left_topbar (self); update_page_center_topbar (self); update_page_background (self); - p_stack_set_transition_type (P_STACK (self->priv->background_stack), - P_STACK_TRANSITION_TYPE_NONE); + gtk_stack_set_transition_type (GTK_STACK (self->priv->background_stack), + GTK_STACK_TRANSITION_TYPE_NONE); if (self->priv->current_page) { @@ -571,36 +571,6 @@ eos_window_class_init (EosWindowClass *klass) g_object_class_install_properties (object_class, NPROPS, eos_window_props); } -#if GTK_CHECK_VERSION (3, 10, 0) -#define our_window_close(w) gtk_window_close (w) -#else -static gboolean -queue_close (gpointer user_data) -{ - GtkWidget *window = user_data; - - GdkEvent *event = gdk_event_new (GDK_DELETE); - - event->any.window = gtk_widget_get_window (window); - event->any.send_event = TRUE; - - gtk_main_do_event (event); - - gdk_event_free (event); - - return G_SOURCE_REMOVE; -} - -static void -our_window_close (GtkWindow *window) -{ - if (!gtk_widget_get_realized (GTK_WIDGET (window))) - return; - - gdk_threads_add_idle (queue_close, window); -} -#endif /* GTK_CHECK_VERSION (3, 10, 0) */ - static void on_minimize_clicked_cb (GtkWidget* top_bar) { @@ -614,7 +584,7 @@ on_close_clicked_cb (GtkWidget* top_bar) { GtkWidget *window = gtk_widget_get_toplevel (top_bar); - our_window_close (GTK_WINDOW (window)); + gtk_window_close (GTK_WINDOW (window)); } /* Make sure that the edge finishing does not catch input events */ @@ -661,7 +631,7 @@ eos_window_init (EosWindow *self) self->priv->overlay = gtk_overlay_new (); gtk_container_add (GTK_CONTAINER (self), self->priv->overlay); - self->priv->background_stack = p_stack_new (); + self->priv->background_stack = gtk_stack_new (); gtk_container_add (GTK_CONTAINER (self->priv->overlay), self->priv->background_stack); gchar *background_name1 = g_strdup_printf (BACKGROUND_FRAME_NAME_TEMPLATE, 1); @@ -687,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/test/smoke-tests/frame-rate-tests/gtk.js b/test/smoke-tests/frame-rate-tests/gtk.js index 8af1376..9ebc14c 100644 --- a/test/smoke-tests/frame-rate-tests/gtk.js +++ b/test/smoke-tests/frame-rate-tests/gtk.js @@ -2,17 +2,16 @@ const Lang = imports.lang; const Gtk = imports.gi.Gtk; -const PLib = imports.gi.PLib; const GObject = imports.gi.GObject; const Endless = imports.gi.Endless; const TEST_APPLICATION_ID = "com.frametest"; -let TRANSITION1 = PLib.StackTransitionType.SLIDE_LEFT; -let TRANSITION2 = PLib.StackTransitionType.SLIDE_RIGHT; +let TRANSITION1 = Gtk.StackTransitionType.SLIDE_LEFT; +let TRANSITION2 = Gtk.StackTransitionType.SLIDE_RIGHT; if (ARGV[0] === "crossfade") { - TRANSITION1 = PLib.StackTransitionType.CROSSFADE; - TRANSITION2 = PLib.StackTransitionType.CROSSFADE; + TRANSITION1 = Gtk.StackTransitionType.CROSSFADE; + TRANSITION2 = Gtk.StackTransitionType.CROSSFADE; } let BACKGROUND1_NAME = "page1_1080"; @@ -49,7 +48,7 @@ const TestApplication = new Lang.Class ({ this._stack.set_visible_child(this._page1); })); - this._stack = new PLib.Stack(); + this._stack = new Gtk.Stack(); this._stack.add(this._page1); this._stack.add(this._page2); diff --git a/wikipedia/EndlessWikipedia.js b/wikipedia/EndlessWikipedia.js index 2767e61..cba5c3e 100644 --- a/wikipedia/EndlessWikipedia.js +++ b/wikipedia/EndlessWikipedia.js @@ -13,6 +13,7 @@ const STYLE_CLASS_TITLE = 'title'; const STYLE_CLASS_MAIN = 'main-element'; const STYLE_CLASS_PREBUILT = 'prebuilt'; const STYLE_CLASS_CATEGORY = 'category'; +const STYLE_CLASS_CATEGORY_CLICKABLE = 'clickable'; const STYLE_CLASS_ARTICLE = 'article'; const STYLE_CLASS_FRONT_PAGE = 'front-page'; const STYLE_CLASS_CATEGORY_PAGE = 'category-page'; diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js index 667a816..e6cfdde 100644 --- a/wikipedia/widgets/category_button.js +++ b/wikipedia/widgets/category_button.js @@ -15,13 +15,13 @@ 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; const CategoryButton = new Lang.Class({ Name: 'CategoryButton', - Extends: Gtk.EventBox, + Extends: Gtk.Button, Properties: { // resource URI for the category's accompanying image 'image-uri': GObject.ParamSpec.string('image-uri', @@ -51,9 +51,6 @@ const CategoryButton = new Lang.Class({ GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY, false) }, - Signals: { - 'clicked': {} - }, _init: function(props) { // Get ready for property construction @@ -63,19 +60,14 @@ const CategoryButton = new Lang.Class({ this._is_main_category = null; this._pixbuf = null; - this._eventbox = new Gtk.EventBox({ + this._overlay = new Gtk.Overlay({ expand: true }); - this._eventbox_grid = new Gtk.Grid({ - orientation: Gtk.Orientation.HORIZONTAL, - hexpand: true, - valign: Gtk.Align.END - }); this._label = new Gtk.Label({ margin_left: CATEGORY_LABEL_LEFT_MARGIN, margin_bottom: CATEGORY_LABEL_BOTTOM_MARGIN - CATEGORY_LABEL_BASELINE_CORRECTION, - hexpand: true, halign: Gtk.Align.START, + valign: Gtk.Align.END, xalign: 0.0, // deprecated Gtk.Misc properties; necessary because wrap: true, // "wrap" doesn't respect "halign" width_chars: 18, @@ -86,8 +78,12 @@ const CategoryButton = new Lang.Class({ margin_right: CATEGORY_BUTTON_RIGHT_MARGIN, margin_bottom: CATEGORY_BUTTON_BOTTOM_MARGIN + CATEGORY_BUTTON_BASELINE_CORRECTION, halign: Gtk.Align.END, - valign: Gtk.Align.END, - opacity: 0 + valign: Gtk.Align.END + }); + // Make the arrow image transparent to mouse events + this._arrow.connect_after('realize', function (frame) { + let gdk_window = frame.get_window(); + gdk_window.set_child_input_shapes(); }); let context = this._label.get_style_context(); @@ -99,15 +95,21 @@ const CategoryButton = new Lang.Class({ this.parent(props); // Put widgets together - this._eventbox_grid.add(this._label); - this._eventbox_grid.add(this._arrow); - this._eventbox.add(this._eventbox_grid); - this.add(this._eventbox); + let alignment = new Gtk.Alignment({ expand: true }); + alignment.add(this._label); + this._overlay.add(alignment); + this._overlay.add_overlay(this._arrow); + this.add(this._overlay); this.show_all(); - - // Connect signals - this.connect('button-press-event', - Lang.bind(this, this._onButtonPress)); + this._arrow.hide(); + + this.connect("enter", Lang.bind(this, function (w) { + if(this._clickable_category) + this._arrow.show(); + })); + this.connect("leave", Lang.bind(this, function (w) { + this._arrow.hide(); + })); }, get image_uri() { @@ -135,19 +137,9 @@ const CategoryButton = new Lang.Class({ set clickable_category(value) { this._clickable_category = value; if(this._clickable_category) { - //Hover events/effects only trigger if the button is clickable. - this._eventbox.add_events(Gdk.EventMask.ENTER_NOTIFY_MASK | - Gdk.EventMask.LEAVE_NOTIFY_MASK); - this._eventbox.connect('enter-notify-event', - Lang.bind(this, function(widget, event) { - this._eventbox.set_state_flags(Gtk.StateFlags.PRELIGHT, false); - this._arrow.opacity = 1.0; - })); - this._eventbox.connect('leave-notify-event', - Lang.bind(this, function(widget, event) { - this._eventbox.unset_state_flags(Gtk.StateFlags.PRELIGHT); - this._arrow.opacity = 0.0; - })); + this.get_style_context().add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_CLICKABLE); + } else { + this.get_style_context().remove_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_CLICKABLE); } }, @@ -168,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 @@ -203,11 +197,5 @@ const CategoryButton = new Lang.Class({ // a better fix in the future, i.e. fix this through gjs. cr.$dispose(); return ret; - }, - - // HANDLERS - - _onButtonPress: function(widget, event) { - this.emit('clicked') } }); 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. |