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

popupMenu: Improve menu item layout

Browse Source 
Mixing submenu menuitems and toggle menuitems results in poor layout.
The fix is to right-align the submenu arrows. Since we already need to
right-align the battery percentages as well, add alignment support to
PopupBaseMenuItem.addActor(), and update stuff for that.

Also remove the "column" param from addActor() since it hadn't
actually been implemented correctly before.

https://bugzilla.gnome.org/show_bug.cgi?id=633476
This commit is contained in:
Dan Winship 2010-11-17 14:10:12 -05:00
parent 3262b63325
commit 7eec8a899a
2 changed files with 46 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
js/ui/popupMenu.js
View File

@ -137,24 +137,16 @@ PopupBaseMenuItem.prototype = {
return false; return false;
}, },
// adds an actor to the menu item; @column defaults to the next // adds an actor to the menu item; @params can contain %span
// open column, @span defaults to 1. If @span is -1, the actor // (column span; defaults to 1, -1 means "all the remaining width"),
// will span the width of the menu item. Children are not // %expand (defaults to #false), and %align (defaults to
// allowed to overlap each other. // #St.Align.START)
addActor: function(child, column, span) { addActor: function(child, params) {
if (column == null) { params = Params.parse(params, { span: 1,
if (this._children.length) { expand: false,
let lastChild = this._children[this._children.length - 1]; align: St.Align.START });
column = lastChild.column + lastChild.span; params.actor = child;
} else this._children.push(params);
column = 0;
span = 1;
} else if (span == null)
span = 1;
this._children.push({ actor: child,
column: column,
span: span });
this.actor.connect('destroy', Lang.bind(this, function () { this._removeChild(child); })); this.actor.connect('destroy', Lang.bind(this, function () { this._removeChild(child); }));
this.actor.add_actor(child); this.actor.add_actor(child);
}, },
@ -272,25 +264,44 @@ PopupBaseMenuItem.prototype = {
for (let i = 0, col = 0; i < this._children.length; i++) { for (let i = 0, col = 0; i < this._children.length; i++) {
let child = this._children[i]; let child = this._children[i];
let childBox = new Clutter.ActorBox(); let childBox = new Clutter.ActorBox();
childBox.x1 = x;
let [minWidth, naturalWidth] = child.actor.get_preferred_width(-1);
let availWidth, extraWidth;
if (this._columnWidths) { if (this._columnWidths) {
if (child.span == -1) if (child.span == -1)
childBox.x2 = box.x2; availWidth = box.x2 - x;
else { else {
childBox.x2 = x; availWidth = 0;
for (let j = 0; j < child.span; j++) for (let j = 0; j < child.span; j++)
childBox.x2 += this._columnWidths[col++]; availWidth += this._columnWidths[col++];
} }
extraWidth = availWidth - naturalWidth;
} else { } else {
let [min, natural] = child.actor.get_preferred_width(-1); availWidth = naturalWidth;
childBox.x2 = x + natural; extraWidth = 0;
} }
let [min, natural] = child.actor.get_preferred_height(-1);
childBox.y1 = Math.round(box.y1 + (height - natural) / 2); if (child.expand) {
childBox.y2 = childBox.y1 + natural; childBox.x1 = x;
childBox.x2 = x + availWidth;
} else if (child.align === St.Align.CENTER) {
childBox.x1 = x + Math.round(extraWidth / 2);
childBox.x2 = childBox.x1 + naturalWidth;
} else if (child.align === St.Align.END) {
childBox.x2 = x + availWidth;
childBox.x1 = childBox.x2 - naturalWidth;
} else {
childBox.x1 = x;
childBox.x2 = x + naturalWidth;
}
let [minHeight, naturalHeight] = child.actor.get_preferred_height(-1);
childBox.y1 = Math.round(box.y1 + (height - naturalHeight) / 2);
childBox.y2 = childBox.y1 + naturalHeight;
child.actor.allocate(childBox, flags); child.actor.allocate(childBox, flags);
x = childBox.x2 + this._spacing; x += availWidth + this._spacing;
} }
} }
}; };
@ -322,7 +333,7 @@ PopupSeparatorMenuItem.prototype = {
PopupBaseMenuItem.prototype._init.call(this, { reactive: false }); PopupBaseMenuItem.prototype._init.call(this, { reactive: false });
this._drawingArea = new St.DrawingArea({ style_class: 'popup-separator-menu-item' }); this._drawingArea = new St.DrawingArea({ style_class: 'popup-separator-menu-item' });
this.addActor(this._drawingArea, 0, -1); this.addActor(this._drawingArea, { span: -1, expand: true });
this._drawingArea.connect('repaint', Lang.bind(this, this._onRepaint)); this._drawingArea.connect('repaint', Lang.bind(this, this._onRepaint));
}, },
@ -367,7 +378,7 @@ PopupSliderMenuItem.prototype = {
this._value = Math.max(Math.min(value, 1), 0); this._value = Math.max(Math.min(value, 1), 0);
this._slider = new St.DrawingArea({ style_class: 'popup-slider-menu-item', reactive: true }); this._slider = new St.DrawingArea({ style_class: 'popup-slider-menu-item', reactive: true });
this.addActor(this._slider, 0, -1); this.addActor(this._slider, { span: -1, expand: true });
this._slider.connect('repaint', Lang.bind(this, this._sliderRepaint)); this._slider.connect('repaint', Lang.bind(this, this._sliderRepaint));
this._slider.connect('button-press-event', Lang.bind(this, this._startDragging)); this._slider.connect('button-press-event', Lang.bind(this, this._startDragging));
this.actor.connect('scroll-event', Lang.bind(this, this._onScrollEvent)); this.actor.connect('scroll-event', Lang.bind(this, this._onScrollEvent));
@ -534,7 +545,7 @@ PopupSwitchMenuItem.prototype = {
this._switch = new Switch(active); this._switch = new Switch(active);
this.addActor(this.label); this.addActor(this.label);
this.addActor(this._switch.actor); this.addActor(this._switch.actor, { align: St.Align.END });
this.connect('activate', Lang.bind(this,function(from) { this.connect('activate', Lang.bind(this,function(from) {
this.toggle(); this.toggle();
@ -569,7 +580,7 @@ PopupImageMenuItem.prototype = {
this.label = new St.Label({ text: text }); this.label = new St.Label({ text: text });
this.addActor(this.label); this.addActor(this.label);
this._icon = new St.Icon({ style_class: 'popup-menu-icon' }); this._icon = new St.Icon({ style_class: 'popup-menu-icon' });
this.addActor(this._icon); this.addActor(this._icon, { align: St.Align.END });
this.setIcon(iconName); this.setIcon(iconName);
}, },
@ -723,10 +734,6 @@ PopupMenu.prototype = {
} }
}, },
setArrowOrigin: function(origin) {
this._boxPointer.setArrowOrigin(origin);
},
activateFirst: function() { activateFirst: function() {
let children = this._box.get_children(); let children = this._box.get_children();
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
@ -852,7 +859,7 @@ PopupSubMenuMenuItem.prototype = {
this.label = new St.Label({ text: text }); this.label = new St.Label({ text: text });
this.addActor(this.label); this.addActor(this.label);
this.addActor(new St.Label({ text: '>' })); this.addActor(new St.Label({ text: '>' }), { align: St.Align.END });
this.menu = new PopupMenu(this.actor, St.Align.MIDDLE, St.Side.LEFT, 0, true); this.menu = new PopupMenu(this.actor, St.Align.MIDDLE, St.Side.LEFT, 0, true);
Main.chrome.addActor(this.menu.actor, { visibleInOverview: true, Main.chrome.addActor(this.menu.actor, { visibleInOverview: true,

8
js/ui/status/power.js
View File

@ -74,9 +74,7 @@ Indicator.prototype = {
this._batteryItem = new PopupMenu.PopupMenuItem(''); this._batteryItem = new PopupMenu.PopupMenuItem('');
this._primaryPercentage = new St.Label(); this._primaryPercentage = new St.Label();
let percentBin = new St.Bin(); this._batteryItem.addActor(this._primaryPercentage, { align: St.Align.END });
percentBin.set_child(this._primaryPercentage, { x_align: St.Align.END });
this._batteryItem.addActor(percentBin);
this.menu.addMenuItem(this._batteryItem); this.menu.addMenuItem(this._batteryItem);
this._deviceSep = new PopupMenu.PopupSeparatorMenuItem(); this._deviceSep = new PopupMenu.PopupSeparatorMenuItem();
@ -232,10 +230,8 @@ DeviceItem.prototype = {
this._box.add_actor(this._label); this._box.add_actor(this._label);
this.addActor(this._box); this.addActor(this._box);
let percentBin = new St.Bin({ x_align: St.Align.END });
let percentLabel = new St.Label({ text: '%d%%'.format(Math.round(percentage)) }); let percentLabel = new St.Label({ text: '%d%%'.format(Math.round(percentage)) });
percentBin.child = percentLabel; this.addActor(percentLabel, { align: St.Align.END });
this.addActor(percentBin);
}, },
_deviceTypeToString: function(type) { _deviceTypeToString: function(type) {