From bc2cb8fb621eec1a454fbdeb2ce6f4b23c2448a2 Mon Sep 17 00:00:00 2001
From: Marina Zhurakhinskaya <marinaz@src.gnome.org>
Date: Mon, 17 Nov 2008 22:32:28 +0000
Subject: [PATCH] Add an extra background to the button that maintains the
 state of the pressed button color opacity. This ensures the highlighted
 button color will be based on the button color instead of the color of the
 item the button is added to.

svn path=/trunk/; revision=53
---
 js/ui/button.js | 38 +++++++++++++++++++++-----------------
 js/ui/panel.js  |  2 +-
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/js/ui/button.js b/js/ui/button.js
index 9c22c85ba..cfab95cc0 100644
--- a/js/ui/button.js
+++ b/js/ui/button.js
@@ -7,14 +7,16 @@ const DEFAULT_BUTTON_COLOR = new Clutter.Color();
 DEFAULT_BUTTON_COLOR.from_pixel(0xeeddccff);
 
 const DEFAULT_PRESSED_BUTTON_COLOR = new Clutter.Color();
-DEFAULT_PRESSED_BUTTON_COLOR.from_pixel(0xddccbbff);
+DEFAULT_PRESSED_BUTTON_COLOR.from_pixel(0xccbbaaff);
 
 // Time for animation making the button darker
 const ANIMATION_TIME = 0.3;
 
-const FULL_OPACITY = 255;
+const NO_OPACITY = 0;
 
-const PARTIAL_OPACITY = 0.5 * 255;
+const PARTIAL_OPACITY = 0.4 * 255;
+
+const FULL_OPACITY = 255;
 
 function Button(text, button_color, pressed_button_color, min_width, min_height) {
     this._init(text, button_color, pressed_button_color, min_width, min_height);
@@ -46,18 +48,24 @@ Button.prototype = {
 
         this.button = new Clutter.Group({reactive: true});
         this._background = new Clutter.Rectangle({ color: this._button_color});
+        this._pressed_background = new Clutter.Rectangle({ color: this._pressed_button_color, opacity: NO_OPACITY});
         this._label = new Clutter.Label({ font_name: "Sans Bold 16px",
 	  			         text: text});
 	this._label.set_position(5, 5);
-        this._background.set_width(Math.max(this._label.get_width()+10, min_width))
-        this._background.set_height(Math.max(this._label.get_height()+10, min_height))
+        let background_width = Math.max(this._label.get_width()+10, min_width);
+        let background_height = Math.max(this._label.get_height()+10, min_height);
+        this._background.set_width(background_width)
+        this._background.set_height(background_height)
+        this._pressed_background.set_width(background_width)
+        this._pressed_background.set_height(background_height)
         this.button.add_actor(this._background);
+        this.button.add_actor(this._pressed_background);
         this.button.add_actor(this._label);
         let me = this; 
         this.button.connect('button-press-event',
 	    function(o, event) {     
                 me._is_between_press_and_release = true;  
-	        Tweener.addTween(me._background,
+	        Tweener.addTween(me._pressed_background,
 			        { time: ANIMATION_TIME,
 			          opacity: FULL_OPACITY,
 			          transition: "linear"
@@ -78,9 +86,8 @@ Button.prototype = {
 	    function(o, event) {
                 me._mouse_is_over_button = true; 
                 if (!me._active) {
-                    Tweener.removeTweens(me._background);         
-                    me._background.set_opacity(PARTIAL_OPACITY); 
-                    me._background.set_color(me._pressed_button_color);
+                    Tweener.removeTweens(me._pressed_background);         
+                    me._pressed_background.set_opacity(PARTIAL_OPACITY); 
                 } 
 		return false;
             });
@@ -89,9 +96,8 @@ Button.prototype = {
                 me._is_between_press_and_release = false;     
                 me._mouse_is_over_button = false;
                 if (!me._active) {
-                    Tweener.removeTweens(me._background); 
-                    me._background.set_opacity(FULL_OPACITY);
-                    me._background.set_color(me._button_color); 
+                    Tweener.removeTweens(me._pressed_background); 
+                    me._pressed_background.set_opacity(NO_OPACITY);
                 }
 		return false;
             });
@@ -100,13 +106,11 @@ Button.prototype = {
     release : function() {
         if (!this._is_between_press_and_release) {  
             this._active = false;
-            Tweener.removeTweens(this._background);  
+            Tweener.removeTweens(this._pressed_background);  
             if (this._mouse_is_over_button) {       
-                this._background.set_opacity(PARTIAL_OPACITY); 
-                this._background.set_color(this._pressed_button_color);
+                this._pressed_background.set_opacity(PARTIAL_OPACITY);
             } else {
-                this._background.set_opacity(FULL_OPACITY);
-                this._background.set_color(this._button_color); 
+                this._pressed_background.set_opacity(NO_OPACITY);
             }
         }
     }
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 3507065f5..0cd4c8070 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -14,7 +14,7 @@ const TRAY_HEIGHT = 24;
 const PANEL_BACKGROUND_COLOR = new Clutter.Color();
 PANEL_BACKGROUND_COLOR.from_pixel(0xeeddccff);
 const PRESSED_BUTTON_BACKGROUND_COLOR = new Clutter.Color();
-PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0xddccbbff);
+PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0xccbbaaff);
 
 function Panel() {
     this._init();