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

[Florian Müllner <fmuellner src gnome org>]

commit 9708b68540ff71092c62a5e85a66c0981ed8aeee
Author: Florian Müllner <fmuellner gnome org>
Date:   Mon Aug 30 14:59:36 2010 +0200

    [baseIcon] Tie the icon's width to its height
    
    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

 js/ui/iconGrid.js |   69 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 60 insertions(+), 9 deletions(-)
---
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index b2b0193..05abe1b 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -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);
     }
 };