brl/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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
data/theme/_common.scss
View File

@ -312,7 +312,7 @@ StScrollBar {
&:ltr { padding-right: 17px; }
&:rtl { padding-left: 17px; }
}
.show-processes-dialog-app-list-item-name {
font-size: 10pt;
}
@ -425,9 +425,15 @@ StScrollBar {
background-color: darken($bg_color,2%);
box-shadow: inset 0 1px 0px lighten($borders_color,5%);
}
&:active { background-color: $selected_bg_color; }
&:hover { background-color: $selected_bg_color; }
&:active { background-color: darken($selected_bg_color,5%); }
&:insensitive { background-color: transparentize($bg_color,.5); }
}
.active {
background-color: $selected_bg_color;
}
.popup-inactive-menu-item { //all icons and other graphical elements
color: $fg_color;

6
data/theme/gnome-shell-high-contrast.css
View File

@ -763,10 +763,14 @@ StScrollBar {
.popup-menu .popup-menu-item:checked {
background-color: black;
box-shadow: inset 0 1px 0px #0d0d0d; }
.popup-menu .popup-menu-item:active {
.popup-menu .popup-menu-item:hover {
background-color: #215d9c; }
.popup-menu .popup-menu-item:active {
background-color: #1c5187; }
.popup-menu .popup-menu-item:insensitive {
background-color: rgba(0, 0, 0, 0.5); }
.popup-menu .active {
background-color: #215d9c; }
.popup-menu .popup-inactive-menu-item {
color: #fff; }
.popup-menu .popup-inactive-menu-item:insensitive {

6
data/theme/gnome-shell.css
View File

@ -763,10 +763,14 @@ StScrollBar {
.popup-menu .popup-menu-item:checked {
background-color: #343a3a;
box-shadow: inset 0 1px 0px #282c2c; }
.popup-menu .popup-menu-item:active {
.popup-menu .popup-menu-item:hover {
background-color: #215d9c; }
.popup-menu .popup-menu-item:active {
background-color: #1c5187; }
.popup-menu .popup-menu-item:insensitive {
background-color: rgba(57, 63, 63, 0.5); }
.popup-menu .active {
background-color: #215d9c; }
.popup-menu .popup-inactive-menu-item {
color: #eeeeec; }
.popup-menu .popup-inactive-menu-item:insensitive {

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;
}