[gnome-shell/wip/sass: 31/58] popupMenu: Separate active and hover state

[Carlos Soriano Sánchez <csoriano src gnome org>]

commit ca86a923782ae3d4f7def50311a5f1c91f76eb6e
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
    
    https://bugzilla.gnome.org/show_bug.cgi?id=744680

 data/theme/_common.scss                  |    3 ++-
 data/theme/gnome-shell-high-contrast.css |    4 +++-
 data/theme/gnome-shell.css               |    4 +++-
 js/ui/popupMenu.js                       |   25 ++++++++++++++++++++-----
 4 files changed, 28 insertions(+), 8 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 08e988c..369eaee 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 c0e6b59..2489cde 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..ea794a2 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -138,15 +138,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 +167,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 +1135,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;
     }
 });