[gnome-shell/wip/paging-release: 23/74] Collectin view contained working, but with harcoded values
- From: Carlos Soriano <csoriano src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/paging-release: 23/74] Collectin view contained working, but with harcoded values
- Date: Mon, 12 Aug 2013 21:12:09 +0000 (UTC)
commit bb0d96ee46b99f6a832e2773560bd38ebfb24ea8
Author: Carlos Soriano <carlos soriano89 gmail com>
Date: Thu Jul 11 21:06:09 2013 +0200
Collectin view contained working, but with harcoded values
js/ui/appDisplay.js | 66 +++++++++++++++++++++--------------
js/ui/iconGrid.js | 94 ++++++++++++++++++++++++++++++++++++++------------
2 files changed, 110 insertions(+), 50 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 69b2317..e8bc2b4 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -30,6 +30,8 @@ const Util = imports.misc.util;
const MAX_APPLICATION_WORK_MILLIS = 75;
const MENU_POPUP_TIMEOUT = 600;
const MAX_COLUMNS = 6;
+const MIN_COLUMNS = 4;
+const MIN_ROWS = 4;
const INACTIVE_GRID_OPACITY = 77;
const INACTIVE_GRID_OPACITY_ANIMATION_TIME = 0.15;
@@ -206,7 +208,7 @@ const AppPages = new Lang.Class({
* enough space to show the folder view.
*/
makeSpaceForPopUp: function(iconActor, side, folderNVisibleRowsAtOnce) {
- global.log("#### makeSpaceForPopUp ####");
+ //global.log("#### makeSpaceForPopUp ####");
let rowsUp = [];
let rowsDown = [];
let mainIconYPosition = iconActor.actor.y;
@@ -253,7 +255,7 @@ const AppPages = new Lang.Class({
}
this._panViewForFolderView(rowsUp, rowsDown, panViewUpNRows, panViewDownNRows, iconActor);
this.updateIconOpacities(true);
- global.log("#### END makeSpaceForPopUp ####");
+ //global.log("#### END makeSpaceForPopUp ####");
},
returnSpaceToOriginalPosition: function() {
@@ -280,7 +282,6 @@ const AppPages = new Lang.Class({
for(let rowId in rowsUp) {
for(let childrenId in rowsUp[rowId]) {
rowsUp[rowId][childrenId].translate_y = 0;
- //global.log("children up y " + rowsUp[rowId][childrenId].translate_y);
let tweenerParams = { translate_y: - height,
time: POPUP_FOLDER_VIEW_ANIMATION,
onUpdate: function() {this.queue_relayout();},
@@ -289,9 +290,6 @@ const AppPages = new Lang.Class({
tweenerParams['onComplete'] = Lang.bind(iconActor,
iconActor.onCompleteMakeSpaceForPopUp);
}
Tweener.addTween(rowsUp[rowId][childrenId], tweenerParams);
- //rowsUp[rowId][childrenId].translate_y = - height;
- //rowsUp[rowId][childrenId].queue_relayout();
- //global.log("after children up y " + rowsUp[rowId][childrenId].translate_y);
}
}
}
@@ -300,7 +298,6 @@ const AppPages = new Lang.Class({
let height = rowHeight * panViewDownNRows;
for(let rowId in rowsDown) {
for(let childrenId in rowsDown[rowId]) {
- //global.log("children down y " + rowsDown[rowId][childrenId].translate_y);
rowsDown[rowId][childrenId].translate_y = 0;
let tweenerParams = { translate_y: height,
time: POPUP_FOLDER_VIEW_ANIMATION,
@@ -309,9 +306,6 @@ const AppPages = new Lang.Class({
tweenerParams['onComplete'] = Lang.bind(iconActor,
iconActor.onCompleteMakeSpaceForPopUp);
}
Tweener.addTween(rowsDown[rowId][childrenId], tweenerParams);
- //rowsDown[rowId][childrenId].translate_y = height;
- //rowsDown[rowId][childrenId].queue_relayout();
- //global.log("after children down y " + rowsDown[rowId][childrenId].translate_y);
}
}
}
@@ -329,6 +323,12 @@ const AppPages = new Lang.Class({
let spacing;
spacing = Math.max(this._grid._spacing, emptyArea / ( 2 * MAX_COLUMNS));
spacing = Math.round(spacing);
+ //FIXME
+ spacing = this._grid.maxSpacingForWidthHeight(width, 872, MIN_COLUMNS, MIN_ROWS, true);
+ this._grid.top_padding = spacing;
+ this._grid.bottom_padding = spacing;
+ this._grid.left_padding = spacing;
+ this._grid.right_padding = spacing;
this._grid.setSpacing(spacing);
// Update folder views
for(let id in this._folderIcons) {
@@ -753,6 +753,12 @@ const FrequentView = new Lang.Class({
let spacing;
spacing = Math.max(this._grid._spacing, emptyArea / ( 2 * MAX_COLUMNS));
spacing = Math.round(spacing);
+ //FIXME
+ spacing = this._grid.maxSpacingForWidthHeight(width, 872, MIN_COLUMNS, MIN_ROWS, true);
+ this._grid.top_padding = spacing;
+ this._grid.bottom_padding = spacing;
+ this._grid.left_padding = spacing;
+ this._grid.right_padding = spacing;
this._grid.setSpacing(spacing);
}
});
@@ -1119,6 +1125,14 @@ const FolderView = new Lang.Class({
let spacing;
spacing = Math.max(this._grid._spacing, emptyArea / ( 2 * MAX_COLUMNS));
spacing = Math.round(spacing);
+ let spacing = this._grid.maxSpacingForWidthHeight(width, 872, MIN_COLUMNS, MIN_ROWS, true);
+ global.log("ON UPDATE");
+ //FIXME
+ this._grid.top_padding = spacing - 27;
+ this._grid.bottom_padding = spacing - 27;
+ this._grid.left_padding = spacing - 27;
+ this._grid.right_padding = spacing - 27;
+
this._grid.setSpacing(spacing);
},
@@ -1135,14 +1149,12 @@ const FolderView = new Lang.Class({
let box = this._containerBox();
let availWidthPerPage = box.x2 - box.x1;
let maxUsedWidth = this._grid.usedWidth(availWidthPerPage);
- global.log("maxUsedWidth " + maxUsedWidth);
return maxUsedWidth;
},
usedHeight: function() {
// Then calculate the real maxUsedHeight
- global.log("this.nRowsDisplayedAtOnce() " + this.nRowsDisplayedAtOnce());
- return this._grid.usedHeightForNRows(this.nRowsDisplayedAtOnce());
+ return this._grid.usedHeightForNRows(this.nRowsDisplayedAtOnce()) + this._grid.top_padding +
this._grid.bottom_padding;
},
nRowsDisplayedAtOnce: function() {
@@ -1159,7 +1171,8 @@ const FolderView = new Lang.Class({
let box = this._containerBox();
let availHeightPerPage = box.y2 - box.y1;
let availWidthPerPage = box.x2 - box.x1;
- let maxRowsPerPage = this._grid.rowsForHeight(availHeightPerPage);
+ //FIXME
+ let maxRowsPerPage = this._grid.rowsForHeight(872);
//Then, we can only show that rows least one.
maxRowsPerPage -= 1;
return maxRowsPerPage;
@@ -1214,21 +1227,17 @@ const FolderIcon = new Lang.Class({
if(this._popup) {
// Position the popup above or below the source icon
if (this._side == St.Side.BOTTOM) {
- global.log("Bottom " + this.actor.y);
let closeButtonOffset = -this._popup.closeButton.translation_y;
let y = this.actor.y - this._popup.actor.fixed_height;
- global.log("Bottom " + this._popup.actor.fixed_height);
let yWithButton = y - closeButtonOffset;
this._popup.parentOffset = yWithButton < 0 ? -yWithButton : 0;
this._popup.actor.y = Math.max(y, closeButtonOffset);
- global.log("Bottom " + this._popup.actor.y);
//FIXME ST ALIGN NOR WORKING?
- this.view._widget.y_align = 1;
+ this.view._widget.y_align = 2;
} else {
this._popup.actor.y = this.actor.y + this.actor.height;
- global.log("No bottom " + this.actor.y);
//FIXME ST ALIGN NOR WORKING?
- this.view._widget.y_align = 3;
+ this.view._widget.y_align = 2;
}
}
},
@@ -1250,14 +1259,21 @@ const FolderIcon = new Lang.Class({
//It will be negative value, so we have to rest it, instead of plust it.
let closeButtonOverlap =
this._popup.closeButton.get_theme_node().get_length('-shell-close-overlap-y');
let closeButtonHeight = this._popup.closeButton.height;
- global.log("BUTTON OFFSET " + closeButtonOverlap);
let usedHeight = this.view.usedHeight();
// If we want it corrected aligned with the main grid the calculation will be: usedHeight -
popupPadding - arrowHeight
// but, if we do that and the popup needs all the height, the popup will remain outside the
allocation and then clipped. so:
- if(this.view.nRowsDisplayedAtOnce() == this.view.maxRowsDisplayedAtOnce())
+ /*if(this.view.nRowsDisplayedAtOnce() == this.view.maxRowsDisplayedAtOnce()) {
usedHeight = usedHeight - popupPadding * 2 - arrowHeight + closeButtonOverlap;
- else
+ global.log("top_padding " + this.view._grid.top_padding);
+ this.view._grid.top_padding -= popupPadding * 2 + arrowHeight + closeButtonOverlap;
+ this.view._grid.actor.queue_relayout();
+ global.log("top_padding " + this.view._grid.top_padding);
+ }
+ else {
usedHeight = usedHeight - popupPadding - arrowHeight;
+ this.view._grid.top_padding -= - popupPadding - arrowHeight;
+ this.view._grid.actor.queue_relayout();
+ }*/
return usedHeight;
},
@@ -1267,12 +1283,10 @@ const FolderIcon = new Lang.Class({
},
returnSpaceToOriginalPosition: function() {
- global.log("Original position");
this._parentView.returnSpaceToOriginalPosition();
},
onCompleteMakeSpaceForPopUp: function() {
- //Mainloop.timeout_add(0.1, Lang.bind(this, function() {
this._popup.popup();
},
@@ -1284,9 +1298,7 @@ const FolderIcon = new Lang.Class({
let absoluteActorYPosition = this.actor.get_transformed_position()[1];
let spaceTop = absoluteActorYPosition;
let spaceBottom = this.actor.get_stage().height - (absoluteActorYPosition + this.actor.height);
- global.log("absoluteActorYPosition " + absoluteActorYPosition);
this._side = spaceTop > spaceBottom ? St.Side.BOTTOM : St.Side.TOP;
- global.log("this._side " + this._side);
this._popup = new AppFolderPopup(this, this._side);
this._parentView.addFolderPopup(this._popup);
/**
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index ff683b1..c410b66 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -187,6 +187,11 @@ const IconGrid = new Lang.Class({
this._fillParent = params.fillParent;
this._usePagination = params.usePagination;
+ this.top_padding = 0;
+ this.bottom_padding = 0;
+ this.rigth_padding = 0;
+ this.left_padding = 0;
+
if(this._usePagination) {
this._nPages = 0;
//Set this variable properly before allocate function is called
@@ -224,8 +229,8 @@ const IconGrid = new Lang.Class({
// 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;
+ alloc.min_size = this._hItemSize + this.left_padding + this.right_padding;
+ alloc.natural_size = nColumns * this._hItemSize + totalSpacing + this.left_padding +
this.right_padding;
},
_getVisibleChildren: function() {
@@ -260,11 +265,12 @@ const IconGrid = new Lang.Class({
if (this._rowLimit)
nRows = Math.min(nRows, this._rowLimit);
let totalSpacing = Math.max(0, nRows - 1) * spacing;
- let height = nRows * this._vItemSize + totalSpacing;
+ let height = nRows * this._vItemSize + totalSpacing + this.top_padding + this.bottom_padding;
+ global.log("GRID TOP PADDING " + this.top_padding);
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;
+ alloc.min_size = this.usedHeightPerPage() * this._nPages + this._spaceBetweenPagesTotal;
+ alloc.natural_size = this.usedHeightPerPage() * this._nPages + this._spaceBetweenPagesTotal;
return;
}
alloc.min_size = height;
@@ -321,24 +327,22 @@ const IconGrid = new Lang.Class({
leftPadding = availWidth - usedWidth;
}
- let x = box.x1 + leftPadding;
- let y = box.y1;
+ let x = box.x1 + leftPadding + this.left_padding;
+ let y = box.y1 + this.top_padding;
let columnIndex = 0;
let rowIndex = 0;
-
- if(children.length > 0) {
+ if(this._usePagination && children.length > 0) {
this._firstPagesItems = [children[0]];
}
for (let i = 0; i < children.length; i++) {
let childBox = this._calculateChildrenBox(children[i], x, y);
if(children[i].translate_y) {
- //global.log("TRANSLATING");
childBox.y1 += children[i].translate_y;
childBox.y2 += children[i].translate_y;
}
if(!this._usePagination) {
if (this._rowLimit && rowIndex >= this._rowLimit ||
- this._fillParent && childBox.y2 >= availHeight) {
+ this._fillParent && childBox.y2 > availHeight - this.bottom_padding) {
this._grid.set_skip_paint(children[i], true);
} else {
children[i].allocate(childBox, flags);
@@ -359,13 +363,13 @@ const IconGrid = new Lang.Class({
y += this._vItemSize + spacing;
if(this._usePagination) {
if((i + 1) % this._childrenPerPage == 0) {
- y+= this._spaceBetweenPages;
+ y+= this._spaceBetweenPages + this.top_padding;
if(i < children.length) {
this._firstPagesItems.push(children[i+1]);
}
}
}
- x = box.x1 + leftPadding;
+ x = box.x1 + leftPadding + this.left_padding;
} else {
x += this._hItemSize + spacing;
}
@@ -374,14 +378,16 @@ const IconGrid = new Lang.Class({
},
_calculatePaginationValues: function (availHeightPerPage, nColumns, nRows) {
- let spacing = this._fixedSpacing ? this._fixedSpacing : this._spacing;
+ let spacing = this.getSpacing();
this._spacePerRow = this._vItemSize + spacing;
+ // we want to continent the grid inside the "box" wwith padding, so the availHeihgt is less than the
real one
+ availHeightPerPage -= this.top_padding + this.bottom_padding;
this._rowsPerPage = Math.floor(availHeightPerPage / this._spacePerRow);
// Check if deleting spacing from bottom there's enough space for another row
let spaceWithOneMoreRow = (this._rowsPerPage + 1) * this._spacePerRow - spacing;
this._rowsPerPage = spaceWithOneMoreRow <= availHeightPerPage? this._rowsPerPage + 1 :
this._rowsPerPage;
this._nPages = Math.ceil(nRows / this._rowsPerPage);
- this._spaceBetweenPages = availHeightPerPage - (this._rowsPerPage * (this._vItemSize + spacing));
+ this._spaceBetweenPages = availHeightPerPage - (this._rowsPerPage * (this._vItemSize + spacing) -
spacing);
this._spaceBetweenPagesTotal = this._spaceBetweenPages * (this._nPages);
this._childrenPerPage = nColumns * this._rowsPerPage;
},
@@ -398,6 +404,7 @@ const IconGrid = new Lang.Class({
let childBox = new Clutter.ActorBox();
if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL) {
+ //FIXME not defined box????????
let _x = box.x2 - (x + width);
childBox.x1 = Math.floor(_x - childXSpacing);
} else {
@@ -437,6 +444,7 @@ const IconGrid = new Lang.Class({
},
rowsForHeight: function(forHeight) {
+ forHeight -= this.top_padding + this.bottom_padding;
let spacePerRow = this._vItemSize + this.getSpacing();
let rowsPerPage = Math.floor(forHeight / spacePerRow);
// Check if deleting spacing from bottom there's enough space for another row
@@ -445,22 +453,29 @@ const IconGrid = new Lang.Class({
return rowsPerPage;
},
+ /**
+ * Don't take into account paddings
+ */
usedHeightForNRows: function(nRows) {
let spacePerRow = this.rowHeight();
- return spacePerRow * nRows;
+ return spacePerRow * nRows - this.getSpacing();
},
-
+
+ usedHeightPerPage: function() {
+ return this._rowsPerPage * this._spacePerRow - this.getSpacing() + this.top_padding +
this.bottom_padding;
+ },
+
usedWidth: function(forWidth) {
let childrenInRow = this.childrenInRow(forWidth);
let usedWidth = childrenInRow * (this._hItemSize + this.getSpacing());
usedWidth -= this.getSpacing();
- return usedWidth;
+ return usedWidth + this.left_padding + this.right_padding;
},
_computeLayout: function (forWidth) {
let nColumns = 0;
- let usedWidth = 0;
- let spacing = this._fixedSpacing ? this._fixedSpacing : this._spacing;
+ let usedWidth = this.left_padding + this.right_padding;
+ let spacing = this.getSpacing();
while ((this._colLimit == null || nColumns < this._colLimit) &&
(usedWidth + this._hItemSize <= forWidth)) {
@@ -512,7 +527,7 @@ const IconGrid = new Lang.Class({
throw new Error('Invalid page number ' + pageNumber);
}
let childBox = this._firstPagesItems[pageNumber].get_allocation_box();
- return [childBox.x1, childBox.y1];
+ return [childBox.x1 - this.top_padding, childBox.y1 - this.top_padding];
},
setSpacing: function(spacing) {
@@ -526,6 +541,41 @@ const IconGrid = new Lang.Class({
getSpacing: function() {
return this._fixedSpacing ? this._fixedSpacing : this._spacing;
},
+ /**
+ * This functions is intended to use before iconGrid allocation, to know how much spacing can we have at
the grid
+ * but also to set manually the top/bottom rigth/left padding accordnly to the spacing calculated here.
+ * TO take into account the spacing also for before the first row and for after the last row mark
usingSurroundingSpacing true
+ * This function doesn't take into account the dynamic padding rigth now, since, at the momment, we
don't use that now.
+ */
+ maxSpacingForWidthHeight: function(availWidth, availHeight, minColumns, minRows,
usingSurroundingSpacing) {
+ // MAx spacing will be the icon item size. It doesn't make any sense to have more spacing than items.
+ let maxSpacing = Math.floor(Math.min(this._vItemSize, this._hItemSize));
+ let minEmptyVerticalArea = (availHeight - minRows * this._vItemSize);
+ let minEmptyHorizontalArea = (availWidth - minColumns * this._hItemSize);
+ let spacing;
+ if(usingSurroundingSpacing) {
+ // minRows + 1 because we want to put spacing before the first row, so it is like we have one
more row
+ // to divide the empty space
+ let maxSpacingForRows = Math.floor(minEmptyVerticalArea / (minRows +1));
+ let maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / (minColumns +1));
+ let spacingToEnsureMinimums = Math.min(maxSpacingForRows, maxSpacingForColumns);
+ let spacingNotTooBig = Math.min(spacingToEnsureMinimums, maxSpacing);
+ spacing = Math.max(this._spacing, spacingNotTooBig);
+ } else {
+ //We don't want spacing if there's only one row, it would be touching the boundary.
+ if(minRows == 1) {
+ let maxSpacingForRows = 0;
+ let maxSpacingForColumns = 0;
+ } else {
+ let maxSpacingForRows = Math.floor(minEmptyVerticalArea / (minRows - 1));
+ let maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / (minColumns - 1));
+ }
+ let spacingToEnsureMinimums = Math.min(maxSpacingForRows, maxSpacingForColumns);
+ let spacingNotTooBig = Math.min(spacingToEnsureMinimums, maxSpacing);
+ spacing = Math.max(this._spacing, spacingNotTooBig);
+ }
+ return spacing;
+ },
pageRows: function(pageNumber) {
let pagePosition = this.getPagePosition(pageNumber);
@@ -537,8 +587,6 @@ const IconGrid = new Lang.Class({
// Positioning to the first element of the page
while(children[index] != this._firstPagesItems[pageNumber])
index++;
- global.log("index " + index);
- global.log("children lenght " + children.length);
for( let rowIndex = 0; rowIndex < this._rowsPerPage; rowIndex++) {
rows[rowIndex] = [];
while(index < children.length && children[index].y == currentItem.y ) {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
