brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use WellGrid for application results

Browse Source 
Extend WellGrid with an optional rowLimit parameter and an accessor
function for the grid's items, then use it to replace the custom
container used to display the application search results.
Also adjust the spacing of the search results slightly to make it
consistent with the app well.

https://bugzilla.gnome.org/show_bug.cgi?id=622446
This commit is contained in:
Florian Müllner 2010-06-22 18:39:14 +02:00
parent 27e71d9a6c
commit 1bd0ad11d8
2 changed files with 44 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
data/theme/gnome-shell.css
View File

@ -464,8 +464,13 @@ StTooltip {
padding: 30px 10px 10px 20px; padding: 30px 10px 10px 20px;
} }
#dashAppSearchResults {
padding: 8px 0px;
}
.dash-search-statustext,
.dash-search-section-header { .dash-search-section-header {
padding: 6px 0px; padding: 4px 0px;
spacing: 4px; spacing: 4px;
} }

121
js/ui/appDisplay.js
View File

@ -18,9 +18,11 @@ const PopupMenu = imports.ui.popupMenu;
const Search = imports.ui.search; const Search = imports.ui.search;
const Tweener = imports.ui.tweener; const Tweener = imports.ui.tweener;
const Workspace = imports.ui.workspace; const Workspace = imports.ui.workspace;
const Params = imports.misc.params;
const APPICON_SIZE = 48; const APPICON_SIZE = 48;
const WELL_MAX_COLUMNS = 8; const WELL_MAX_COLUMNS = 8;
const WELL_MAX_SEARCH_ROWS = 1;
const MENU_POPUP_TIMEOUT = 600; const MENU_POPUP_TIMEOUT = 600;
function AlphabeticalView() { function AlphabeticalView() {
@ -30,7 +32,7 @@ function AlphabeticalView() {
AlphabeticalView.prototype = { AlphabeticalView.prototype = {
_init: function() { _init: function() {
this.actor = new St.BoxLayout({ vertical: true }); this.actor = new St.BoxLayout({ vertical: true });
this._grid = new WellGrid(true); this._grid = new WellGrid();
this._appSystem = Shell.AppSystem.get_default(); this._appSystem = Shell.AppSystem.get_default();
this.actor.add(this._grid.actor, { y_align: St.Align.START, expand: true }); this.actor.add(this._grid.actor, { y_align: St.Align.START, expand: true });
}, },
@ -220,105 +222,36 @@ AppSearchResultDisplay.prototype = {
_init: function (provider) { _init: function (provider) {
Search.SearchResultDisplay.prototype._init.call(this, provider); Search.SearchResultDisplay.prototype._init.call(this, provider);
this._spacing = 0; this._grid = new WellGrid({ rowLimit: WELL_MAX_SEARCH_ROWS });
this.actor = new St.Bin({ name: 'dashAppSearchResults', this.actor = new St.Bin({ name: 'dashAppSearchResults',
x_align: St.Align.START }); x_align: St.Align.START });
this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged)); this.actor.set_child(this._grid.actor);
let container = new Shell.GenericContainer();
this._container = container;
this.actor.set_child(container);
container.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
container.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
container.connect('allocate', Lang.bind(this, this._allocate));
},
_getPreferredWidth: function (actor, forHeight, alloc) {
let children = actor.get_children();
for (let i = 0; i < children.length; i++) {
let [minSize, natSize] = children[i].get_preferred_width(forHeight);
alloc.natural_size += natSize;
}
},
_getPreferredHeight: function (actor, forWidth, alloc) {
let children = actor.get_children();
for (let i = 0; i < children.length; i++) {
let [minSize, natSize] = children[i].get_preferred_height(forWidth);
if (minSize > alloc.min_size)
alloc.min_size = minSize;
if (natSize > alloc.natural_size)
alloc.natural_size = natSize;
}
},
_allocate: function (actor, box, flags) {
let availWidth = box.x2 - box.x1;
let availHeight = box.y2 - box.y1;
let children = actor.get_children();
let x = 0;
let i;
for (i = 0; i < children.length; i++) {
let child = children[i];
let childBox = new Clutter.ActorBox();
let [minWidth, minHeight, natWidth, natHeight] = child.get_preferred_size();
if (x + natWidth > availWidth) {
actor.set_skip_paint(child, true);
continue;
}
let yPadding = Math.max(0, availHeight - natHeight);
childBox.x1 = x;
childBox.x2 = childBox.x1 + natWidth;
childBox.y1 = Math.floor(yPadding / 2);
childBox.y2 = availHeight - childBox.y1;
x = childBox.x2 + this._spacing;
child.allocate(childBox, flags);
actor.set_skip_paint(child, false);
}
},
_onStyleChanged: function () {
let themeNode = this.actor.get_theme_node();
let [success, len] = themeNode.get_length('spacing', false);
if (success)
this._spacing = len;
this._container.queue_relayout();
}, },
renderResults: function(results, terms) { renderResults: function(results, terms) {
let appSys = Shell.AppSystem.get_default(); let appSys = Shell.AppSystem.get_default();
for (let i = 0; i < results.length && i < WELL_MAX_COLUMNS; i++) { let maxItems = WELL_MAX_SEARCH_ROWS * WELL_MAX_COLUMNS;
for (let i = 0; i < results.length && i < maxItems; i++) {
let result = results[i]; let result = results[i];
let app = appSys.get_app(result); let app = appSys.get_app(result);
let display = new AppWellIcon(app); let display = new AppWellIcon(app);
this._container.add_actor(display.actor); this._grid.addItem(display.actor);
} }
}, },
clear: function () { clear: function () {
this._container.get_children().forEach(function (actor) { actor.destroy(); }); this._grid.removeAll();
this.selectionIndex = -1; this.selectionIndex = -1;
}, },
getVisibleResultCount: function() { getVisibleResultCount: function() {
let nChildren = this._container.get_children().length; return this._grid.visibleItemsCount();
return nChildren - this._container.get_n_skip_paint();
}, },
selectIndex: function (index) { selectIndex: function (index) {
let nVisible = this.getVisibleResultCount(); let nVisible = this.getVisibleResultCount();
let children = this._container.get_children();
if (this.selectionIndex >= 0) { if (this.selectionIndex >= 0) {
let prevActor = children[this.selectionIndex]; let prevActor = this._grid.getItemAtIndex(this.selectionIndex);
prevActor._delegate.setSelected(false); prevActor._delegate.setSelected(false);
} }
this.selectionIndex = -1; this.selectionIndex = -1;
@ -326,7 +259,7 @@ AppSearchResultDisplay.prototype = {
return false; return false;
else if (index < 0) else if (index < 0)
return false; return false;
let targetActor = children[index]; let targetActor = this._grid.getItemAtIndex(index);
targetActor._delegate.setSelected(true); targetActor._delegate.setSelected(true);
this.selectionIndex = index; this.selectionIndex = index;
return true; return true;
@ -335,8 +268,7 @@ AppSearchResultDisplay.prototype = {
activateSelected: function() { activateSelected: function() {
if (this.selectionIndex < 0) if (this.selectionIndex < 0)
return; return;
let children = this._container.get_children(); let targetActor = this._grid.getItemAtIndex(this.selectionIndex);
let targetActor = children[this.selectionIndex];
this.provider.activateResult(targetActor._delegate.app.get_id()); this.provider.activateResult(targetActor._delegate.app.get_id());
} }
}; };
@ -831,12 +763,15 @@ AppIconMenu.prototype = {
}; };
Signals.addSignalMethods(AppIconMenu.prototype); Signals.addSignalMethods(AppIconMenu.prototype);
function WellGrid() { function WellGrid(params) {
this._init(); this._init(params);
} }
WellGrid.prototype = { WellGrid.prototype = {
_init: function() { _init: function(params) {
params = Params.parse(params, { rowLimit: null });
this._rowLimit = params.rowLimit;
this.actor = new St.BoxLayout({ name: 'dashAppWell', vertical: true }); this.actor = new St.BoxLayout({ name: 'dashAppWell', vertical: true });
// Pulled from CSS, but hardcode some defaults here // Pulled from CSS, but hardcode some defaults here
this._spacing = 0; this._spacing = 0;
@ -869,6 +804,8 @@ WellGrid.prototype = {
nRows = Math.ceil(children.length / nColumns); nRows = Math.ceil(children.length / nColumns);
else else
nRows = 0; nRows = 0;
if (this._rowLimit)
nRows = Math.min(nRows, this._rowLimit);
let totalSpacing = Math.max(0, nRows - 1) * this._spacing; let totalSpacing = Math.max(0, nRows - 1) * this._spacing;
let height = nRows * this._item_size + totalSpacing; let height = nRows * this._item_size + totalSpacing;
alloc.min_size = height; alloc.min_size = height;
@ -887,6 +824,7 @@ WellGrid.prototype = {
let x = box.x1 + overallPaddingX; let x = box.x1 + overallPaddingX;
let y = box.y1; let y = box.y1;
let columnIndex = 0; let columnIndex = 0;
let rowIndex = 0;
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
let [childMinWidth, childMinHeight, childNaturalWidth, childNaturalHeight] let [childMinWidth, childMinHeight, childNaturalWidth, childNaturalHeight]
= children[i].get_preferred_size(); = children[i].get_preferred_size();
@ -907,11 +845,18 @@ WellGrid.prototype = {
childBox.y1 = Math.floor(y + childYSpacing); childBox.y1 = Math.floor(y + childYSpacing);
childBox.x2 = childBox.x1 + width; childBox.x2 = childBox.x1 + width;
childBox.y2 = childBox.y1 + height; childBox.y2 = childBox.y1 + height;
if (this._rowLimit && rowIndex >= this._rowLimit) {
this._grid.set_skip_paint(children[i], true);
} else {
children[i].allocate(childBox, flags); children[i].allocate(childBox, flags);
this._grid.set_skip_paint(children[i], false);
}
columnIndex++; columnIndex++;
if (columnIndex == nColumns) { if (columnIndex == nColumns) {
columnIndex = 0; columnIndex = 0;
rowIndex++;
} }
if (columnIndex == 0) { if (columnIndex == 0) {
@ -958,6 +903,14 @@ WellGrid.prototype = {
addItem: function(actor) { addItem: function(actor) {
this._grid.add_actor(actor); this._grid.add_actor(actor);
},
getItemAtIndex: function(index) {
return this._grid.get_children()[index];
},
visibleItemsCount: function() {
return this._grid.get_children().length - this._grid.get_n_skip_paint();
} }
}; };