[gnome-shell/wip/sass: 71/78] popupMenu: Separate active and hover state

[Jakub Steiner <jimmac src gnome org>]

commit bf199013c9e5c3d523bfff1c342bd48569e4b59c
Author: Carlos Soriano <csoriano gnome org>
Date:   Wed Jan 21 17:55:50 2015 +0100

    popupMenu: Separate active and hover state
    
    So we can style both diferently

 data/theme/_common.scss                  |    3 ++-
 data/theme/gnome-shell-high-contrast.css |    4 +++-
 data/theme/gnome-shell.css               |    4 +++-
 js/ui/popupMenu.js                       |   30 +++++++++++++++++++++++++-----
 4 files changed, 33 insertions(+), 8 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index bd1bc56..e49c329 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -425,7 +425,8 @@ 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); }
   }
   .popup-inactive-menu-item { //all icons and other graphical elements
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 4fdf481..408c5e6 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -763,8 +763,10 @@ 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 .popup-inactive-menu-item {
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 2d6fab5..8ce64ea 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -763,8 +763,10 @@ 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 .popup-inactive-menu-item {
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 5b0db03..4360b55 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -92,6 +92,7 @@ const PopupBaseMenuItem = new Lang.Class({
 
         if (this._activatable) {
             this.actor.connect('button-release-event', Lang.bind(this, this._onButtonReleaseEvent));
+            this.actor.connect('button-press-event', Lang.bind(this, this._onButtonPressEvent));
             this.actor.connect('touch-event', Lang.bind(this, this._onTouchEvent));
             this.actor.connect('key-press-event', Lang.bind(this, this._onKeyPressEvent));
         }
@@ -119,6 +120,10 @@ const PopupBaseMenuItem = new Lang.Class({
         return Clutter.EVENT_STOP;
     },
 
+    _onButtonPressEvent: function (actor, event) {
+        return Clutter.EVENT_PROPAGATE;
+    },
+
     _onTouchEvent: function (actor, event) {
         if (event.type() == Clutter.EventType.TOUCH_END) {
             this.activate(event);
@@ -138,15 +143,24 @@ const PopupBaseMenuItem = new Lang.Class({
     },
 
     _onKeyFocusIn: function (actor) {
-        this.setActive(true);
+        this._setHover(true);
     },
 
     _onKeyFocusOut: function (actor) {
-        this.setActive(false);
+        this._setHover(false);
     },
 
     _onHoverChanged: function (actor) {
-        this.setActive(actor.hover);
+        this._setHover(actor.hover);
+    },
+
+    _setHover: function (active) {
+        if (active) {
+            this.actor.add_style_pseudo_class('hover');
+            this.actor.grab_key_focus();
+        } else {
+            this.actor.remove_style_pseudo_class('hover');
+        }
     },
 
     activate: function (event) {
@@ -158,10 +172,10 @@ const PopupBaseMenuItem = new Lang.Class({
         if (activeChanged) {
             this.active = active;
             if (active) {
-                this.actor.add_style_pseudo_class('active');
+                this.actor.add_style_pseudo_class('hover');
                 this.actor.grab_key_focus();
             } else {
-                this.actor.remove_style_pseudo_class('active');
+                this.actor.remove_style_pseudo_class('hover');
             }
             this.emit('active-changed', active);
         }
@@ -1126,6 +1140,12 @@ const PopupSubMenuMenuItem = new Lang.Class({
 
     _onButtonReleaseEvent: function(actor) {
         this._setOpenState(!this._getOpenState());
+        this.actor.remove_style_pseudo_class('active');
+        return Clutter.EVENT_PROPAGATE;
+    },
+
+    _onButtonPressEvent: function(actor) {
+        this.actor.add_style_pseudo_class('active');
         return Clutter.EVENT_PROPAGATE;
     }
 });