[gnome-shell/wip/paging] iconGrid: Spacing calculated fine with queue_relayout. Parent size from a variable. Update pages wit
- From: Carlos Soriano <csoriano src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/paging] iconGrid: Spacing calculated fine with queue_relayout. Parent size from a variable. Update pages wit
- Date: Tue, 2 Jul 2013 17:10:07 +0000 (UTC)
commit 3246e90706d3499d11864a0f1d7ed3c5b03af121
Author: Carlos Soriano <carlos soriano89 gmail com>
Date: Tue Jul 2 15:30:15 2013 +0200
iconGrid: Spacing calculated fine with queue_relayout. Parent size from
a variable. Update pages with a signal.
appDisplay: Erase some custom allocations.
data/theme/gnome-shell.css | 5 ++
js/ui/appDisplay.js | 50 ++++++++------
js/ui/iconGrid.js | 158 ++++++++++++++------------------------------
3 files changed, 85 insertions(+), 128 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4576683..b4b4fd2 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -905,6 +905,11 @@ StScrollBar StButton#vhandle:active {
padding: 0px 88px;
}
+.all-apps {
+/* horizontal padding to make sure scrollbars or dash don't overlap content */
+ padding: 0px 88px;
+}
+
.pages-indicator {
spacing: 30px;
}
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index eba9a1f..711bc62 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -127,7 +127,7 @@ const FolderView = new Lang.Class({
columnLimit: MAX_COLUMNS });
this.actor = this._grid.actor;
// Standard hack for ClutterBinLayout
- //this._grid.actor.x_expand = true;
+ this._grid.actor.x_expand = true;
this._items = {};
this._allItems = [];
@@ -246,8 +246,8 @@ const AppPages = new Lang.Class({
return this._grid.getPagePosition(pageNumber);
},
- setGridParentSize: function(size) {
- this._grid._parentSize = size;
+ setViewForPageSize: function(view) {
+ this._grid._viewForPageSize= view;
},
addFolderPopup: function(popup) {
@@ -259,11 +259,13 @@ const PaginationScrollView = new Lang.Class({
Name: 'PaginationScrollView',
Extends: St.ScrollView,
- _init: function(parent) {
- this.parent();
+ _init: function(parent, params) {
+ this.parent(params);
+ this.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.NEVER);
this._stack = new St.Widget({layout_manager: new Clutter.BinLayout()});
this._box = new St.BoxLayout({vertical: true});
this._pages = new AppPages(this);
+ this._pages.setViewForPageSize(this);
this._stack.add_actor(this._pages.actor);
this._eventBlocker = new St.Widget({ x_expand: true, y_expand: true });
@@ -271,7 +273,7 @@ const PaginationScrollView = new Lang.Class({
this._box.add_actor(this._stack);
this.add_actor(this._box);
-
+
this._currentPage = 0;
this._parent = parent;
@@ -300,7 +302,7 @@ const PaginationScrollView = new Lang.Class({
}));
this._eventBlocker.add_action(this._clickAction);
},
-
+
vfunc_get_preferred_height: function (container, forWidht) {
return [0, 0];
},
@@ -308,13 +310,12 @@ const PaginationScrollView = new Lang.Class({
vfunc_get_preferred_width: function(container, forHeight) {
return [0, 0];
},
-
+ /*
vfunc_allocate: function(box, flags) {
box = this.get_parent().allocation;
this.set_allocation(box, flags);
let availWidth = box.x2 - box.x1;
let availHeight = box.y2 - box.y1;
-
let childBox = new Clutter.ActorBox();
// Get the boxLayout inside scrollView
let child = this.get_children()[2];
@@ -322,10 +323,9 @@ const PaginationScrollView = new Lang.Class({
childBox.y1 = 0;
childBox.x2 = availWidth;
childBox.y2 = availHeight;
-
- this._pages.setGridParentSize([availWidth, availHeight]);
+
child.allocate(childBox, flags);
- },
+ },*/
goToPage: function(pageNumber, action) {
let velocity;
@@ -528,7 +528,7 @@ const IndicatorLayout = Lang.Class({
if(this._styleChangedId) {
this._container.disconnect(this._styleChangedId);
this._styleChangedId = 0;
- }
+ }
if(container != null)
this._styleChangedId = container.connect('style-changed', Lang.bind(this,
function() { this.spacing = this._container.get_theme_node().get_length('spacing'); }));
@@ -540,17 +540,20 @@ const AllView = new Lang.Class({
Name: 'AllView',
_init: function() {
- this._paginationView = new PaginationScrollView(this);
- this._paginationIndicatorLayout = new IndicatorLayout({orientation: Clutter.Orientation.VERTICAL});
+ let paginationScrollViewParams = {style_class: 'all-apps'};
+ this._paginationView = new PaginationScrollView(this, paginationScrollViewParams);
+ this._paginationIndicatorLayout = new IndicatorLayout({orientation: Clutter.Orientation.VERTICAL});
+ this._paginationIndicatorLayout._nPages = 0;
+
this._paginationIndicator = new St.Widget({ x_align:3, y_align: 2,
style_class: 'pages-indicator' });
this._paginationIndicator.set_layout_manager(this._paginationIndicatorLayout);
let layout = new Clutter.BinLayout();
- this.actor = new Shell.GenericContainer({ layout_manager: layout,
+ this.actor = new Shell.GenericContainer({ layout_manager: layout,
x_expand:true, y_expand:true });
layout.add(this._paginationView, 2,2);
- layout.add(this._paginationIndicator, 2,3);
+ layout.add(this._paginationIndicator, 3,2);
for(let i = 0; i < MAX_APPS_PAGES; i++) {
let indicatorIcon = new PaginationIconIndicator(this, i);
@@ -560,14 +563,13 @@ const AllView = new Lang.Class({
this._paginationIndicator.add_actor(indicatorIcon.actor);
}
this.actor.connect('allocate', Lang.bind(this, this._allocate));
+ this._paginationView._pages._grid.connect('n-pages-changed', Lang.bind(this, this._updatedNPages));
},
_allocate: function(widget, box, flags) {
let children = this.actor.get_children();
this._paginationView.allocate(box, flags);
-
- let nPages = this._paginationView.nPages();
- this._paginationIndicatorLayout._nPages = nPages;
+
let availWidth = box.x2 - box.x1;
let availHeight = box.y2 - box.y1;
let childBox = new Clutter.ActorBox();
@@ -578,7 +580,13 @@ const AllView = new Lang.Class({
childBox.y2 = availHeight;
this._paginationIndicator.allocate(childBox, flags);
},
-
+
+ _updatedNPages: function(iconGrid, nPages) {
+ // We don't need a relayout because we already done it at iconGrid
+ // when pages are calculated (and then the signal is emitted before that
+ this._paginationIndicatorLayout._nPages = nPages;
+ },
+
_onKeyRelease: function(actor, event) {
if (event.get_key_symbol() == Clutter.KEY_Up) {
this._paginationView.goToNextPage();
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 7c49aa8..271daea 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -3,7 +3,9 @@
const Clutter = imports.gi.Clutter;
const Shell = imports.gi.Shell;
const St = imports.gi.St;
+const Meta = imports.gi.Meta;
+const Signals = imports.signals;
const Lang = imports.lang;
const Params = imports.misc.params;
@@ -187,8 +189,8 @@ const IconGrid = new Lang.Class({
if(this._usePagination) {
this._nPages = 0;
- //Set this variable properly before getPreferredHeight function is called
- this._parentSize = [0, 0];
+ //Set this variable properly before allocate function is called
+ this._viewForPageSize = null;
this._firstPagesItems = [];
}
this.actor = new St.BoxLayout({ style_class: 'icon-grid',
@@ -219,16 +221,11 @@ const IconGrid = new Lang.Class({
: children.length;
let spacing = this._spacing;
let totalSpacing = Math.max(0, nColumns - 1) * spacing;
- if(this._parentSize && this._parentSize[0]) {
- alloc.min_size = this._hItemSize;
- alloc.natural_size = this._parentSize[0];
- } else {
// Kind of a lie, but not really an issue right now. If
// we wanted to support some sort of hidden/overflow that would
// need higher level design
alloc.min_size = this._hItemSize;
alloc.natural_size = nColumns * this._hItemSize + totalSpacing;
- }
},
_getVisibleChildren: function() {
@@ -251,9 +248,14 @@ const IconGrid = new Lang.Class({
nColumns = children.length;
spacing = this._spacing;
} else {
- [nColumns, , spacing] = this._computeLayoutOldOld(forWidth);
+ [nColumns, , spacing] = this._computeLayout(forWidth);
}
+ if(this._computedSpacing)
+ spacing = this._computedSpacing;
+ else
+ this._computedSpacing = spacing;
+
let nRows;
if (nColumns > 0)
nRows = Math.ceil(children.length / nColumns);
@@ -263,19 +265,10 @@ const IconGrid = new Lang.Class({
nRows = Math.min(nRows, this._rowLimit);
let totalSpacing = Math.max(0, nRows - 1) * spacing;
let height = nRows * this._vItemSize + totalSpacing;
-
- global.log("Old spacing " + spacing);
- global.log("Old for width " + forWidth);
- if(this._usePagination) {
-
- this._spacePerRow = this._vItemSize + spacing;
- this._rowsPerPage = Math.floor(this._parentSize[1] / this._spacePerRow);
- this._nPages = Math.ceil(nRows / this._rowsPerPage);
- this._spaceBetweenPages = this._parentSize[1] - (this._rowsPerPage * (this._vItemSize +
spacing));
- let spaceBetweenPagesTotal = this._spaceBetweenPages * (this._nPages);
- this._childrenPerPage = nColumns * this._rowsPerPage;
- alloc.min_size = this._rowsPerPage * this._spacePerRow * this._nPages + spaceBetweenPagesTotal;
- alloc.natural_size = this._rowsPerPage * this._spacePerRow * this._nPages +
spaceBetweenPagesTotal;
+
+ if(this._usePagination && this._nPages) {
+ alloc.min_size = this._rowsPerPage * this._spacePerRow * this._nPages +
this._spaceBetweenPagesTotal;
+ alloc.natural_size = this._rowsPerPage * this._spacePerRow * this._nPages +
this._spaceBetweenPagesTotal;
return;
}
alloc.min_size = height;
@@ -289,20 +282,35 @@ const IconGrid = new Lang.Class({
let gridBox = this.actor.get_theme_node().get_content_box(parentBox);
box = this._grid.get_theme_node().get_content_box(gridBox);
}
-
+
let children = this._getVisibleChildren();
let availWidth = box.x2 - box.x1;
let availHeight = box.y2 - box.y1;
- let [nColumns, usedWidth, spacing] = this._computeLayoutOldOld(availWidth);
- this._computedSpacing = spacing;
- global.log("new spacing " + spacing);
- global.log("new forwidth " + availWidth);
- if(this._usePagination) {
- let oldSpaceBetweenPages = this._spaceBetweenPages;
- let oldNPages = this._nPages;
- //Recalculate the space between pages with the new spacing
- this._spaceBetweenPages = this._parentSize[1] - (this._rowsPerPage * (this._vItemSize +
spacing));
+ let [nColumns, usedWidth, spacing] = this._computeLayout(availWidth);
+
+ if(this._usePagination && spacing != this._computedSpacing) {
+ this._computedSpacing = spacing;
+ // ScrollView height
+ let parentBox = this._viewForPageSize.allocation;
+ let gridBox = this.actor.get_theme_node().get_content_box(parentBox);
+ let customBox = this._grid.get_theme_node().get_content_box(gridBox);
+ let availWidth = customBox.x2 - customBox.x1;
+ let availHeightPerPage = customBox.y2 - customBox.y1;
+ let nRows;
+ if (nColumns > 0)
+ nRows = Math.ceil(children.length / nColumns);
+ else
+ nRows = 0;
+ if (this._rowLimit)
+ nRows = Math.min(nRows, this._rowLimit);
+
+ this._calculatePaginationValues(availHeightPerPage, nColumns, nRows);
+ this.emit('n-pages-changed', this._nPages);
+ Meta.later_add(Meta.LaterType.BEFORE_REDRAW, Lang.bind(this, function() {
+ this._grid.queue_relayout();
+ return false;
+ }));
}
let leftPadding;
@@ -363,7 +371,16 @@ const IconGrid = new Lang.Class({
}
},
-
+
+ _calculatePaginationValues: function (availHeightPerPage, nColumns, nRows) {
+ this._spacePerRow = this._vItemSize + this._computedSpacing;
+ this._rowsPerPage = Math.floor(availHeightPerPage / this._spacePerRow);
+ this._nPages = Math.ceil(nRows / this._rowsPerPage);
+ this._spaceBetweenPages = availHeightPerPage - (this._rowsPerPage * (this._vItemSize +
this._computedSpacing));
+ this._spaceBetweenPagesTotal = this._spaceBetweenPages * (this._nPages);
+ this._childrenPerPage = nColumns * this._rowsPerPage;
+ },
+
_calculateChildrenBox: function(child, x, y) {
let [childMinWidth, childMinHeight, childNaturalWidth, childNaturalHeight]
= child.get_preferred_size();
@@ -395,7 +412,7 @@ const IconGrid = new Lang.Class({
return this._rowLimit;
},
- _computeLayoutOldOld: function (forWidth) {
+ _computeLayout: function (forWidth) {
let nColumns = 0;
let usedWidth = 0;
let spacing = this._spacing;
@@ -418,80 +435,6 @@ const IconGrid = new Lang.Class({
return [nColumns, usedWidth, spacing];
},
-
- _computeLayoutOld: function (forWidth, forHeight) {
- let nColumns = 0;
- let usedWidth = 0;
- let spacing = this._spacing;
- if (this._colLimit) {
- let itemWidth = this._hItemSize * this._colLimit;
- let emptyArea = forWidth - itemWidth;
- spacing = Math.max(this._spacing, emptyArea / (2 * this._colLimit));
- // We have to care that new spacing must not change number of rows per page.
- if(this._usePagination) {
- let spaceBetweenPages = this._parentSize[1] - (this._rowsPerPage * (this._vItemSize +
spacing));
- if(spaceBetweenPages < 0) {
- spacing += spaceBetweenPages / this._rowsPerPage;
- }
- }
- spacing = Math.floor(spacing);
- }
-
- while ((this._colLimit == null || nColumns < this._colLimit) &&
- (usedWidth + this._hItemSize <= forWidth)) {
- usedWidth += this._hItemSize + spacing;
- nColumns += 1;
- }
-
- if (nColumns > 0)
- usedWidth -= spacing;
-
- return [nColumns, usedWidth, spacing];
-
- },
- _computeLayoutNew: function (forWidth, forHeight) {
- global.log("############ START COMPUTE ###############");
- global.log("forWidth , forHEfith " + [forWidth, forHeight]);
- //return [6, 800, 6];
- let nColumns = 0;
- let usedWidth = 0;
- let spacing = this._spacing;
-
- let spacePerRow = this._vItemSize + spacing;
- let rowsPerPage = Math.floor(forHeight / spacePerRow);
- let itemHeithg = this._vItemSize * rowsPerPage;
- let emptyHeigthArea = forHeight - itemHeithg;
- let spacingForHeight = Math.max(this._spacing, emptyHeigthArea / (2 * rowsPerPage));
-
- let spacePerColumn = this._hItemSize + spacing;
- let columnsPerPage;
- if(this._colLimit) {
- global.log("colLimit " + this._colLimit);
- columnsPerPage = this._colLimit;
- } else {
- columnsPerPage = Math.floor(forWidth / spacePerColumn);
- global.log("No colLimit "+ columnsPerPage);
- }
- if(columnsPerPage == 0) {
- global.log("############ END COMPUTE 0 COLUMNS ###############");
- return [0, 0, this._spacing];
- }
- let itemWidth = this._hItemSize * columnsPerPage;
- let emptyWidthArea = forWidth - itemWidth;
- let spacingForWidth = Math.max(this._spacing, emptyWidthArea / (2 * columnsPerPage));
- global.log("SpacingForWidth, spacingForHeigth " + [spacingForWidth, spacingForHeight]);
-
- spacing = Math.max(this._spacing, Math.min(spacingForHeight, spacingForWidth));
-
- usedWidth = columnsPerPage * (this._hItemSize + spacing);
- nColumns = columnsPerPage;
- global.log("nColumns, usedWidth, spacing " + [nColumns, usedWidth, spacing]);
-
- if (nColumns > 0)
- usedWidth -= spacing;
-
- return [nColumns, usedWidth, spacing];
- },
_onStyleChanged: function() {
let themeNode = this.actor.get_theme_node();
@@ -542,3 +485,4 @@ const IconGrid = new Lang.Class({
return this._usedWidth;
}
});
+Signals.addSignalMethods(IconGrid.prototype);
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
