popupMenu: Use a unicode character for the ornament

This makes it easy to replace the dot with another label in the future.
Change the allocation logic, as text layout is more complicated than
simple icon logic.

https://bugzilla.gnome.org/show_bug.cgi?id=698427
This commit is contained in:
Jasper St. Pierre 2013-04-19 21:08:35 -04:00
parent 4a2f54f6ff
commit a123ec94ef
2 changed files with 27 additions and 41 deletions

View File

@ -125,6 +125,10 @@ StScrollBar StButton#vhandle:active {
/* PopupMenu */
.popup-menu-ornament {
text-align: center;
}
.popup-menu-boxpointer,
.candidate-popup-boxpointer {
-arrow-border-radius: 8px;

View File

@ -59,7 +59,8 @@ const PopupBaseMenuItem = new Lang.Class({
this._children = [];
this._ornament = Ornament.NONE;
this._dot = null;
this._ornamentLabel = new St.Label({ style_class: 'popup-menu-ornament' });
this.actor.add_actor(this._ornamentLabel);
this._columnWidths = null;
this._spacing = 0;
this.active = false;
@ -189,32 +190,14 @@ const PopupBaseMenuItem = new Lang.Class({
this._ornament = ornament;
if (ornament == Ornament.DOT) {
this._dot = new St.DrawingArea({ style_class: 'popup-menu-item-dot' });
this._dot.connect('repaint', Lang.bind(this, this._onRepaintDot));
this.actor.add_actor(this._dot);
this.actor.add_accessible_state (Atk.StateType.CHECKED);
} else if (ornament == Ornament.NONE) {
this._dot.destroy();
this._dot = null;
this.actor.remove_accessible_state (Atk.StateType.CHECKED);
this._ornamentLabel.text = '\u2022';
this.actor.add_accessible_state(Atk.StateType.CHECKED);
} else if (ornament == Ornament.NONE) {
this._ornamentLabel.text = '';
this.actor.remove_accessible_state(Atk.StateType.CHECKED);
}
},
_onRepaintDot: function(area) {
let cr = area.get_context();
let [width, height] = area.get_surface_size();
let color = area.get_theme_node().get_foreground_color();
cr.setSourceRGBA (
color.red / 255,
color.green / 255,
color.blue / 255,
color.alpha / 255);
cr.arc(width / 2, height / 2, width / 3, 0, 2 * Math.PI);
cr.fill();
cr.$dispose();
},
// This returns column widths in logical order (i.e. from the dot
// to the image), not in visual order (left to right)
getColumnWidths: function() {
@ -285,26 +268,25 @@ const PopupBaseMenuItem = new Lang.Class({
let height = box.y2 - box.y1;
let direction = this.actor.get_text_direction();
if (this._dot) {
// The dot is placed outside box
// one quarter of padding from the border of the container
// (so 3/4 from the inner border)
// (padding is box.x1)
let dotBox = new Clutter.ActorBox();
let dotWidth = Math.round(box.x1 / 2);
// The ornament is placed outside box
// one quarter of padding from the border of the container
// (so 3/4 from the inner border)
// (padding is box.x1)
let ornamentBox = new Clutter.ActorBox();
let ornamentWidth = box.x1;
if (direction == Clutter.TextDirection.LTR) {
dotBox.x1 = Math.round(box.x1 / 4);
dotBox.x2 = dotBox.x1 + dotWidth;
} else {
dotBox.x2 = box.x2 + 3 * Math.round(box.x1 / 4);
dotBox.x1 = dotBox.x2 - dotWidth;
}
dotBox.y1 = Math.round(box.y1 + (height - dotWidth) / 2);
dotBox.y2 = dotBox.y1 + dotWidth;
this._dot.allocate(dotBox, flags);
ornamentBox.x1 = 0;
ornamentBox.x2 = ornamentWidth;
ornamentBox.y1 = box.y1;
ornamentBox.y2 = box.y2;
if (direction == Clutter.TextDirection.RTL) {
ornamentBox.x1 += box.x2;
ornamentBox.x2 += box.x2;
}
this._ornamentLabel.allocate(ornamentBox, flags);
let x;
if (direction == Clutter.TextDirection.LTR)
x = box.x1;