[gnome-shell] Align category labels vertically

[Marina Zhurakhinskaya <marinaz src gnome org>]

commit efcf8bae9d7dfaeeacbc0c6d2acbd21dd31b4e9f
Author: Marina Zhurakhinskaya <marinaz redhat com>
Date:   Mon Jul 27 18:59:26 2009 -0400

    Align category labels vertically
    
    Add a box to contain the MenuItem labels and align them vertically.
    
    Clean up the style in the MenuItem code.

 js/ui/appDisplay.js |   27 ++++++++++++++++-----------
 1 files changed, 16 insertions(+), 11 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index ded639b..2523769 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -131,24 +131,29 @@ MenuItem.prototype = {
         }
         if (pixbuf != null)
             Shell.clutter_texture_set_from_pixbuf(this._icon, pixbuf);
-        this.actor.append(this._icon, 0);
+        this.actor.append(this._icon, Big.BoxPackFlags.NONE);
         this._text = new Clutter.Text({ color: GenericDisplay.ITEM_DISPLAY_NAME_COLOR,
                                         font_name: "Sans 14px",
                                         ellipsize: Pango.EllipsizeMode.END,
                                         text: name });
-        this.actor.append(this._text, Big.BoxPackFlags.EXPAND);
 
-        let box = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
-                                y_align: Big.BoxAlignment.CENTER
-                              });
+        // We use individual boxes for the label and the arrow to ensure that they
+        // are aligned vertically. Just setting y_align: Big.BoxAlignment.CENTER
+        // on this.actor does not seem to achieve that.  
+        let labelBox = new Big.Box({ y_align: Big.BoxAlignment.CENTER });
 
-        this._arrow = new Shell.Arrow({ surface_width: MENU_ICON_SIZE/2,
-                                        surface_height: MENU_ICON_SIZE/2,
+        labelBox.append(this._text, Big.BoxPackFlags.NONE);
+       
+        this.actor.append(labelBox, Big.BoxPackFlags.EXPAND);
+
+        let arrowBox = new Big.Box({ y_align: Big.BoxAlignment.CENTER });
+
+        this._arrow = new Shell.Arrow({ surface_width: MENU_ICON_SIZE / 2,
+                                        surface_height: MENU_ICON_SIZE / 2,
                                         direction: Gtk.ArrowType.RIGHT,
-                                        opacity: 0
-                                      });
-        box.append(this._arrow, 0);
-        this.actor.append(box, 0);
+                                        opacity: 0 });
+        arrowBox.append(this._arrow, Big.BoxPackFlags.NONE);
+        this.actor.append(arrowBox, Big.BoxPackFlags.NONE);
     },
 
     getState: function() {