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

popupMenu: Add active CSS pseudo class

Browse Source 
So we can style it differently than :hover.
We already have a active state for the menu items which includes
more than hover. For example, when the keyboard focus moves to a item
or we select programatically a item.
For this reason we need a style class named active for the meaning we
give to it in menu items, and a pseudo class active with the meaning
CSS has.

https://bugzilla.gnome.org/show_bug.cgi?id=744680
This commit is contained in:
Carlos Soriano
2015-02-18 17:07:59 +01:00
committed by Florian Müllner
parent 75e0894de0
commit 8d66fff2aa
4 changed files with 42 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
js/ui/popupMenu.js
View File

@ -91,6 +91,7 @@ const PopupBaseMenuItem = new Lang.Class({
this.actor.add_style_class_name(params.style_class);
if (this._activatable) {
this.actor.connect('button-press-event', Lang.bind(this, this._onButtonPressEvent));
this.actor.connect('button-release-event', Lang.bind(this, this._onButtonReleaseEvent));
this.actor.connect('touch-event', Lang.bind(this, this._onTouchEvent));
this.actor.connect('key-press-event', Lang.bind(this, this._onKeyPressEvent));
@ -114,15 +115,26 @@ const PopupBaseMenuItem = new Lang.Class({
this._parent = parent;
},
_onButtonPressEvent: function (actor, event) {
// This is the CSS active state
this.actor.add_style_pseudo_class ('active');
return Clutter.EVENT_PROPAGATE;
},
_onButtonReleaseEvent: function (actor, event) {
this.actor.remove_style_pseudo_class ('active');
this.activate(event);
return Clutter.EVENT_STOP;
},
_onTouchEvent: function (actor, event) {
if (event.type() == Clutter.EventType.TOUCH_END) {
this.actor.remove_style_pseudo_class ('active');
this.activate(event);
return Clutter.EVENT_STOP;
} else if (event.type() == Clutter.EventType.TOUCH_BEGIN) {
// This is the CSS active state
this.actor.add_style_pseudo_class ('active');
}
return Clutter.EVENT_PROPAGATE;
},
@ -158,10 +170,17 @@ const PopupBaseMenuItem = new Lang.Class({
if (activeChanged) {
this.active = active;
if (active) {
this.actor.add_style_pseudo_class('active');
this.actor.add_style_class_name('active');
this.actor.grab_key_focus();
} else {
this.actor.remove_style_pseudo_class('active');
this.actor.remove_style_class_name('active');
// Remove the CSS active state if the user press the button and
// while holding moves to another menu item, so we don't paint all items.
// The correct behaviour would be to set the new item with the CSS
// active state as well, but button-press-event is not trigered,
// so we should track it in our own, which would involve some work
// in the container
this.actor.remove_style_pseudo_class ('active');
}
this.emit('active-changed', active);
}
@ -1125,6 +1144,9 @@ const PopupSubMenuMenuItem = new Lang.Class({
},
_onButtonReleaseEvent: function(actor) {
// Since we override the parent, we need to manage what the parent does
// with the active style class
this.actor.remove_style_pseudo_class ('active');
this._setOpenState(!this._getOpenState());
return Clutter.EVENT_PROPAGATE;
}