From efcf8bae9d7dfaeeacbc0c6d2acbd21dd31b4e9f Mon Sep 17 00:00:00 2001 From: Marina Zhurakhinskaya Date: Mon, 27 Jul 2009 18:59:26 -0400 Subject: [PATCH] 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 file changed, 16 insertions(+), 11 deletions(-) diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index ded639bd2..25237693c 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() {