[gnome-shell/wip/paging-release: 9/74] Creating new implementation of icongrid for spacing etc
- From: Carlos Soriano <csoriano src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/paging-release: 9/74] Creating new implementation of icongrid for spacing etc
- Date: Mon, 12 Aug 2013 21:10:59 +0000 (UTC)
commit 38c6b993d0bbfc2429dc694804c02595f85dd97e
Author: Carlos Soriano <carlos soriano89 gmail com>
Date: Fri Jun 28 19:39:29 2013 +0200
Creating new implementation of icongrid for spacing etc
test
iconGrid: Spacing calculated fine with queue_relayout. Parent size from
a variable. Update pages with a signal.
appDisplay: Erase some custom allocations.
appDisplay: really fix spacing
apDisplay: clean up
js/ui/appDisplay.js | 63 ++++++-------------
js/ui/iconGrid.js | 168 ++++++++++++++++++++-------------------------------
2 files changed, 86 insertions(+), 145 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index ddb796f..3ca0537 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -124,7 +124,6 @@ const FolderView = new Lang.Class({
_init: function() {
this._grid = new IconGrid.IconGrid({ xAlign: St.Align.MIDDLE,
columnLimit: MAX_COLUMNS });
-
this.actor = this._grid.actor;
// Standard hack for ClutterBinLayout
this._grid.actor.x_expand = true;
@@ -246,23 +245,26 @@ 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) {
this._parent.addFolderPopup(popup);
}
});
+
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 });
@@ -270,7 +272,7 @@ const PaginationScrollView = new Lang.Class({
this._box.add_actor(this._stack);
this.add_actor(this._box);
-
+
this._currentPage = 0;
this._parent = parent;
@@ -340,32 +342,6 @@ const PaginationScrollView = new Lang.Class({
child.allocate(childBox, flags);
},
- vfunc_get_preferred_height: function (container, forWidht) {
- return [0, 0];
- },
-
- 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];
- childBox.x1 = 0;
- childBox.y1 = 0;
- childBox.x2 = availWidth;
- childBox.y2 = availHeight;
-
- this._pages.setGridParentSize([availWidth, availHeight]);
- child.allocate(childBox, flags);
- },
-
goToPage: function(pageNumber, action) {
let velocity;
if(!action)
@@ -451,6 +427,7 @@ const PaginationScrollView = new Lang.Class({
},
addFolderPopup: function(popup) {
+ //popup.actor.set_width(1100);
this._stack.add_actor(popup.actor);
popup.connect('open-state-changed', Lang.bind(this,
function(popup, isOpen) {
@@ -533,6 +510,10 @@ const IndicatorLayout = Lang.Class({
Name:'IndicatorLayout',
Extends: Clutter.BoxLayout,
+ vfunc_get_preferred_height: function(container, forHeight) {
+ return [300, 300];
+ },
+
vfunc_get_preferred_width: function(container, forHeight) {
let [minWidth, natWidth] = container.get_children()[0].get_preferred_width(forHeight);
let totalWidth = natWidth + this.spacing * 2;
@@ -566,7 +547,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'); }));
@@ -584,8 +565,10 @@ const AllView = new Lang.Class({
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._paginationIndicatorLayout = new IndicatorLayout({ orientation: Clutter.Orientation.VERTICAL });
+ this._paginationIndicatorLayout._nPages = 0;
+
+ this._paginationIndicator = new St.Widget({ style_class: 'pages-indicator' });
this._paginationIndicator.set_layout_manager(this._paginationIndicatorLayout);
let layout = new Clutter.BinLayout();
this.actor = new Shell.GenericContainer({ layout_manager: layout,
@@ -600,14 +583,12 @@ const AllView = new Lang.Class({
this._paginationIndicator.add_child(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();
@@ -654,10 +635,6 @@ const AllView = new Lang.Class({
* Lang.bind(this, this._ensureIconVisible));
*/
},
-
- addFolderPopup: function(popup) {
- this._paginationView.addFolderPopup(popup);
- },
removeAll: function() {
this._paginationView._pages.removeAll();
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 3155cf3..3ffa93d 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',
@@ -217,12 +219,13 @@ const IconGrid = new Lang.Class({
let nColumns = this._colLimit ? Math.min(this._colLimit,
nChildren)
: nChildren;
- let totalSpacing = Math.max(0, nColumns - 1) * this._spacing;
- // 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;
+ let spacing = this._spacing;
+ let totalSpacing = Math.max(0, nColumns - 1) * spacing;
+ // 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() {
@@ -245,9 +248,14 @@ const IconGrid = new Lang.Class({
nColumns = children.length;
spacing = this._spacing;
} else {
- [nColumns, , spacing] = this._computeLayoutOld(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);
@@ -257,17 +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;
-
- 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;
@@ -281,14 +282,34 @@ 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._computeLayoutOld(availWidth);
- if(this._usePagination) {
- //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;
@@ -349,7 +370,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();
@@ -381,7 +411,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;
@@ -404,81 +434,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();
@@ -519,5 +474,14 @@ const IconGrid = new Lang.Class({
}
let childBox = this._firstPagesItems[pageNumber].get_allocation_box();
return [childBox.x1, childBox.y1];
+ },
+
+ getComputedSpacing: function() {
+ return this._computedSpacing;
+ },
+
+ getUsedWidth: function() {
+ return this._usedWidth;
}
});
+Signals.addSignalMethods(IconGrid.prototype);
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
