[gnome-shell/wip/paging] Added testing of pagination indicator
- From: Carlos Soriano <csoriano src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/paging] Added testing of pagination indicator
- Date: Tue, 25 Jun 2013 12:22:19 +0000 (UTC)
commit 09baa02ea434c28f1c1b806630c08e21201fb7d1
Author: Carlos Soriano <carlos soriano89 gmail com>
Date: Sat Jun 22 18:49:01 2013 +0200
Added testing of pagination indicator
data/theme/gnome-shell.css | 7 ++-
js/ui/appDisplay.js | 112 ++++++++++++++++++++++++++++---------------
js/ui/iconGrid.js | 67 +++++++++++++++++---------
3 files changed, 123 insertions(+), 63 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index bcf4bfb..e986e81 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -891,7 +891,7 @@ StScrollBar StButton#vhandle:active {
}
.app-view-controls {
- padding-bottom: 32px;
+ padding-bottom: 100px;
}
.app-view-control {
@@ -905,6 +905,11 @@ StScrollBar StButton#vhandle:active {
padding: 0px 88px;
}
+.pages-indicator {
+ padding-right: 20px;
+ spacing: 20px;
+}
+
.app-folder-icon {
padding: 5px;
}
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 7c4de5c..0ea7305 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -13,6 +13,7 @@ const Meta = imports.gi.Meta;
const St = imports.gi.St;
const Mainloop = imports.mainloop;
const Atk = imports.gi.Atk;
+const Gdk = imports.gi.Gdk;
const AppFavorites = imports.ui.appFavorites;
const BoxPointer = imports.ui.boxpointer;
@@ -235,20 +236,8 @@ const AppPages = new Lang.Class({
return this._grid.nPages();
},
- goToPreviousPage: function() {
- this._grid.goToPreviousPage();
- },
-
- goToNextPage: function() {
- this._grid.goToNextPage();
- },
-
- goToFirstPage: function() {
- this._grid.goToFirstPage();
- },
-
- currentPagePosition: function() {
- return this._grid.currentPagePosition();
+ getPagePosition: function(pageNumber) {
+ return this._grid.getPagePosition(pageNumber);
},
setGridParentSize: function(size) {
@@ -276,6 +265,8 @@ const PaginationScrollView = new Lang.Class({
this._box.add_actor(this._stack);
this.add_actor(this._box);
+
+ this._currentPage = 0;
this.connect('scroll-event', Lang.bind(this, this._onScroll));
},
@@ -309,18 +300,24 @@ const PaginationScrollView = new Lang.Class({
child.allocate(childBox, flags);
if(this._pages.nPages > 0) {
- this._pages.goToFirstPage();
- this.vscroll.adjustment.set_value(this._pages.currentPagePosition()[1]);
+ this.vscroll.adjustment.set_value(this._pages.getPagePosition(0)[1]);
}
},
goToNextPage: function() {
- this._pages.goToNextPage();
- this.vscroll.adjustment.set_value(this._pages.currentPagePosition()[1]);
+ if(this._currentPage < this._pages.nPages())
+ {
+ this._currentPage+=1;
+ this.vscroll.adjustment.set_value(this._pages.getPagePosition(this._currentPage)[1]);
+ }
},
+
goToPreviousPage: function() {
- this._pages.goToPreviousPage();
- this.vscroll.adjustment.set_value(this._pages.currentPagePosition()[1]);
+ if(this._currentPage > 0)
+ {
+ this._currentPage-=1;
+ this.vscroll.adjustment.set_value(this._pages.getPagePosition(this._currentPage)[1]);
+ }
},
_onScroll: function(actor, event) {
@@ -359,26 +356,63 @@ const PaginationScrollView = new Lang.Class({
const AllView = new Lang.Class({
Name: 'AllView',
- _init: function() {
- this.actor = new PaginationScrollView();
- /*
- let box = new St.BoxLayout({ vertical: true });
- this._stack = new St.Widget({ layout_manager: new AllViewLayout() });
- this._stack.add_actor(this._grid.actor);
- this._eventBlocker = new St.Widget({ x_expand: true, y_expand: true });
- this._stack.add_actor(this._eventBlocker);
- box.add(this._stack, { y_align: St.Align.START, expand: true });
- */
- this._pageControl = new St.Widget();
+ _init: function() {
+ this._paginationView = new PaginationScrollView();
+ let layout = new Clutter.BinLayout();
+ this.actor = new St.Widget({layout_manager: layout, x_expand:true, y_expand:true});
+
+ let color = new Clutter.Color({blue:200, red:100, green:100, alpha: 200});
+ let ac= new Clutter.Actor({background_color: color, x_align:2, y_align: 2, x_expand: true, y_expand:
true});
+ ac.set_size(100, 100);
+
+ let color2 = new Clutter.Color({blue:100, red:200, green:100, alpha: 200});
+ let paginationIndicatorLayout = new Clutter.BoxLayout({orientation: Clutter.Orientation.VERTICAL});
+ //let ac2= new Clutter.Actor({layout_manager: paginationIndicatorLayout, x_align:3, y_align: 2,
x_expand:true, y_expand:true});
+
+ let ac2= new St.Widget({layout_manager: paginationIndicatorLayout, x_align:3, y_align: 2,
x_expand:true, y_expand:true, style_class: 'pages-indicator'});
+ paginationIndicatorLayout.spacing = 40;
+
+ let wraper = new St.Bin({x_expand: true, y_expand:true});
+ let wraper2 = new St.Bin({x_expand: true, y_expand:true});
+ let wraper3 = new St.Bin({x_expand: true, y_expand:true});
+ let wraper4 = new St.Bin({x_expand: true, y_expand:true});
+ //let ac2 = new St.BoxLayout({vertical:true, x_align:St.Align.END, y_align:St.Align.MIDDLE});
+ //wraper.child = ac2;
+
+ let image = new Clutter.Texture();
+ image.set_from_file("testselected.svg");
+ //wraper.child = image;
+ //wraper.set_size(48,48);
+ let image2 = new Clutter.Texture();
+ //image2.set_size(48,48);
+ image2.set_from_file("testnormal.svg");
+ //wraper2.child = image2;
+ let image3 = new Clutter.Texture();
+ image3.set_from_file("testnormal.svg");
+ // wraper3.child = image3;
+ //image3.set_size(48,48);
+ let image4 = new Clutter.Texture();
+ //image4.set_size(48,48);
+ image4.set_from_file("testnormal.svg");
+ // wraper4.child = image4;
+
+ ac2.add_actor(image);
+ ac2.add_actor(image2);
+ ac2.add_actor(image3);
+ ac2.add_actor(image4);
+ //ac2.add_actor(ac);
+
+ layout.add(this._paginationView, 2,2);
+ layout.add(ac2, 2,3);
},
_onKeyRelease: function(actor, event) {
if (event.get_key_symbol() == Clutter.KEY_Up) {
- this.actor.goToNextPage();
+ this._paginationView.goToNextPage();
return true;
} else if(event.get_key_symbol() == Clutter.KEY_Down) {
- this.actor.goToPreviousPage();
- return true
+ this._paginationView.goToPreviousPage();
+ return true;
}
return false;
@@ -395,29 +429,29 @@ const AllView = new Lang.Class({
},
addApp: function(app) {
- let appIcon = this.actor._pages.addItem(app);
+ let appIcon = this._paginationView._pages.addItem(app);
/*if (appIcon)
appIcon.actor.connect('key-focus-in',
Lang.bind(this, this._ensureIconVisible));*/
},
addFolder: function(dir) {
- let folderIcon = this.actor._pages.addItem(dir);
+ let folderIcon = this._paginationView._pages.addItem(dir);
/*if (folderIcon)
folderIcon.actor.connect('key-focus-in',
Lang.bind(this, this._ensureIconVisible));*/
},
addFolderPopup: function(popup) {
- this.actor.addFolderPopup(popup);
+ this._paginationView.addFolderPopup(popup);
},
removeAll: function() {
- this.actor._pages.removeAll();
+ this._paginationView._pages.removeAll();
},
loadGrid: function() {
- this.actor._pages.loadGrid();
+ this._paginationView._pages.loadGrid();
}
});
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index de7cc8f..7406a65 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -189,7 +189,6 @@ const IconGrid = new Lang.Class({
this._nPages = 0;
//Set this variable properly before getPreferredHeight function is called
this._parentSize = [0, 0];
- this._currentPage = 0;
this._firstPagesItems = [];
}
this.actor = new St.BoxLayout({ style_class: 'icon-grid',
@@ -262,7 +261,7 @@ const IconGrid = new Lang.Class({
if(this._usePagination) {
this._spacePerRow = this._vItemSize + spacing;
- this._rowsPerPage = Math.floor(this._parentSize[1] / this._spacePerRow);
+ 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);
@@ -286,7 +285,7 @@ const IconGrid = new Lang.Class({
let children = this._getVisibleChildren();
let availWidth = box.x2 - box.x1;
let availHeight = box.y2 - box.y1;
- let [nColumns, usedWidth, spacing] = this._computeLayout(availWidth);
+ let [nColumns, usedWidth, spacing] = this._computeLayout(availWidth, availHeight);
if(this._usePagination) {
//Recalculate the space between pages with the new spacing
this._spaceBetweenPages = this._parentSize[1] - (this._rowsPerPage * (this._vItemSize +
spacing));
@@ -381,24 +380,56 @@ const IconGrid = new Lang.Class({
return this._rowLimit;
},
- _computeLayout: function (forWidth) {
+ _computeLayout: function (forWidth, forHeight) {
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) {
+ columnsPerPage = this._colLimit;
+ } else {
+ columnsPerPage = Math.floor(forWidth / spacePerColumn);
+ }
+ let itemWidth = this._hItemSize * columnsPerPage;
+ let emptyWidthArea = forWidth - itemWidth;
+ let spacingForWidth = Math.max(this._spacing, emptyWidthArea / (2 * columnsPerPage));
+
+ spacing = Math.max(this._spacing, Math.min(spacingForHeight, spacingForWidth));
+
+ usedWidth = columnsPerPage * (this._hItemSize + spacing);
+ nColumns = columnsPerPage;
+ /*
if (this._colLimit) {
+
+
let itemWidth = this._hItemSize * this._colLimit;
let emptyArea = forWidth - itemWidth;
spacing = Math.max(this._spacing, emptyArea / (2 * this._colLimit));
- spacing = Math.round(spacing);
+ // 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);
+ global.log("Spacing adjusted " + spacing)
}
while ((this._colLimit == null || nColumns < this._colLimit) &&
(usedWidth + this._hItemSize <= forWidth)) {
usedWidth += this._hItemSize + spacing;
nColumns += 1;
- }
-
+ }*/
+
if (nColumns > 0)
usedWidth -= spacing;
@@ -441,23 +472,13 @@ const IconGrid = new Lang.Class({
return [childBox.x1, childBox.y1];
},
- goToNextPage: function() {
- if(!this._nPages)
- return;
- if(this._currentPage + 1 < this._firstPagesItems.length)
- this._currentPage++;
- },
-
- goToPreviousPage: function() {
+ getPagePosition: function(pageNumber) {
if(!this._nPages)
return;
- if(this._currentPage > 0)
- this._currentPage--;
- },
-
- goToFirstPage: function() {
- if(!this._nPages)
- return;
- this._currentPage = 0;
+ if(pageNumber < 0 || pageNumber > this._nPages) {
+ throw new Error('Invalid page number ' + pageNumber);
+ }
+ let childBox = this._firstPagesItems[pageNumber].get_allocation_box();
+ return [childBox.x1, childBox.y1];
}
});
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
