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

[baseIcon] Tie the icon's width to its height

Browse Source 
Both current design and new mockups use square icons. Currently this
is implemented by setting a fixed width and height in the CSS, which
does not work for the growing/shrinking items in the new sidebar.
By moving the assumption of square items into the code, the size will
adjust according to icon size, spacing, padding and font size if not
explicitly overwritten in the CSS.

https://bugzilla.gnome.org/show_bug.cgi?id=625887
This commit is contained in:
Florian Müllner 2010-08-30 14:59:36 +02:00
parent 01f4dc68b8
commit 9708b68540
1 changed files with 60 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
js/ui/iconGrid.js
View File

@ -22,17 +22,23 @@ BaseIcon.prototype = {
x_fill: true,
y_fill: true });
this.actor._delegate = this;
this.actor.connect('style-changed',
Lang.bind(this, this._onStyleChanged));
let box = new St.BoxLayout({ vertical: true });
this._spacing = 0;
let box = new Shell.GenericContainer();
box.connect('allocate', Lang.bind(this, this._allocate));
box.connect('get-preferred-width',
Lang.bind(this, this._getPreferredWidth));
box.connect('get-preferred-height',
Lang.bind(this, this._getPreferredHeight));
this.actor.set_child(box);
this.iconSize = ICON_SIZE;
this._iconBin = new St.Bin();
box.add(this._iconBin, { expand: true, x_fill: false, y_fill: false });
box.add_actor(this._iconBin);
this._name = new St.Label({ text: label });
box.add_actor(this._name);
@ -45,6 +51,44 @@ BaseIcon.prototype = {
this._iconBin.set_child(this.icon);
},
_allocate: function(actor, box, flags) {
let availWidth = box.x2 - box.x1;
let availHeight = box.y2 - box.y1;
let [labelMinHeight, labelNatHeight] = this._name.get_preferred_height(-1);
let [iconMinHeight, iconNatHeight] = this._iconBin.get_preferred_height(-1);
let preferredHeight = labelNatHeight + this._spacing + iconNatHeight;
let labelHeight = availHeight >= preferredHeight ? labelNatHeight
: labelMinHeight;
let iconSize = availHeight - this._spacing - labelHeight;
let iconPadding = (availWidth - iconSize) / 2;
let childBox = new Clutter.ActorBox();
childBox.x1 = iconPadding;
childBox.y1 = 0;
childBox.x2 = availWidth - iconPadding;
childBox.y2 = iconSize;
this._iconBin.allocate(childBox, flags);
childBox.x1 = 0;
childBox.x2 = availWidth;
childBox.y1 = iconSize + this._spacing;
childBox.y2 = childBox.y1 + labelHeight;
this._name.allocate(childBox, flags);
},
_getPreferredWidth: function(actor, forHeight, alloc) {
this._getPreferredHeight(actor, -1, alloc);
},
_getPreferredHeight: function(actor, forWidth, alloc) {
let [iconMinHeight, iconNatHeight] = this._iconBin.get_preferred_height(forWidth);
let [labelMinHeight, labelNatHeight] = this._name.get_preferred_height(forWidth);
alloc.min_size = iconMinHeight + this._spacing + labelMinHeight;
alloc.natural_size = iconNatHeight + this._spacing + labelNatHeight;
},
// This can be overridden by a subclass, or by the createIcon
// parameter to _init()
createIcon: function(size) {
@ -69,12 +113,19 @@ BaseIcon.prototype = {
},
_onStyleChanged: function() {
if (!this._setSizeManually) {
let node = this.actor.get_theme_node();
let [success, len] = node.get_length('icon-size', false);
if (success)
this._setIconSize(len);
}
let success, len;
let node = this.actor.get_theme_node();
[success, len] = node.get_length('spacing', false);
if (success)
this._spacing = spacing;
if (this._setSizeManually)
return;
[success, len] = node.get_length('icon-size', false);
if (success)
this._setIconSize(len);
}
};