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

iconGrid: Split vertical/horizontal item size

Browse Source 
IconGrid items used to be square, so a single size value made
perfect sense. However, as contact search uses rectangular items,
using a single size is wrong - the allocated height ends up twice
the size of the visible height, which is particularly visible if
another provider displays results below contact results.

https://bugzilla.gnome.org/show_bug.cgi?id=670148
This commit is contained in:
Florian Müllner 2012-02-14 16:30:40 +01:00
parent e2726f3e38
commit 1c0c42e8e7
2 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -682,12 +682,14 @@ StTooltip StLabel {
.icon-grid { .icon-grid {
spacing: 36px; spacing: 36px;
-shell-grid-item-size: 118px; -shell-grid-horizontal-item-size: 118px;
-shell-grid-vertical-item-size: 118px;
} }
.contact-grid { .contact-grid {
spacing: 36px; spacing: 36px;
-shell-grid-item-size: 272px; /* 2 * -shell-grid-item-size + spacing */ -shell-grid-horizontal-item-size: 272px; /* 2 * -shell-grid-horizontal-item-size + spacing */
-shell-grid-vertical-item-size: 118px;
} }
.icon-grid .overview-icon { .icon-grid .overview-icon {

23
js/ui/iconGrid.js
View File

@ -170,7 +170,7 @@ const IconGrid = new Lang.Class({
vertical: true }); vertical: true });
// Pulled from CSS, but hardcode some defaults here // Pulled from CSS, but hardcode some defaults here
this._spacing = 0; this._spacing = 0;
this._item_size = ICON_SIZE; this._hItemSize = this._vItemSize = ICON_SIZE;
this._grid = new Shell.GenericContainer(); this._grid = new Shell.GenericContainer();
this.actor.add(this._grid, { expand: true, y_align: St.Align.START }); this.actor.add(this._grid, { expand: true, y_align: St.Align.START });
this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged)); this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged));
@ -189,8 +189,8 @@ const IconGrid = new Lang.Class({
// Kind of a lie, but not really an issue right now. If // Kind of a lie, but not really an issue right now. If
// we wanted to support some sort of hidden/overflow that would // we wanted to support some sort of hidden/overflow that would
// need higher level design // need higher level design
alloc.min_size = this._item_size; alloc.min_size = this._hItemSize;
alloc.natural_size = nColumns * this._item_size + totalSpacing; alloc.natural_size = nColumns * this._hItemSize + totalSpacing;
}, },
_getVisibleChildren: function() { _getVisibleChildren: function() {
@ -212,7 +212,7 @@ const IconGrid = new Lang.Class({
if (this._rowLimit) if (this._rowLimit)
nRows = Math.min(nRows, 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._vItemSize + totalSpacing;
alloc.min_size = height; alloc.min_size = height;
alloc.natural_size = height; alloc.natural_size = height;
}, },
@ -245,9 +245,9 @@ const IconGrid = new Lang.Class({
= children[i].get_preferred_size(); = children[i].get_preferred_size();
/* Center the item in its allocation horizontally */ /* Center the item in its allocation horizontally */
let width = Math.min(this._item_size, childNaturalWidth); let width = Math.min(this._hItemSize, childNaturalWidth);
let childXSpacing = Math.max(0, width - childNaturalWidth) / 2; let childXSpacing = Math.max(0, width - childNaturalWidth) / 2;
let height = Math.min(this._item_size, childNaturalHeight); let height = Math.min(this._vItemSize, childNaturalHeight);
let childYSpacing = Math.max(0, height - childNaturalHeight) / 2; let childYSpacing = Math.max(0, height - childNaturalHeight) / 2;
let childBox = new Clutter.ActorBox(); let childBox = new Clutter.ActorBox();
@ -275,10 +275,10 @@ const IconGrid = new Lang.Class({
} }
if (columnIndex == 0) { if (columnIndex == 0) {
y += this._item_size + this._spacing; y += this._vItemSize + this._spacing;
x = box.x1 + leftPadding; x = box.x1 + leftPadding;
} else { } else {
x += this._item_size + this._spacing; x += this._hItemSize + this._spacing;
} }
} }
}, },
@ -291,8 +291,8 @@ const IconGrid = new Lang.Class({
let nColumns = 0; let nColumns = 0;
let usedWidth = 0; let usedWidth = 0;
while ((this._colLimit == null || nColumns < this._colLimit) && while ((this._colLimit == null || nColumns < this._colLimit) &&
(usedWidth + this._item_size <= forWidth)) { (usedWidth + this._hItemSize <= forWidth)) {
usedWidth += this._item_size + this._spacing; usedWidth += this._hItemSize + this._spacing;
nColumns += 1; nColumns += 1;
} }
@ -305,7 +305,8 @@ const IconGrid = new Lang.Class({
_onStyleChanged: function() { _onStyleChanged: function() {
let themeNode = this.actor.get_theme_node(); let themeNode = this.actor.get_theme_node();
this._spacing = themeNode.get_length('spacing'); this._spacing = themeNode.get_length('spacing');
this._item_size = themeNode.get_length('-shell-grid-item-size') || ICON_SIZE; this._hItemSize = themeNode.get_length('-shell-grid-horizontal-item-size') || ICON_SIZE;
this._vItemSize = themeNode.get_length('-shell-grid-vertical-item-size') || ICON_SIZE;
this._grid.queue_relayout(); this._grid.queue_relayout();
}, },